chore：让智能客服到AI气泡上方
This commit is contained in:
@@ -43,8 +43,8 @@
|
|||||||
<image :src="aiAvatar" mode="aspectFill" />
|
<image :src="aiAvatar" mode="aspectFill" />
|
||||||
</view>
|
</view>
|
||||||
<view class="message-content">
|
<view class="message-content">
|
||||||
<!-- AI昵称固定，不可修改 -->
|
<!-- AI昵称固定，不可修改 - 左移到气泡上方 -->
|
||||||
<view class="message-nickname">智能助手</view>
|
<view class="message-nickname ai-nickname">智能助手</view>
|
||||||
<view class="message-bubble">
|
<view class="message-bubble">
|
||||||
<!-- 文本消息 -->
|
<!-- 文本消息 -->
|
||||||
<view v-if="message.type === 'text'" class="text-content">
|
<view v-if="message.type === 'text'" class="text-content">
|
||||||
@@ -357,7 +357,6 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import nsLoading from '@/components/ns-loading/ns-loading.vue'
|
import nsLoading from '@/components/ns-loading/ns-loading.vue'
|
||||||
import aiService from '@/common/js/ai-service.js'
|
import aiService from '@/common/js/ai-service.js'
|
||||||
@@ -1313,6 +1312,14 @@ $radius-lg: 36rpx;
|
|||||||
&:not(.ai-message .message-nickname) {
|
&:not(.ai-message .message-nickname) {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
// AI昵称专属样式 - 左移到气泡上方
|
||||||
|
&.ai-nickname {
|
||||||
|
text-align: left;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
align-self: flex-start;
|
||||||
|
margin-bottom: 4rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-bubble {
|
.message-bubble {
|
||||||
@@ -1765,7 +1772,7 @@ $radius-lg: 36rpx;
|
|||||||
right: -14rpx;
|
right: -14rpx;
|
||||||
width: 24rpx;
|
width: 24rpx;
|
||||||
height: 24rpx;
|
height: 24rpx;
|
||||||
background: inherit;
|
background: #ffffff !important; /* 菱形改为白色 */
|
||||||
border-radius: 6rpx;
|
border-radius: 6rpx;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
box-shadow: 4rpx -4rpx 4rpx rgba(0, 0, 0, 0.05);
|
box-shadow: 4rpx -4rpx 4rpx rgba(0, 0, 0, 0.05);
|
||||||
@@ -1792,6 +1799,11 @@ $radius-lg: 36rpx;
|
|||||||
/* AI消息特有样式 */
|
/* AI消息特有样式 */
|
||||||
.ai-message {
|
.ai-message {
|
||||||
.message-content {
|
.message-content {
|
||||||
|
/* 确保昵称在气泡上方的布局 */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
.message-bubble {
|
.message-bubble {
|
||||||
background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; /* 蓝色浅渐变 */
|
background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; /* 蓝色浅渐变 */
|
||||||
color: #2c3e50 !important;
|
color: #2c3e50 !important;
|
||||||
@@ -1813,7 +1825,7 @@ $radius-lg: 36rpx;
|
|||||||
left: -14rpx;
|
left: -14rpx;
|
||||||
width: 24rpx;
|
width: 24rpx;
|
||||||
height: 24rpx;
|
height: 24rpx;
|
||||||
background: $bg-card;
|
background: #ffffff !important; /* 菱形改为白色 */
|
||||||
border-radius: 6rpx;
|
border-radius: 6rpx;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
box-shadow: -4rpx 4rpx 4rpx rgba(0, 0, 0, 0.05);
|
box-shadow: -4rpx 4rpx 4rpx rgba(0, 0, 0, 0.05);
|
||||||
@@ -1913,7 +1925,10 @@ $radius-lg: 36rpx;
|
|||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border: none;
|
border: none;
|
||||||
top: -17px;
|
text-align: center; /* 兼容多端文字居中 */
|
||||||
|
white-space: nowrap; /* 强制文字单行横向显示 */
|
||||||
|
line-height: 1; /* 重置行高，避免文字垂直偏移 */
|
||||||
|
top:-10px;
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
background-color: $color-primary-light;
|
background-color: $color-primary-light;
|
||||||
@@ -1953,21 +1968,17 @@ $radius-lg: 36rpx;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 昵称编辑弹窗样式（修复右侧溢出问题）
|
||||||
|
.nickname-editor-popup {
|
||||||
|
|
||||||
|
|
||||||
// 昵称编辑弹窗样式（修复右侧溢出问题）
|
|
||||||
.nickname-editor-popup {
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nickname-editor-mask {
|
.nickname-editor-mask {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -1975,9 +1986,9 @@ $radius-lg: 36rpx;
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
backdrop-filter: blur(6rpx);
|
backdrop-filter: blur(6rpx);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nickname-editor-panel {
|
.nickname-editor-panel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@@ -2061,49 +2072,29 @@ $radius-lg: 36rpx;
|
|||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: $color-text-light;
|
color: $color-text-light;
|
||||||
margin-bottom: 32rpx;
|
margin-bottom: 32rpx;
|
||||||
text-align: center;
|
display: block;
|
||||||
width: 100%;
|
line-height: 1.5;
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nickname-editor-actions {
|
.nickname-editor-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 24rpx;
|
justify-content: flex-end;
|
||||||
width: 100%;
|
gap: 16rpx;
|
||||||
box-sizing: border-box;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
|
|
||||||
.nickname-action-btn {
|
.nickname-action-btn {
|
||||||
flex: none;
|
padding: 16rpx 32rpx;
|
||||||
width: 160rpx;
|
|
||||||
height: 96rpx;
|
|
||||||
border-radius: $radius-lg;
|
border-radius: $radius-lg;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
box-sizing: border-box;
|
border: none;
|
||||||
// 核心：文字下移 + 垂直居中
|
|
||||||
padding-top: 12rpx; // 顶部内边距增加，文字下移
|
|
||||||
padding-bottom: 0;
|
|
||||||
line-height: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
// hover动效：文字轻微上移
|
|
||||||
&:hover {
|
|
||||||
padding-top: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.cancel {
|
&.cancel {
|
||||||
background-color: $bg-card;
|
background-color: $bg-main;
|
||||||
border: 2rpx solid #f0f4f8;
|
|
||||||
color: $color-text-light;
|
color: $color-text-light;
|
||||||
|
|
||||||
// 修复：替换未定义的 $f8fafc 为已定义的 $bg-main
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $bg-main;
|
background-color: #e8edf3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2112,33 +2103,32 @@ $radius-lg: 36rpx;
|
|||||||
color: white;
|
color: white;
|
||||||
box-shadow: 0 4rpx 12rpx rgba(108, 142, 191, 0.2);
|
box-shadow: 0 4rpx 12rpx rgba(108, 142, 191, 0.2);
|
||||||
|
|
||||||
&:hover {
|
&.disabled {
|
||||||
|
background-color: $color-primary-light;
|
||||||
|
opacity: 0.7;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.disabled):hover {
|
||||||
background-color: #5a7cb0;
|
background-color: #5a7cb0;
|
||||||
transform: translateY(-2rpx);
|
transform: translateY(-2rpx);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.disabled {
|
/* 工具面板 */
|
||||||
background-color: $color-primary-light;
|
.tools-popup {
|
||||||
box-shadow: none;
|
|
||||||
opacity: 0.7;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* 弹窗样式基础 */
|
|
||||||
.tools-popup, .voice-popup, .avatar-selector-popup {
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
|
||||||
|
|
||||||
.tools-mask, .voice-mask, .avatar-selector-mask {
|
.tools-mask {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -2148,7 +2138,6 @@ $radius-lg: 36rpx;
|
|||||||
backdrop-filter: blur(6rpx);
|
backdrop-filter: blur(6rpx);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 工具面板样式 */
|
|
||||||
.tools-panel {
|
.tools-panel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@@ -2156,14 +2145,16 @@ $radius-lg: 36rpx;
|
|||||||
right: 0;
|
right: 0;
|
||||||
background-color: $bg-card;
|
background-color: $bg-card;
|
||||||
border-radius: $radius-lg $radius-lg 0 0;
|
border-radius: $radius-lg $radius-lg 0 0;
|
||||||
box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.1);
|
padding: 32rpx;
|
||||||
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
.tools-header {
|
.tools-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 32rpx;
|
margin-bottom: 32rpx;
|
||||||
border-bottom: 2rpx solid #f0f4f8;
|
border-bottom: 2rpx solid #f0f4f8;
|
||||||
|
padding-bottom: 16rpx;
|
||||||
|
|
||||||
text {
|
text {
|
||||||
font-size: 34rpx;
|
font-size: 34rpx;
|
||||||
@@ -2172,8 +2163,8 @@ $radius-lg: 36rpx;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
width: 64rpx;
|
width: 56rpx;
|
||||||
height: 64rpx;
|
height: 56rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: $bg-main;
|
background-color: $bg-main;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -2187,7 +2178,7 @@ $radius-lg: 36rpx;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
font-size: 34rpx;
|
font-size: 28rpx;
|
||||||
color: $color-text-light;
|
color: $color-text-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -2196,24 +2187,27 @@ $radius-lg: 36rpx;
|
|||||||
.tools-grid {
|
.tools-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
padding: 32rpx;
|
gap: 24rpx;
|
||||||
gap: 32rpx;
|
|
||||||
|
|
||||||
.tool-item {
|
.tool-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
transition: all 0.3s ease;
|
padding: 24rpx 16rpx;
|
||||||
|
border-radius: $radius-md;
|
||||||
|
background-color: $bg-main;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
background-color: #e8edf3;
|
||||||
transform: translateY(-4rpx);
|
transform: translateY(-4rpx);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-icon {
|
.tool-icon {
|
||||||
width: 96rpx;
|
width: 88rpx;
|
||||||
height: 96rpx;
|
height: 88rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: $bg-main;
|
background-color: $bg-card;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -2227,29 +2221,53 @@ $radius-lg: 36rpx;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tool-text {
|
.tool-text {
|
||||||
font-size: 26rpx;
|
font-size: 24rpx;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 语音输入面板样式 */
|
/* 语音输入面板 */
|
||||||
.voice-input-panel {
|
.voice-popup {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
bottom: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
.voice-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
backdrop-filter: blur(6rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-input-panel {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
background-color: $bg-card;
|
background-color: $bg-card;
|
||||||
border-radius: $radius-lg $radius-lg 0 0;
|
border-radius: $radius-lg;
|
||||||
box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.1);
|
padding: 48rpx;
|
||||||
|
width: 60%;
|
||||||
|
max-width: 520rpx;
|
||||||
|
box-shadow: 0 8rpx 36rpx rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
.voice-header {
|
.voice-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 32rpx;
|
margin-bottom: 32rpx;
|
||||||
border-bottom: 2rpx solid #f0f4f8;
|
border-bottom: 2rpx solid #f0f4f8;
|
||||||
|
padding-bottom: 16rpx;
|
||||||
|
|
||||||
text {
|
text {
|
||||||
font-size: 34rpx;
|
font-size: 34rpx;
|
||||||
@@ -2258,8 +2276,8 @@ $radius-lg: 36rpx;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
width: 64rpx;
|
width: 56rpx;
|
||||||
height: 64rpx;
|
height: 56rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: $bg-main;
|
background-color: $bg-main;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -2273,53 +2291,56 @@ $radius-lg: 36rpx;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
font-size: 34rpx;
|
font-size: 28rpx;
|
||||||
color: $color-text-light;
|
color: $color-text-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-content {
|
.voice-content {
|
||||||
padding: 64rpx 32rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-bottom: 48rpx;
|
||||||
|
|
||||||
.voice-wave {
|
.voice-wave {
|
||||||
width: 240rpx;
|
width: 280rpx;
|
||||||
height: 240rpx;
|
height: 160rpx;
|
||||||
border-radius: 50%;
|
|
||||||
background-color: $bg-main;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 48rpx;
|
margin-bottom: 24rpx;
|
||||||
box-shadow: $shadow-md;
|
|
||||||
|
&.recording .wave-bar {
|
||||||
|
animation: wave 1.2s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
.wave-bar {
|
.wave-bar {
|
||||||
width: 12rpx;
|
width: 8rpx;
|
||||||
height: 40rpx;
|
height: 40rpx;
|
||||||
background-color: $color-primary-light;
|
margin: 0 4rpx;
|
||||||
border-radius: 6rpx;
|
background-color: $color-primary;
|
||||||
margin: 0 8rpx;
|
border-radius: 4rpx;
|
||||||
transition: height 0.3s ease;
|
animation: none;
|
||||||
}
|
|
||||||
|
|
||||||
&.recording {
|
&:nth-child(1) { height: 60rpx; animation-delay: 0s; }
|
||||||
.wave-bar {
|
&:nth-child(2) { height: 90rpx; animation-delay: 0.1s; }
|
||||||
animation: waveAnimation 1.2s infinite ease-in-out;
|
&:nth-child(3) { height: 50rpx; animation-delay: 0.2s; }
|
||||||
}
|
&:nth-child(4) { height: 120rpx; animation-delay: 0.3s; }
|
||||||
|
&:nth-child(5) { height: 70rpx; animation-delay: 0.4s; }
|
||||||
|
&:nth-child(6) { height: 100rpx; animation-delay: 0.5s; }
|
||||||
|
&:nth-child(7) { height: 80rpx; animation-delay: 0.6s; }
|
||||||
|
&:nth-child(8) { height: 40rpx; animation-delay: 0.7s; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-tip {
|
.voice-tip {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: $color-text;
|
color: $color-text-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-actions {
|
.voice-actions {
|
||||||
padding: 32rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
@@ -2327,16 +2348,17 @@ $radius-lg: 36rpx;
|
|||||||
width: 120rpx;
|
width: 120rpx;
|
||||||
height: 120rpx;
|
height: 120rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: $color-user;
|
background-color: $color-primary;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-shadow: 0 8rpx 24rpx rgba(134, 117, 169, 0.3);
|
box-shadow: 0 8rpx 24rpx rgba(108, 142, 191, 0.3);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.2s ease;
|
||||||
|
border: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
background-color: #756298;
|
background-color: #5a7cb0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
@@ -2346,8 +2368,27 @@ $radius-lg: 36rpx;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 头像选择弹窗 */
|
||||||
|
.avatar-selector-popup {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
|
||||||
|
.avatar-selector-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
backdrop-filter: blur(6rpx);
|
||||||
|
}
|
||||||
|
|
||||||
/* 头像选择弹窗样式 */
|
|
||||||
.avatar-selector-panel {
|
.avatar-selector-panel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@@ -2356,16 +2397,18 @@ $radius-lg: 36rpx;
|
|||||||
background-color: $bg-card;
|
background-color: $bg-card;
|
||||||
border-radius: $radius-lg;
|
border-radius: $radius-lg;
|
||||||
padding: 32rpx;
|
padding: 32rpx;
|
||||||
width: 580rpx;
|
width: calc(100% - 80rpx);
|
||||||
|
max-width: 520rpx;
|
||||||
box-shadow: 0 8rpx 36rpx rgba(0, 0, 0, 0.15);
|
box-shadow: 0 8rpx 36rpx rgba(0, 0, 0, 0.15);
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
.avatar-selector-header {
|
.avatar-selector-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 32rpx;
|
margin-bottom: 24rpx;
|
||||||
border-bottom: 2rpx solid #f0f4f8;
|
border-bottom: 2rpx solid #f0f4f8;
|
||||||
padding-bottom: 24rpx;
|
padding-bottom: 16rpx;
|
||||||
|
|
||||||
text {
|
text {
|
||||||
font-size: 34rpx;
|
font-size: 34rpx;
|
||||||
@@ -2374,8 +2417,8 @@ $radius-lg: 36rpx;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
width: 64rpx;
|
width: 56rpx;
|
||||||
height: 64rpx;
|
height: 56rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: $bg-main;
|
background-color: $bg-main;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -2389,7 +2432,7 @@ $radius-lg: 36rpx;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
font-size: 34rpx;
|
font-size: 28rpx;
|
||||||
color: $color-text-light;
|
color: $color-text-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -2397,13 +2440,13 @@ $radius-lg: 36rpx;
|
|||||||
|
|
||||||
.avatar-selector-content {
|
.avatar-selector-content {
|
||||||
.current-avatar-preview {
|
.current-avatar-preview {
|
||||||
width: 200rpx;
|
width: 180rpx;
|
||||||
height: 200rpx;
|
height: 180rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 auto 48rpx;
|
margin: 0 auto 32rpx;
|
||||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
box-shadow: $shadow-md;
|
||||||
border: 8rpx solid $bg-main;
|
border: 4rpx solid #f0f4f8;
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -2415,31 +2458,30 @@ $radius-lg: 36rpx;
|
|||||||
.avatar-selector-actions {
|
.avatar-selector-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24rpx;
|
gap: 16rpx;
|
||||||
|
|
||||||
.avatar-select-action {
|
.avatar-select-action {
|
||||||
height: 96rpx;
|
padding: 24rpx;
|
||||||
border-radius: $radius-lg;
|
border-radius: $radius-lg;
|
||||||
background-color: $bg-main;
|
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: $color-text;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
|
||||||
gap: 16rpx;
|
gap: 16rpx;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
border: 2rpx solid #f0f4f8;
|
border: 2rpx solid #f0f4f8;
|
||||||
|
background-color: $bg-main;
|
||||||
|
color: $color-text;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #e8edf3;
|
background-color: #e8edf3;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.cancel {
|
&.cancel {
|
||||||
background-color: $bg-card;
|
background-color: #f8fafc;
|
||||||
color: $color-text-light;
|
border-color: #e9edf2;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #f8fafc;
|
background-color: #f0f4f8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2451,41 +2493,42 @@ $radius-lg: 36rpx;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 动画定义 */
|
/* 动画定义 */
|
||||||
@keyframes dotPulse {
|
@keyframes dotPulse {
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
transform: scale(1);
|
opacity: 0.4;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wave {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scaleY(0.5);
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: scale(1.3);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shine {
|
@keyframes shine {
|
||||||
0% {
|
0% {
|
||||||
left: -100%;
|
left: -100%;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
left: 200%;
|
left: 200%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes waveAnimation {
|
@keyframes gradient-flow {
|
||||||
0%, 100% {
|
|
||||||
height: 40rpx;
|
|
||||||
background-color: $color-primary-light;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
height: 120rpx;
|
|
||||||
background-color: $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 新增：渐变流动动画（仅为背景增加动效，不影响其他样式） */
|
|
||||||
@keyframes gradient-flow {
|
|
||||||
0% {
|
0% {
|
||||||
background-position: 0% 50%;
|
background-position: 0% 50%;
|
||||||
}
|
}
|
||||||
@@ -2495,98 +2538,38 @@ $radius-lg: 36rpx;
|
|||||||
100% {
|
100% {
|
||||||
background-position: 0% 50%;
|
background-position: 0% 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 富文本样式补充 */
|
/* 滚动条样式优化 */
|
||||||
rich-text {
|
::-webkit-scrollbar {
|
||||||
line-height: 1.8;
|
width: 8rpx;
|
||||||
font-size: 26rpx;
|
height: 8rpx;
|
||||||
color: $color-text;
|
}
|
||||||
display: block;
|
|
||||||
|
|
||||||
strong {
|
::-webkit-scrollbar-track {
|
||||||
font-weight: 600;
|
background: $bg-main;
|
||||||
color: $color-text;
|
border-radius: 4rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
em {
|
::-webkit-scrollbar-thumb {
|
||||||
font-style: italic;
|
background: $color-primary-light;
|
||||||
color: $color-text-light;
|
border-radius: 4rpx;
|
||||||
}
|
opacity: 0.7;
|
||||||
|
|
||||||
code {
|
&:hover {
|
||||||
background-color: #f0f4f8;
|
background: $color-primary;
|
||||||
padding: 4rpx 8rpx;
|
opacity: 1;
|
||||||
border-radius: $radius-sm;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: $color-primary;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
/* 响应式适配 */
|
||||||
color: $color-primary;
|
@media (max-width: 750rpx) {
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-offset: 4rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
br {
|
|
||||||
display: block;
|
|
||||||
height: 24rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 适配小程序和H5的按钮默认样式重置 */
|
|
||||||
button {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
line-height: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 滑块样式优化 */
|
|
||||||
slider {
|
|
||||||
height: 12rpx;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
height: 12rpx;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: $color-primary;
|
|
||||||
border: none;
|
|
||||||
box-shadow: 0 2rpx 8rpx rgba(108, 142, 191, 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 输入框聚焦样式优化 */
|
|
||||||
input:focus, textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式适配：小屏幕设备 */
|
|
||||||
@media (max-width: 375px) {
|
|
||||||
.ai-chat-container {
|
.ai-chat-container {
|
||||||
padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-messages {
|
.chat-messages {
|
||||||
padding: 16rpx 24rpx;
|
padding: 16rpx 24rpx;
|
||||||
}
|
|
||||||
|
|
||||||
.message-item {
|
.message-item {
|
||||||
margin-bottom: 24rpx;
|
margin-bottom: 24rpx;
|
||||||
}
|
|
||||||
|
|
||||||
.user-message, .ai-message {
|
.user-message, .ai-message {
|
||||||
.avatar {
|
.avatar {
|
||||||
@@ -2597,35 +2580,26 @@ $radius-lg: 36rpx;
|
|||||||
.message-content {
|
.message-content {
|
||||||
margin-left: 16rpx;
|
margin-left: 16rpx;
|
||||||
max-width: calc(100% - 88rpx);
|
max-width: calc(100% - 88rpx);
|
||||||
}
|
|
||||||
|
|
||||||
.user-message .message-content {
|
|
||||||
margin-right: 16rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-bubble {
|
.message-bubble {
|
||||||
padding: 20rpx 24rpx !important;
|
padding: 16rpx 24rpx;
|
||||||
}
|
|
||||||
|
|
||||||
.message-text {
|
.message-text {
|
||||||
font-size: 26rpx !important;
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-area {
|
.input-area {
|
||||||
padding: 16rpx 24rpx;
|
padding: 16rpx 24rpx;
|
||||||
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-tools .tool-btn {
|
.input-container {
|
||||||
width: 56rpx;
|
.message-input {
|
||||||
height: 56rpx;
|
min-height: 72rpx;
|
||||||
margin-right: 12rpx;
|
padding: 16rpx 24rpx;
|
||||||
}
|
|
||||||
|
|
||||||
.input-container .message-input {
|
|
||||||
min-height: 76rpx;
|
|
||||||
padding: 20rpx 24rpx;
|
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2634,85 +2608,8 @@ $radius-lg: 36rpx;
|
|||||||
height: 68rpx;
|
height: 68rpx;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-selector-panel, .nickname-editor-panel {
|
|
||||||
width: 90vw;
|
|
||||||
padding: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-selector-content .current-avatar-preview {
|
|
||||||
width: 160rpx;
|
|
||||||
height: 160rpx;
|
|
||||||
margin-bottom: 32rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.voice-input-panel .voice-content .voice-wave {
|
|
||||||
width: 200rpx;
|
|
||||||
height: 200rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 深色模式适配（可选） */
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
$bg-main: #1e2128;
|
|
||||||
$bg-card: #2d3139;
|
|
||||||
$color-text: #e5e7eb;
|
|
||||||
$color-text-light: #9ca3af;
|
|
||||||
$color-primary: #8197c3;
|
|
||||||
$color-primary-light: #9aa7c0;
|
|
||||||
$color-user: #a594cc;
|
|
||||||
|
|
||||||
.ai-chat-container {
|
|
||||||
background-color: $bg-main;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-bubble {
|
|
||||||
border-color: #3d4149;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-message .message-bubble::before {
|
|
||||||
background: $bg-card;
|
|
||||||
border-color: #3d4149;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-area {
|
|
||||||
background-color: $bg-card;
|
|
||||||
border-top-color: #3d4149;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-tools .tool-btn,
|
|
||||||
.tools-header .close-btn,
|
|
||||||
.voice-header .close-btn,
|
|
||||||
.avatar-selector-header .close-btn,
|
|
||||||
.nickname-editor-header .close-btn {
|
|
||||||
background-color: $bg-main;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-input,
|
|
||||||
.nickname-input {
|
|
||||||
background-color: $bg-main;
|
|
||||||
border-color: #3d4149;
|
|
||||||
color: $color-text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tools-panel, .voice-input-panel, .avatar-selector-panel, .nickname-editor-panel {
|
|
||||||
background-color: $bg-card;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tools-header, .voice-header, .avatar-selector-header, .nickname-editor-header {
|
|
||||||
border-bottom-color: #3d4149;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tool-item .tool-icon,
|
|
||||||
.voice-wave {
|
|
||||||
background-color: $bg-main;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-select-action,
|
|
||||||
.nickname-action-btn.cancel {
|
|
||||||
background-color: $bg-main;
|
|
||||||
border-color: #3d4149;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user