From 1dde942ff1880364dd9bb41698ee9d4ef596f612 Mon Sep 17 00:00:00 2001
From: yvan <8574526@qq.com>
Date: Sat, 23 Aug 2025 17:09:34 +0800
Subject: [PATCH] 1

---
 pages/adoption/adoption.vue   |  8 ++++----
 pages/assistant/assistant.vue | 26 ++++++++++++++++++--------
 pages/pets/pets.vue           | 12 ++++++------
 pages/profile/profile.vue     | 18 +++++++++---------
 styles/common.scss            | 23 +++++++++++++++++++++++
 5 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/pages/adoption/adoption.vue b/pages/adoption/adoption.vue
index bcc11a8..11b1b93 100644
--- a/pages/adoption/adoption.vue
+++ b/pages/adoption/adoption.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="adoption-container page-container-with-bg">
+	<view class="adoption-container page-container-unified">
 		<!-- 头部搜索栏 -->
 		<view class="header-section">
 			<view class="search-wrapper">
@@ -1192,7 +1192,7 @@ export default {
 /* 头部搜索栏 */
 .header-section {
 	background: transparent;
-	padding: 24rpx 20rpx;
+	padding: 0 0 24rpx 0;
 
 	.search-wrapper {
 		display: flex;
@@ -1287,7 +1287,7 @@ export default {
 .filter-panel {
 	background: rgba(255, 255, 255, 0.95);
 	backdrop-filter: blur(20rpx);
-	padding: 24rpx 20rpx;
+	padding: 24rpx 0;
 	border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
 	position: relative;
 	z-index: 10;
@@ -1514,7 +1514,7 @@ export default {
 /* 宠物列表区域 */
 .pets-scroll {
 	height: calc(100vh - 100rpx);
-	padding: 0 20rpx;
+	padding: 0;
 	overflow-x: hidden;
 	width: 100%;
 	box-sizing: border-box;
diff --git a/pages/assistant/assistant.vue b/pages/assistant/assistant.vue
index ccb1776..9914178 100644
--- a/pages/assistant/assistant.vue
+++ b/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);
 }
 
diff --git a/pages/pets/pets.vue b/pages/pets/pets.vue
index 158da98..0454132 100644
--- a/pages/pets/pets.vue
+++ b/pages/pets/pets.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="pets-container gradient-bg page-container">
+	<view class="pets-container page-container-unified">
 		<!-- 标签切换容器 -->
 		<view class="tabs-container" v-if="petsList.length > 0">
 			<view class="tabs-header">
@@ -653,12 +653,12 @@ export default {
 
 <style lang="scss" scoped>
 .pets-container {
-	padding-bottom: 120rpx;
+	/* 边距由外层page-container-unified统一管理 */
 }
 
 .tabs-container {
 	background: rgba(255, 255, 255, 0.85);
-	margin: 20rpx 20rpx 30rpx;
+	margin: 0 0 30rpx 0;
 	border-radius: 40rpx;
 	backdrop-filter: blur(20rpx);
 	overflow: visible;
@@ -758,7 +758,7 @@ export default {
 }
 
 .tab-content {
-	padding: 30rpx;
+	padding: 0;
 }
 
 .tab-panel {
@@ -941,7 +941,7 @@ export default {
 }
 
 .functions-section {
-	margin: 16rpx 30rpx 20rpx;
+	margin: 16rpx 0 20rpx 0;
 	background: rgba(255, 255, 255, 0.1);
 	border-radius: 16rpx;
 	padding: 16rpx 0;
@@ -1037,7 +1037,7 @@ export default {
 }
 
 .cards-section {
-	padding: 0 30rpx;
+	padding: 0;
 	display: flex;
 	flex-direction: column;
 	gap: 16rpx;
diff --git a/pages/profile/profile.vue b/pages/profile/profile.vue
index 9f4a68f..c5b3b02 100644
--- a/pages/profile/profile.vue
+++ b/pages/profile/profile.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="profile-container page-container-with-bg">
+	<view class="profile-container page-container-unified">
 		<!-- 用户信息卡片 -->
 		<view class="user-info-card">
 			<view class="user-avatar-section" :class="{ 'logged-in': userInfo.nickName }" @click="handleUserAction">
@@ -690,14 +690,14 @@ export default {
 
 <style lang="scss" scoped>
 .profile-container {
-	padding-bottom: 40rpx;
+	/* 边距由外层page-container-unified统一管理 */
 }
 
 /* 用户信息卡片 */
 .user-info-card {
 	background: rgba(255, 255, 255, 0.95);
 	backdrop-filter: blur(20rpx);
-	margin: 0 30rpx 24rpx 30rpx;
+	margin: 0 0 24rpx 0;
 	border-radius: 24rpx;
 	padding: 32rpx;
 	display: flex;
@@ -837,7 +837,7 @@ export default {
 .stats-card {
 	background: rgba(255, 255, 255, 0.95);
 	backdrop-filter: blur(20rpx);
-	margin: 0 30rpx 24rpx 30rpx;
+	margin: 0 0 24rpx 0;
 	border-radius: 24rpx;
 	padding: 32rpx;
 	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
@@ -907,7 +907,7 @@ export default {
 .family-card {
 	background: rgba(255, 255, 255, 0.95);
 	backdrop-filter: blur(20rpx);
-	margin: 0 30rpx 24rpx 30rpx;
+	margin: 0 0 24rpx 0;
 	border-radius: 24rpx;
 	padding: 32rpx;
 	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
@@ -1025,7 +1025,7 @@ export default {
 .adoption-card {
 	background: rgba(255, 255, 255, 0.95);
 	backdrop-filter: blur(20rpx);
-	margin: 0 30rpx 24rpx 30rpx;
+	margin: 0 0 24rpx 0;
 	border-radius: 24rpx;
 	padding: 32rpx;
 	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
@@ -1122,7 +1122,7 @@ export default {
 @media (max-width: 375px) {
 	.profile-container {
 		.user-info-card {
-			margin: 0 20rpx 20rpx 20rpx;
+			margin: 0 0 20rpx 0;
 			padding: 24rpx;
 		}
 
@@ -1130,7 +1130,7 @@ export default {
 		.family-card,
 		.adoption-card,
 		.settings-card {
-			margin: 0 20rpx 20rpx 20rpx;
+			margin: 0 0 20rpx 0;
 			padding: 24rpx;
 		}
 
@@ -1245,7 +1245,7 @@ export default {
 .settings-card {
 	background: rgba(255, 255, 255, 0.95);
 	backdrop-filter: blur(20rpx);
-	margin: 0 30rpx 24rpx 30rpx;
+	margin: 0 0 24rpx 0;
 	border-radius: 24rpx;
 	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
 	border: 1rpx solid rgba(255, 255, 255, 0.3);
diff --git a/styles/common.scss b/styles/common.scss
index 0a783ff..a13a82c 100644
--- a/styles/common.scss
+++ b/styles/common.scss
@@ -135,6 +135,17 @@
   background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
 }
 
+/* 统一布局架构 - 页面容器 */
+.page-container-unified {
+  @extend .page-container-with-bg;
+  padding: 20rpx 30rpx 0 30rpx; /* 上边距20rpx，左右边距30rpx，下边距0 */
+
+  /* 响应式设计 - 小屏幕使用较小边距 */
+  @media (max-width: 375px) {
+    padding: 20rpx 20rpx 0 20rpx;
+  }
+}
+
 /* 通用背景渐变 */
 .gradient-bg {
   background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
@@ -175,6 +186,18 @@
   border-radius: 28rpx;
 }
 
+/* 统一布局架构 - 卡片样式 */
+.card-unified {
+  @extend .card;
+  margin: 0 0 24rpx 0; /* 仅保留下边距用于卡片间隔 */
+
+  /* 响应式设计 - 小屏幕调整间距 */
+  @media (max-width: 375px) {
+    margin: 0 0 20rpx 0;
+    padding: 20rpx;
+  }
+}
+
 /* 通用按钮样式 */
 .btn {
   padding: 16rpx 32rpx;