From 0ca0fe3b0de58b82f731fe1d5c4bb613974f778c Mon Sep 17 00:00:00 2001 From: jinhhanhan <1683105490@qq.com> Date: Tue, 7 Apr 2026 15:21:29 +0800 Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E4=BF=AE=E6=94=B9=E4=BA=86?= =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages_tool/ai-chat/ai-chat-message.vue | 172 +++++++++---------------- pages_tool/ai-chat/index.vue | 4 +- 2 files changed, 64 insertions(+), 112 deletions(-) diff --git a/pages_tool/ai-chat/ai-chat-message.vue b/pages_tool/ai-chat/ai-chat-message.vue index dabe25a..6dd3a12 100644 --- a/pages_tool/ai-chat/ai-chat-message.vue +++ b/pages_tool/ai-chat/ai-chat-message.vue @@ -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; - } } } } diff --git a/pages_tool/ai-chat/index.vue b/pages_tool/ai-chat/index.vue index 9002f06..93a22b3 100644 --- a/pages_tool/ai-chat/index.vue +++ b/pages_tool/ai-chat/index.vue @@ -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;