From 7d32f5d0f9667a8a4e0d29148b0bcb55610f5480 Mon Sep 17 00:00:00 2001
From: yvan <8574526@qq.com>
Date: Wed, 13 Aug 2025 14:04:52 +0800
Subject: [PATCH] 1

---
 pages/pets/pets.vue |  89 ++++++++++++++-------------------
 styles/common.scss  | 117 ++++++++++++++++++++++++++++++++++++++++++++
 uni.scss            |   3 ++
 3 files changed, 157 insertions(+), 52 deletions(-)
 create mode 100644 styles/common.scss

diff --git a/pages/pets/pets.vue b/pages/pets/pets.vue
index 77457ac..dc51cd8 100644
--- a/pages/pets/pets.vue
+++ b/pages/pets/pets.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="pets-container">
+	<view class="pets-container gradient-bg">
 		<!-- 标签切换容器 -->
 		<view class="tabs-container" v-if="petsList.length > 0">
 			<view class="tabs-header">
@@ -10,7 +10,7 @@
 					:key="pet.id"
 					@click="switchTab(index)"
 				>
-					<view class="tab-avatar">{{ getPetEmoji(pet.breed) }}</view>
+					<view class="tab-avatar gradient-bg-primary">{{ getPetEmoji(pet.breed) }}</view>
 					<view class="tab-name">{{ pet.name }}</view>
 				</view>
 				<view class="add-tab" @click="addPet">
@@ -33,8 +33,15 @@
 						<view class="pet-header" @click="viewPetDetail(pet)">
 							<!-- 左侧头像区域 -->
 							<view class="pet-avatar-section">
-								<view class="pet-avatar">
-									<text class="pet-emoji">{{ getPetEmoji(pet.breed) }}</text>
+								<view class="pet-avatar-wrapper">
+									<u-avatar
+										:text="getPetEmoji(pet.breed)"
+										size="90"
+										shape="circle"
+										bg-color="linear-gradient(135deg, #FF8A80, #FFB6C1)"
+										color="white"
+										font-size="45"
+									></u-avatar>
 									<view class="pet-status-ring" :class="`pet-status-ring--${pet.healthStatus || 'healthy'}`"></view>
 								</view>
 							</view>
@@ -95,7 +102,7 @@
 		<view class="functions-section" v-if="petsList.length > 0">
 			<scroll-view scroll-x class="functions-scroll" :show-scrollbar="false">
 				<view class="functions-container">
-					<view class="function-item" v-for="item in mainActionItems" :key="item.id" @click="handleAction(item.action, petsList[currentTabIndex])">
+					<view class="function-item btn-gradient radius-medium shadow-medium" v-for="item in mainActionItems" :key="item.id" @click="handleAction(item.action, petsList[currentTabIndex])">
 						<text class="function-icon">{{ item.icon }}</text>
 						<text class="function-text">{{ item.text }}</text>
 					</view>
@@ -116,32 +123,32 @@
 		<!-- 模块化卡片区域 -->
 		<view class="cards-section" v-if="petsList.length > 0">
 			<!-- 家庭概览卡片 -->
-			<view class="overview-card">
+			<view class="overview-card card-style padding-large">
 				<view class="card-header">
-					<text class="card-title">📊 家庭概览</text>
-					<text class="card-subtitle">{{ petsList.length }}位家庭成员</text>
+					<text class="card-title text-primary">📊 家庭概览</text>
+					<text class="card-subtitle text-muted">{{ petsList.length }}位家庭成员</text>
 				</view>
 				<view class="overview-stats">
 					<view class="overview-stat">
-						<view class="overview-stat-number">{{ totalRecords }}</view>
-						<view class="overview-stat-label">总记录</view>
+						<view class="overview-stat-number text-primary">{{ totalRecords }}</view>
+						<view class="overview-stat-label text-secondary">总记录</view>
 					</view>
 					<view class="overview-stat">
-						<view class="overview-stat-number">¥{{ totalMonthlyExpense }}</view>
-						<view class="overview-stat-label">本月消费</view>
+						<view class="overview-stat-number text-primary">¥{{ totalMonthlyExpense }}</view>
+						<view class="overview-stat-label text-secondary">本月消费</view>
 					</view>
 					<view class="overview-stat">
-						<view class="overview-stat-number">{{ totalCompanionDays }}</view>
-						<view class="overview-stat-label">陪伴天数</view>
+						<view class="overview-stat-number text-primary">{{ totalCompanionDays }}</view>
+						<view class="overview-stat-label text-secondary">陪伴天数</view>
 					</view>
 				</view>
 			</view>
 
 			<!-- 最近互动卡片 -->
-			<view class="interactions-card">
+			<view class="interactions-card card-style padding-large">
 				<view class="card-header">
-					<text class="card-title">💬 最近互动</text>
-					<text class="card-subtitle">今日活动</text>
+					<text class="card-title text-primary">💬 最近互动</text>
+					<text class="card-subtitle text-muted">今日活动</text>
 				</view>
 				<view class="interactions-list">
 					<view class="interaction-item" v-for="interaction in recentInteractions" :key="interaction.id">
@@ -159,10 +166,10 @@
 			</view>
 
 			<!-- 健康状态卡片 -->
-			<view class="health-card">
+			<view class="health-card card-style padding-large">
 				<view class="card-header">
-					<text class="card-title">💚 健康状态</text>
-					<text class="card-subtitle">实时监控</text>
+					<text class="card-title text-primary">💚 健康状态</text>
+					<text class="card-subtitle text-muted">实时监控</text>
 				</view>
 				<view class="health-list">
 					<view class="health-item" v-for="pet in petsList" :key="pet.id">
@@ -170,9 +177,12 @@
 							<text class="health-pet-emoji">{{ getPetEmoji(pet.breed) }}</text>
 							<text class="health-pet-name">{{ pet.name }}</text>
 						</view>
-						<view class="health-status" :class="`health-status--${pet.healthStatus || 'healthy'}`">
-							<text class="health-status-text">{{ getHealthStatusText(pet.healthStatus) }}</text>
-						</view>
+						<u-tag
+							:text="getHealthStatusText(pet.healthStatus)"
+							:type="getHealthTagType(pet.healthStatus)"
+							shape="circle"
+							size="mini"
+						></u-tag>
 					</view>
 				</view>
 				<view class="health-actions">
@@ -184,7 +194,7 @@
 		</view>
 
 		<!-- 浮动添加按钮 -->
-		<view class="floating-add" @click="addRecord(petsList[currentTabIndex])">
+		<view class="floating-add btn-gradient text-white shadow-medium" @click="addRecord(petsList[currentTabIndex])">
 			<text class="floating-add-icon">📝</text>
 		</view>
 	</view>
@@ -505,7 +515,6 @@ export default {
 
 <style lang="scss" scoped>
 .pets-container {
-	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
 	min-height: 100vh;
 	padding-bottom: 120rpx;
 	padding-top: 20rpx;
@@ -550,7 +559,6 @@ export default {
 	width: 48rpx;
 	height: 48rpx;
 	border-radius: 24rpx;
-	background: linear-gradient(135deg, #FF8A80, #FFB6C1);
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -704,23 +712,14 @@ export default {
 	text-align: left;
 }
 
-.pet-avatar {
-	width: 90rpx;
-	height: 90rpx;
-	border-radius: 45rpx;
-	background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+.pet-avatar-wrapper {
+	position: relative;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	position: relative;
-	box-shadow: 0 6rpx 20rpx rgba(255, 138, 128, 0.25);
 	flex-shrink: 0;
 }
 
-.pet-emoji {
-	font-size: 45rpx;
-}
-
 .pet-status-ring {
 	position: absolute;
 	top: -8rpx;
@@ -814,11 +813,8 @@ export default {
 	flex-direction: column;
 	align-items: center;
 	padding: 18rpx 8rpx;
-	border-radius: 16rpx;
-	background: linear-gradient(135deg, #FF8A80, #FFB6C1);
 	width: 145rpx;
 	flex-shrink: 0;
-	box-shadow: 0 6rpx 20rpx rgba(255, 138, 128, 0.3);
 	transition: all 0.3s ease;
 }
 
@@ -893,11 +889,7 @@ export default {
 .overview-card,
 .interactions-card,
 .health-card {
-	background: rgba(255, 255, 255, 0.95);
-	border-radius: 24rpx;
-	padding: 30rpx;
-	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
-	backdrop-filter: blur(10rpx);
+	margin-bottom: 16rpx;
 }
 
 .card-header {
@@ -910,12 +902,10 @@ export default {
 .card-title {
 	font-size: 32rpx;
 	font-weight: 600;
-	color: #333;
 }
 
 .card-subtitle {
 	font-size: 24rpx;
-	color: #999;
 }
 
 .overview-stats {
@@ -932,13 +922,11 @@ export default {
 .overview-stat-number {
 	font-size: 36rpx;
 	font-weight: 700;
-	color: #FF8A80;
 	margin-bottom: 8rpx;
 }
 
 .overview-stat-label {
 	font-size: 22rpx;
-	color: #666;
 }
 
 .floating-add {
@@ -948,10 +936,7 @@ export default {
 	width: 112rpx;
 	height: 112rpx;
 	border-radius: 56rpx;
-	background: linear-gradient(135deg, #FF8A80, #FFB6C1);
-	color: white;
 	border: none;
-	box-shadow: 0 8rpx 40rpx rgba(255, 138, 128, 0.4);
 	transition: transform 0.3s;
 	z-index: 999;
 	display: flex;
diff --git a/styles/common.scss b/styles/common.scss
new file mode 100644
index 0000000..8dacb6c
--- /dev/null
+++ b/styles/common.scss
@@ -0,0 +1,117 @@
+/**
+ * 公共样式文件
+ * 定义项目中常用的样式类，提高代码复用性
+ */
+
+/* 渐变背景 */
+.gradient-bg {
+  background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
+}
+
+.gradient-bg-primary {
+  background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+}
+
+/* 卡片样式 */
+.card-style {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10rpx);
+}
+
+/* 按钮渐变 */
+.btn-gradient {
+  background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+  color: white;
+  border: none;
+}
+
+/* 阴影效果 */
+.shadow-light {
+  box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.2);
+}
+
+.shadow-medium {
+  box-shadow: 0 6rpx 20rpx rgba(255, 138, 128, 0.3);
+}
+
+.shadow-heavy {
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
+}
+
+/* 圆角 */
+.radius-small {
+  border-radius: 12rpx;
+}
+
+.radius-medium {
+  border-radius: 16rpx;
+}
+
+.radius-large {
+  border-radius: 24rpx;
+}
+
+.radius-round {
+  border-radius: 50%;
+}
+
+/* 间距 */
+.margin-small {
+  margin: 16rpx;
+}
+
+.margin-medium {
+  margin: 24rpx;
+}
+
+.margin-large {
+  margin: 32rpx;
+}
+
+.padding-small {
+  padding: 16rpx;
+}
+
+.padding-medium {
+  padding: 24rpx;
+}
+
+.padding-large {
+  padding: 32rpx;
+}
+
+/* 文字颜色 */
+.text-primary {
+  color: #FF8A80;
+}
+
+.text-secondary {
+  color: #666;
+}
+
+.text-muted {
+  color: #999;
+}
+
+.text-white {
+  color: white;
+}
+
+/* 背景透明度 */
+.bg-transparent {
+  background: transparent;
+}
+
+.bg-white-light {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.bg-white-medium {
+  background: rgba(255, 255, 255, 0.85);
+}
+
+.bg-white-heavy {
+  background: rgba(255, 255, 255, 0.95);
+}
\ No newline at end of file
diff --git a/uni.scss b/uni.scss
index 0c5e263..98457d1 100644
--- a/uni.scss
+++ b/uni.scss
@@ -78,3 +78,6 @@ $uni-font-size-paragraph:15px;
 /* uView UI主题变量 */
 @import "uview-ui-next/theme.scss";
 @import '@/uni_modules/uview-next/theme.scss';
+
+/* 项目公共样式 */
+@import '@/styles/common.scss';