diff --git a/src/addon/aikefu/shop/view/kefu/message.html b/src/addon/aikefu/shop/view/kefu/message.html index a1d190a85..95f8f9cc9 100644 --- a/src/addon/aikefu/shop/view/kefu/message.html +++ b/src/addon/aikefu/shop/view/kefu/message.html @@ -65,11 +65,11 @@ max-height: 650px; overflow-y: auto; padding: 25px; - background-color: #f7f9fc; - border-radius: 12px; + background-color: #fafbfc; + border-radius: 8px; margin-bottom: 20px; border: 1px solid #e8e8e8; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08); } /* 消息项样式 */ @@ -77,20 +77,6 @@ margin-bottom: 25px; display: flex; align-items: flex-start; - width: 100%; - } - - /* 消息主体容器 */ - .message-main { - max-width: 70%; - display: flex; - flex-direction: column; - align-items: flex-start; - } - - /* 用户消息的主体容器 */ - .message-item.user .message-main { - align-items: flex-end; } .message-item.user { @@ -103,28 +89,16 @@ /* 头像样式 */ .message-avatar { - width: 50px; - height: 50px; + width: 48px; + height: 48px; border-radius: 50%; - margin-top: 2px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + margin: 0 12px; + border: 2px solid #fff; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; - font-size: 26px; - flex-shrink: 0; - } - - /* 机器人头像位置调整 */ - .message-item.assistant .message-avatar { - margin-right: 15px; - margin-left: 5px; - } - - /* 用户头像位置调整 */ - .message-item.user .message-avatar { - margin-left: 15px; - margin-right: 5px; + font-size: 24px; } /* 用户头像样式 */ @@ -141,14 +115,12 @@ /* 消息内容样式 */ .message-content { - width: auto; + max-width: 70%; padding: 16px 20px; border-radius: 18px; word-wrap: break-word; line-height: 1.6; position: relative; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - margin: 4px 0; } .message-item.user .message-content { @@ -175,20 +147,19 @@ /* 消息角色样式 */ .message-role { - font-size: 12px; - font-weight: 600; - margin-bottom: 4px; - opacity: 0.8; + font-size: 13px; + font-weight: 500; + margin-bottom: 6px; } .message-item.user .message-role { - color: rgba(255, 255, 255, 0.9); + color: rgba(255, 255, 255, 1); text-align: right; font-weight: bold; } .message-item.assistant .message-role { - color: #555; + color: #333; text-align: left; font-weight: bold; } @@ -370,26 +341,19 @@ // 使用用户ID作为角色显示 var role = item.user_id || (item.role === 'user' ? '用户' : '机器人'); var roleClass = item.user_id ? 'user' : 'assistant'; - // 用户使用用户图标,机器人使用AI机器人图标 - var avatar = item.user_id ? '' : ''; + // 用户使用用户图标,机器人使用AI图标 + var avatar = item.user_id ? '' : ''; html += '
';