Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：修改了客服样式

Browse Source
This commit is contained in:
jinhhanhan
2026-04-07 15:21:29 +08:00
parent cef2b6e02e
commit 0ca0fe3b0d
2 changed files with 64 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
pages_tool/ai-chat/ai-chat-message.vue
View File

@@ -1503,11 +1503,7 @@ $radius-lg: 36rpx;
height: 100vh;
display: flex;
flex-direction: column;
/* 仅新增：科技感粉蓝渐变背景 + 流动动画 */
background: white; /* 白色 */
background-size: 200% 200%;
animation: gradient-flow 15s ease infinite;
/* 原有样式保持不变 */
background: #f8f8f8; /* 微信聊天页面背景色 */
overflow: hidden;
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
@@ -1515,22 +1511,22 @@ $radius-lg: 36rpx;
.chat-messages {
flex: 1;
padding: 24rpx 32rpx;
padding: 16rpx 24rpx;
overflow-y: auto;
box-sizing: border-box;
min-height: 0; /* 重要：防止flex元素溢出 */
.load-more {
text-align: center;
padding: 24rpx 0;
color: $color-text-light;
padding: 16rpx 0;
color: #999;
}
.message-item {
margin-bottom: 32rpx;
margin-bottom: 20rpx;
&.first-message {
margin-top: 24rpx;
margin-top: 16rpx;
}
.user-message, .ai-message {
@@ -2025,46 +2021,28 @@ $radius-lg: 36rpx;
text-align: right;
.message-bubble {
background: #c4e0ff !important; /* 浅蓝色 */
color: black !important;
border-radius: 16rpx 16rpx 4rpx 16rpx; /* 右对齐气泡尖角适配 */
box-shadow: 0 8rpx 20rpx rgba(196, 224, 255, 0.3) !important;
background: #07c160 !important; /* 微信绿色 */
color: white !important;
border-radius: 18rpx 4rpx 18rpx 18rpx; /* 微信风格：右上角直角 */
box-shadow: 0 2rpx 8rpx rgba(7, 193, 96, 0.2) !important;
border: none !important;
/* ✅ 关键：允许内容撑开高度 */
min-height: auto;
height: auto;
padding: 24rpx 32rpx; /* 保留内边距 */
display: inline-block; /* 让宽度也随内容收缩（可选） */
max-width: 80%; /* 防止过宽 */
padding: 16rpx 20rpx; /* 微信风格内边距 */
display: inline-block;
max-width: 70%; /* 微信风格宽度 */
word-break: break-word;
white-space: pre-wrap; /* 保留用户输入的换行符 */
line-height: 1.6;
white-space: pre-wrap;
line-height: 1.5;
&::before {
content: '';
position: absolute;
top: 20rpx;
right: -14rpx;
width: 24rpx;
height: 24rpx;
background: #ffffff !important; /* 菱形改为白色 */
border-radius: 6rpx;
top: 12rpx;
right: -8rpx;
width: 16rpx;
height: 16rpx;
background: #07c160 !important; /* 与气泡同色 */
transform: rotate(45deg);
box-shadow: 4rpx -4rpx 4rpx rgba(0, 0, 0, 0.05);
}
&::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.15) 100%
);
animation: shine 4s infinite linear;
}
}
}
@@ -2079,31 +2057,29 @@ $radius-lg: 36rpx;
align-items: flex-start;
.message-bubble {
background: white !important; /* 白色 */
background: white !important; /* 微信风格白色 */
color: black !important;
border-radius: 16rpx 16rpx 16rpx 4rpx; /* 左对齐气泡尖角适配 */
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1) !important;
border-radius: 4rpx 18rpx 18rpx 18rpx; /* 微信风格：左上角直角 */
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) !important;
border: 1rpx solid #e0e0e0 !important;
min-height: auto;
height: auto;
padding: 24rpx 32rpx;
padding: 16rpx 20rpx; /* 微信风格内边距 */
display: inline-block;
max-width: 80%;
max-width: 70%; /* 微信风格宽度 */
word-break: break-word;
white-space: pre-wrap;
line-height: 1.6;
line-height: 1.5;
&::before {
content: '';
position: absolute;
top: 20rpx;
left: -14rpx;
width: 24rpx;
height: 24rpx;
background: #ffffff !important; /* 菱形改为白色 */
border-radius: 6rpx;
top: 12rpx;
left: -8rpx;
width: 16rpx;
height: 16rpx;
background: white !important; /* 与气泡同色 */
transform: rotate(45deg);
box-shadow: -4rpx 4rpx 4rpx rgba(0, 0, 0, 0.05);
border: 1rpx solid #f0f4f8;
border: 1rpx solid #e0e0e0;
border-right: none;
border-top: none;
}
@@ -2115,17 +2091,16 @@ $radius-lg: 36rpx;
/* 输入区域 */
.input-area {
background: #c4e0ff; /* 浅蓝色 */
border-top: 2rpx solid #f0f4f8;
padding: 24rpx 32rpx;
background: white; /* 白色 */
border-top: 1rpx solid #e5e5e5;
padding: 16rpx 24rpx;
/* 确保在微信小程序中紧贴底部 */
flex-shrink: 0;
/* 微信小程序安全区域适配 */
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
/* 确保输入区域正确显示 */
position: relative;
z-index: 10;
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.03);
.input-tools {
display: flex;
@@ -2133,25 +2108,18 @@ $radius-lg: 36rpx;
align-items: flex-start;
.tool-btn {
width: 64rpx;
height: 64rpx;
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: $bg-main;
margin-right: 16rpx;
margin-top: -8rpx;
background-color: #f2f2f2;
margin-right: 12rpx;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
&:hover {
background-color: #e8edf3;
transform: scale(1.05);
}
.iconfont {
font-size: 34rpx;
color: $color-text-light;
font-size: 32rpx;
color: #666;
}
}
}
@@ -2162,60 +2130,44 @@ $radius-lg: 36rpx;
.message-input {
flex: 1;
min-height: 88rpx;
max-height: 220rpx;
background-color: $bg-main;
border-radius: $radius-lg;
padding: 24rpx 32rpx;
min-height: 72rpx;
max-height: 200rpx;
background-color: white;
border-radius: 36rpx;
padding: 16rpx 24rpx;
font-size: 28rpx;
line-height: 1.6;
border: 1rpx solid #e8edf3;
transition: all 0.2s ease;
color: $color-text;
&:focus {
background-color: $bg-card;
border-color: $color-primary-light;
box-shadow: 0 0 0 4rpx rgba(138, 159, 184, 0.1);
}
line-height: 1.5;
border: 1rpx solid #e5e5e5;
color: #333;
&::placeholder {
color: $color-text-light;
opacity: 0.8;
color: #999;
opacity: 1;
}
}
/* 发送按钮 */
.send-btn {
width: 112rpx;
height: 76rpx;
border-radius: $radius-lg;
background-color: $color-primary;
margin-left: 16rpx;
width: 80rpx;
height: 72rpx;
border-radius: 50%;
background-color: #07c160;
margin-left: 12rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(108, 142, 191, 0.2);
transition: all 0.2s ease;
color: white;
font-size: 28rpx;
font-size: 26rpx;
font-weight: 500;
border: none;
text-align: center; /* 兼容多端文字居中 */
white-space: nowrap; /* 强制文字单行横向显示 */
line-height: 1; /* 重置行高，避免文字垂直偏移 */
top: -10px;
text-align: center;
white-space: nowrap;
line-height: 1;
&.disabled {
background-color: $color-primary-light;
box-shadow: none;
background-color: #ccc;
opacity: 0.7;
}
&:not(.disabled):hover {
transform: scale(1.05);
background-color: #5a7cb0;
}
}
}
}

4
pages_tool/ai-chat/index.vue
View File

@@ -599,8 +599,8 @@ export default {
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx;
background-color: #c4e0ff; /* 浅蓝色 */
border-bottom: 2rpx solid #eeeeee;
background-color: white; /* 白色 */
border-bottom: 1rpx solid #e5e5e5;
.header-left {
flex: 0 0 auto;