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