pay/pay-customer
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore user message background color when images are present

Browse Source
This commit is contained in:
Your Name 2026-04-01 13:54:30 +08:00
parent acad07cfee
commit 7461b5e393
1 changed files with 58 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/pages/ai/chat.vue
View File

@ -1301,13 +1301,13 @@ onLoad(async () => {
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
width: 100vw; width: 100vw;
background-color: #f5f5f5; // background-color: #f5f5f5;
} }
.chat-messages { .chat-messages {
width: 100%; width: 100%;
padding: 30rpx 20rpx; padding: 30rpx 20rpx;
padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); padding-bottom: calc(220rpx + env(safe-area-inset-bottom));
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
} }
@ -1319,49 +1319,9 @@ onLoad(async () => {
margin-bottom: 30rpx; margin-bottom: 30rpx;
animation: fadeIn 0.3s ease-in; animation: fadeIn 0.3s ease-in;
&.user-message {
justify-content: flex-end;
align-items: flex-start;
.message-content-wrapper {
align-items: flex-end;
} }
.ai-message {
.message-content {
background-color: #1c64f2;
color: #fff;
margin-right: 0;
flex-shrink: 0;
// 用户消息中的图片显示优化
.message-images {
margin-bottom: 0;
.message-image-item {
border-radius: 8rpx;
}
}
}
.message-time {
color: #999;
font-size: 22rpx;
margin-top: 6rpx;
text-align: right;
min-width: 80rpx;
}
.message-meta {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 6rpx;
gap: 8rpx;
flex-direction: row;
}
}
&.ai-message {
align-items: flex-start; align-items: flex-start;
.message-content-wrapper { .message-content-wrapper {
@ -1369,7 +1329,7 @@ onLoad(async () => {
} }
.message-content { .message-content {
background-color: #fff; background-color: #f5f5f5;
color: #333; color: #333;
margin-left: 12rpx; margin-left: 12rpx;
margin-right: 0; margin-right: 0;
@ -1397,8 +1357,51 @@ onLoad(async () => {
flex-shrink: 0; flex-shrink: 0;
} }
} }
.user-message {
justify-content: flex-end;
align-items: flex-start;
.message-content-wrapper {
align-items: flex-end;
} }
.message-content {
background-color: #1c64f2;
color: #fff;
margin-right: 0;
flex-shrink: 0;
// 用户消息中的图片显示优化
.message-images {
margin-bottom: 20rpx;
.message-image-item {
border-radius: 8rpx;
}
}
}
.message-time {
color: #999;
font-size: 22rpx;
margin-top: 6rpx;
text-align: right;
min-width: 80rpx;
}
.message-meta {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 6rpx;
gap: 8rpx;
flex-direction: row;
}
}
@keyframes fadeIn { @keyframes fadeIn {
from { from {
opacity: 0; opacity: 0;
@ -1455,7 +1458,7 @@ onLoad(async () => {
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
box-sizing: border-box; box-sizing: border-box;
background-color: #1c64f2;
&.loading { &.loading {
opacity: 0.7; opacity: 0.7;
} }
@ -1466,7 +1469,6 @@ onLoad(async () => {
.user-message & { .user-message & {
padding: 8rpx; padding: 8rpx;
background-color: transparent;
} }
} }
@ -1564,17 +1566,17 @@ onLoad(async () => {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: #fff; background-color: #f8f8f8;
border-top: 1px solid #e5e5e5; border-top: 1px solid #eee;
padding: 20rpx 20rpx; padding: 20rpx 20rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
z-index: 100; z-index: 100;
} }
.input-container { .input-container {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #f5f5f5; background-color: #fff;
border-radius: 50rpx; border-radius: 50rpx;
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
} }
@ -1616,7 +1618,6 @@ onLoad(async () => {
.image-preview-area { .image-preview-area {
margin-bottom: 20rpx; margin-bottom: 20rpx;
padding: 0 20rpx;
} }
// 快捷按钮栏样式 // 快捷按钮栏样式
@ -1624,16 +1625,16 @@ onLoad(async () => {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 16rpx; gap: 16rpx;
padding: 16rpx 0; padding: 0 0 16rpx 0;
} }
.quick-action-btn { .quick-action-btn {
height: 64rpx; height: 60rpx;
padding: 0 24rpx; padding: 0 24rpx;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
border-radius: 12rpx; border-radius: 100rpx;
font-size: 26rpx; font-size: 23rpx;
color: #333333; color: #333333;
display: flex; display: flex;
align-items: center; align-items: center;