1

pages/assistant/assistant.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="assistant-container page-container-with-bg">
+	<view class="assistant-container page-container-unified">
 		<!-- 宠物助手信息卡片 -->
 		<view class="assistant-info-card">
 			<view class="assistant-avatar-wrapper">
@@ -307,7 +307,7 @@ export default {
 .assistant-info-card {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(20rpx);
-  margin: 20rpx 30rpx 0 30rpx;
+  margin: 0 0 0 0;
   border-radius: 24rpx;
   padding: 24rpx;
   display: flex;
@@ -393,7 +393,7 @@ export default {
 .quick-questions {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(20rpx);
-  margin: 20rpx 30rpx;
+  margin: 20rpx 0;
   border-radius: 24rpx;
   padding: 24rpx;
   box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
@@ -434,7 +434,7 @@ export default {
 }
 
 .chat-messages {
-  margin-top: 20rpx;
+  margin-top: 24rpx;
   flex: 1;
   overflow: hidden;
 }
@@ -459,21 +459,31 @@ export default {
 
 .message-item.user {
   justify-content: flex-end;
-  padding: 0 10rpx 0 80rpx;
+  padding: 0 0 0 60rpx;
 }
 
 .message-item.ai {
   justify-content: flex-start;
-  padding: 0 80rpx 0 10rpx;
+  padding: 0 60rpx 0 0;
 }
 
 .message-avatar {
   width: 64rpx;
   height: 64rpx;
-  margin: 0 16rpx;
+  margin: 0;
   flex-shrink: 0;
 }
 
+/* AI消息头像 - 右边距 */
+.message-item.ai .message-avatar {
+  margin-right: 16rpx;
+}
+
+/* 用户消息头像 - 左边距 */
+.message-item.user .message-avatar {
+  margin-left: 16rpx;
+}
+
 .assistant-avatar, .user-avatar {
   width: 100%;
   height: 100%;
@@ -590,7 +600,7 @@ export default {
 
 .chat-input-area {
   backdrop-filter: blur(20rpx);
-  padding: 16rpx 20rpx;
+  padding: 16rpx 0;
   border-top: 1rpx solid rgba(255, 255, 255, 0.2);
 }