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

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

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