diff --git a/pages/adoption/adoption-detail.vue b/pages/adoption/adoption-detail.vue
index 32713cb..eba8945 100644
--- a/pages/adoption/adoption-detail.vue
+++ b/pages/adoption/adoption-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="adoption-detail-container">
+	<view class="adoption-detail-container page-container-with-bg">
 		<!-- 宠物图片轮播 -->
 		<view class="pet-gallery">
 			<swiper 
diff --git a/pages/adoption/adoption.vue b/pages/adoption/adoption.vue
index 3a38136..5767600 100644
--- a/pages/adoption/adoption.vue
+++ b/pages/adoption/adoption.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="adoption-container">
+	<view class="adoption-container page-container-with-bg">
 		<!-- 头部搜索栏 -->
 		<view class="header-section">
 			<view class="search-wrapper">
@@ -611,8 +611,6 @@ export default {
 
 <style lang="scss" scoped>
 .adoption-container {
-	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
-	min-height: 100vh;
 	overflow-x: hidden;
 	width: 100vw;
 }
diff --git a/pages/adoption/my-applications.vue b/pages/adoption/my-applications.vue
index d9b0860..e77491b 100644
--- a/pages/adoption/my-applications.vue
+++ b/pages/adoption/my-applications.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="my-applications-container">
+	<view class="my-applications-container page-container-with-bg">
 		<!-- 统计卡片 -->
 		<view class="stats-card">
 			<view class="stats-grid">
diff --git a/pages/adoption/my-published.vue b/pages/adoption/my-published.vue
index a8a8502..27ac72e 100644
--- a/pages/adoption/my-published.vue
+++ b/pages/adoption/my-published.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="my-published-container">
+	<view class="my-published-container page-container-with-bg">
 		<!-- 统计卡片 -->
 		<view class="stats-card">
 			<view class="stats-grid">
diff --git a/pages/adoption/publish.vue b/pages/adoption/publish.vue
index b18e3f4..3fff073 100644
--- a/pages/adoption/publish.vue
+++ b/pages/adoption/publish.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="publish-container">
+	<view class="publish-container page-container-with-bg">
 		<!-- 表单内容 -->
 		<view class="form-container">
 			<!-- 宠物照片上传 -->
diff --git a/pages/assistant/assistant.vue b/pages/assistant/assistant.vue
index 63b5cb5..5f6cdd8 100644
--- a/pages/assistant/assistant.vue
+++ b/pages/assistant/assistant.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="assistant-container">
+	<view class="assistant-container page-container-with-bg">
 		<!-- 宠物助手信息卡片 -->
 		<view class="assistant-info-card">
 			<view class="assistant-avatar-wrapper">
@@ -267,7 +267,6 @@ export default {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
   position: relative;
 }
 
@@ -275,7 +274,6 @@ export default {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(20rpx);
   margin: 20rpx 30rpx 0 30rpx;
-  margin-top: calc(20rpx + env(safe-area-inset-top));
   border-radius: 24rpx;
   padding: 24rpx;
   display: flex;
diff --git a/pages/assistant/knowledge.vue b/pages/assistant/knowledge.vue
index 83b1747..0c38e33 100644
--- a/pages/assistant/knowledge.vue
+++ b/pages/assistant/knowledge.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="knowledge-container">
+	<view class="knowledge-container page-container-with-bg">
 		<view class="search-container">
 			<u-search placeholder="搜索知识" v-model="searchKeyword" @search="searchKnowledge" @custom="searchKnowledge"></u-search>
 		</view>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index ec0ec26..33afecb 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="content">
+	<view class="content page-container">
 		<image class="logo" src="/static/logo.png"></image>
 		<view class="text-area">
 			<text class="title">{{title}}</text>
diff --git a/pages/pets/add-pet.vue b/pages/pets/add-pet.vue
index 5bd604a..311b7e8 100644
--- a/pages/pets/add-pet.vue
+++ b/pages/pets/add-pet.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="add-pet-container">
+	<view class="add-pet-container page-container-with-bg">
 		<u-form :model="petForm" ref="petFormRef" :rules="rules" label-width="120">
 			<u-card :padding="20" margin="20">
 				<view class="avatar-section">
@@ -182,8 +182,6 @@ export default {
 
 <style lang="scss" scoped>
 .add-pet-container {
-	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
-	min-height: 100vh;
 }
 
 .avatar-section {
diff --git a/pages/pets/add-record-enhanced.vue b/pages/pets/add-record-enhanced.vue
index 6a62027..8c856e1 100644
--- a/pages/pets/add-record-enhanced.vue
+++ b/pages/pets/add-record-enhanced.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="add-record-container">
+  <view class="add-record-container page-container-with-bg">
     <u-navbar title="添加记录" left-icon="arrow-left" @left-click="goBack">
       <template #right>
         <u-text text="保存" color="#ff6b6b" @click="saveRecord"></u-text>
diff --git a/pages/pets/add-record-form.vue b/pages/pets/add-record-form.vue
index be51d64..dcd7d6c 100644
--- a/pages/pets/add-record-form.vue
+++ b/pages/pets/add-record-form.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="add-record-container">
+	<view class="add-record-container page-container-with-bg">
 		<!-- 表单内容 -->
 		<view class="form-content">
 			<!-- 第一组：基础信息 -->
diff --git a/pages/pets/add-record-simple.vue b/pages/pets/add-record-simple.vue
index c841386..88f6f06 100644
--- a/pages/pets/add-record-simple.vue
+++ b/pages/pets/add-record-simple.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="add-record-container">
+  <view class="add-record-container page-container-with-bg">
     <u-navbar title="添加记录" left-icon="arrow-left" @left-click="goBack" bg-color="#FF8A80">
       <template #right>
         <u-text text="保存" color="#ffffff" @click="saveRecord"></u-text>
diff --git a/pages/pets/add-record.vue b/pages/pets/add-record.vue
index 2f24b5e..4bb7e41 100644
--- a/pages/pets/add-record.vue
+++ b/pages/pets/add-record.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="add-record-container">
+	<view class="add-record-container page-container-with-bg">
 		<u-navbar title="添加记录" left-icon="arrow-left" @left-click="goBack"></u-navbar>
 		
 		<u-form :model="recordForm" ref="recordFormRef" :rules="rules" label-width="120">
diff --git a/pages/pets/health-charts.vue b/pages/pets/health-charts.vue
index 382dddc..a4bbee2 100644
--- a/pages/pets/health-charts.vue
+++ b/pages/pets/health-charts.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="health-charts-container">
+	<view class="health-charts-container page-container-with-bg">
 		<!-- 健康状态总览卡片 -->
 		<view class="health-overview-card">
 			<view class="overview-header">
@@ -414,8 +414,6 @@ export default {
 
 <style lang="scss" scoped>
 .health-charts-container {
-	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
-	min-height: 100vh;
 	padding: 20rpx;
 }
 
diff --git a/pages/pets/pet-chat-simple.vue b/pages/pets/pet-chat-simple.vue
index 824c533..c404617 100644
--- a/pages/pets/pet-chat-simple.vue
+++ b/pages/pets/pet-chat-simple.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="pet-chat-container">
+  <view class="pet-chat-container page-container-with-bg">
     <!-- 宠物信息卡片 -->
     <view class="pet-info-card">
       <view class="pet-avatar-wrapper">
@@ -308,7 +308,6 @@ export default {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
   position: relative;
 }
 
diff --git a/pages/pets/pet-detail.vue b/pages/pets/pet-detail.vue
index 4b6b666..2b214d8 100644
--- a/pages/pets/pet-detail.vue
+++ b/pages/pets/pet-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="container">
+	<view class="container page-container-with-bg">
 		<!-- 宠物主卡片 -->
 		<view class="pet-main-card">
 			<!-- 编辑按钮 -->
@@ -463,8 +463,6 @@ export default {
 <style lang="scss" scoped>
 /* 优化后的样式 */
 .container {
-	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
-	min-height: 100vh;
 	padding: 20rpx;
 }
 
diff --git a/pages/pets/pet-personality.vue b/pages/pets/pet-personality.vue
index 811928c..b904b5c 100644
--- a/pages/pets/pet-personality.vue
+++ b/pages/pets/pet-personality.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="personality-container">
+	<view class="personality-container page-container-with-bg">
 		<!-- 顶部操作栏 -->
 		<view class="top-action-bar">
 			<view class="action-item" @click="showHelp = true">
diff --git a/pages/pets/pet-records.vue b/pages/pets/pet-records.vue
index db85fdb..7616f04 100644
--- a/pages/pets/pet-records.vue
+++ b/pages/pets/pet-records.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="pet-records-container">
+	<view class="pet-records-container page-container-with-bg">
 		<!-- 头部操作栏 -->
 		<view class="header-section">
 			<view class="header-info">
diff --git a/pages/pets/pet-timeline.vue b/pages/pets/pet-timeline.vue
index c6bdc4f..f98cd6b 100644
--- a/pages/pets/pet-timeline.vue
+++ b/pages/pets/pet-timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="pet-timeline-container">
+  <view class="pet-timeline-container page-container-with-bg">
     <!-- 头部操作栏 -->
     <view class="header-actions">
       <text class="page-title">{{ petInfo.name }}的成长时光</text>
@@ -431,7 +431,6 @@ export default {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
 }
 
 .header-actions {
diff --git a/pages/pets/pet-vaccine.vue b/pages/pets/pet-vaccine.vue
index a9e776a..46b1913 100644
--- a/pages/pets/pet-vaccine.vue
+++ b/pages/pets/pet-vaccine.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="vaccine-container">
+	<view class="vaccine-container page-container-with-bg">
 		<!-- 疫苗状态概览卡片 -->
 		<view class="status-overview-card">
 			<view class="overview-header">
diff --git a/pages/pets/pet-weight.vue b/pages/pets/pet-weight.vue
index 4828aea..7cdbea4 100644
--- a/pages/pets/pet-weight.vue
+++ b/pages/pets/pet-weight.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="weight-container">
+	<view class="weight-container page-container-with-bg">
 		<!-- 当前体重状态卡片 -->
 		<view class="current-weight-card">
 			<view class="weight-header">
diff --git a/pages/pets/pets.vue b/pages/pets/pets.vue
index 85c9e75..b701aaa 100644
--- a/pages/pets/pets.vue
+++ b/pages/pets/pets.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="pets-container gradient-bg">
+	<view class="pets-container gradient-bg page-container">
 		<!-- 标签切换容器 -->
 		<view class="tabs-container" v-if="petsList.length > 0">
 			<view class="tabs-header">
@@ -653,9 +653,7 @@ export default {
 
 <style lang="scss" scoped>
 .pets-container {
-	min-height: 100vh;
 	padding-bottom: 120rpx;
-	padding-top: 20rpx;
 }
 
 .tabs-container {
diff --git a/pages/pets/record-detail.vue b/pages/pets/record-detail.vue
index 46809f8..4458ec0 100644
--- a/pages/pets/record-detail.vue
+++ b/pages/pets/record-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="record-detail-container">
+	<view class="record-detail-container page-container-with-bg">
 		<!-- 记录头部信息 -->
 		<view class="record-header">
 			<view class="header-info">
diff --git a/pages/pets/select-record-type.vue b/pages/pets/select-record-type.vue
index 209b7e8..5a91317 100644
--- a/pages/pets/select-record-type.vue
+++ b/pages/pets/select-record-type.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="select-type-container">
+	<view class="select-type-container page-container-with-bg">
 		<view class="content-area">
 			<!-- 快捷记录 -->
 			<view class="section">
diff --git a/pages/profile/family.vue b/pages/profile/family.vue
index faa322a..4d36149 100644
--- a/pages/profile/family.vue
+++ b/pages/profile/family.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="family-container">
+	<view class="family-container page-container-with-bg">
 		<!-- 家庭概览卡片 -->
 		<view class="family-overview-card">
 			<view class="overview-header">
diff --git a/pages/profile/feedback.vue b/pages/profile/feedback.vue
index f2158b9..a74fac6 100644
--- a/pages/profile/feedback.vue
+++ b/pages/profile/feedback.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="feedback-container">
+	<view class="feedback-container page-container-with-bg">
 		<!-- 反馈表单卡片 -->
 		<view class="feedback-form-card">
 			<view class="card-header">
diff --git a/pages/profile/notifications.vue b/pages/profile/notifications.vue
index a33ccee..fd4ebeb 100644
--- a/pages/profile/notifications.vue
+++ b/pages/profile/notifications.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="notifications-container">
+	<view class="notifications-container page-container-with-bg">
 		<!-- 通知设置卡片 -->
 		<view class="settings-card">
 			<view class="card-header">
diff --git a/pages/profile/privacy.vue b/pages/profile/privacy.vue
index 1d12b1e..036072e 100644
--- a/pages/profile/privacy.vue
+++ b/pages/profile/privacy.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="privacy-container">
+	<view class="privacy-container page-container-with-bg">
 		<!-- 隐私权限设置卡片 -->
 		<view class="privacy-settings-card">
 			<view class="card-header">
diff --git a/pages/profile/profile.vue b/pages/profile/profile.vue
index df46eea..ce129c8 100644
--- a/pages/profile/profile.vue
+++ b/pages/profile/profile.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="profile-container">
+	<view class="profile-container page-container-with-bg">
 		<!-- 用户信息卡片 -->
 		<view class="user-info-card">
 			<view class="user-avatar-section">
@@ -430,10 +430,7 @@ export default {
 
 <style lang="scss" scoped>
 .profile-container {
-	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
-	min-height: 100vh;
 	padding-bottom: 40rpx;
-	padding-top: 40rpx;
 }
 
 /* 用户信息卡片 */
diff --git a/pages/profile/reminders.vue b/pages/profile/reminders.vue
index 8eb6071..28639f6 100644
--- a/pages/profile/reminders.vue
+++ b/pages/profile/reminders.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="reminders-container">
+	<view class="reminders-container page-container-with-bg">
 		<!-- 统计概览卡片 -->
 		<view class="stats-card">
 			<view class="stats-grid">
diff --git a/pages/profile/user-info.vue b/pages/profile/user-info.vue
index 2bacdf6..974b863 100644
--- a/pages/profile/user-info.vue
+++ b/pages/profile/user-info.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="user-info-container">
+	<view class="user-info-container page-container-with-bg">
 		<!-- 头像设置卡片 -->
 		<view class="avatar-card">
 			<view class="card-header">
diff --git a/pages/review/detail.vue b/pages/review/detail.vue
index 5b16c22..8efb07b 100644
--- a/pages/review/detail.vue
+++ b/pages/review/detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="detail-container">
+	<view class="detail-container page-container-with-bg">
 		<!-- 产品信息卡片 -->
 		<view class="product-info-card">
 			<view class="product-images">
diff --git a/pages/review/review.vue b/pages/review/review.vue
index 3f511c4..4bfae5f 100644
--- a/pages/review/review.vue
+++ b/pages/review/review.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="review-container">
+	<view class="review-container page-container-with-bg">
 		<!-- 搜索栏 -->
 		<view class="search-section">
 			<view class="search-bar">
@@ -558,8 +558,6 @@ export default {
 
 <style lang="scss" scoped>
 .review-container {
-	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
-	min-height: 100vh;
 	padding-bottom: 120rpx;
 }
 
diff --git a/styles/common.scss b/styles/common.scss
index 8dacb6c..52dd71e 100644
--- a/styles/common.scss
+++ b/styles/common.scss
@@ -114,4 +114,23 @@
 
 .bg-white-heavy {
   background: rgba(255, 255, 255, 0.95);
+}
+
+/* 页面容器样式 */
+.page-container {
+  padding-top: calc(20rpx + env(safe-area-inset-top));
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+.page-container-no-safe {
+  padding-top: 20rpx;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+/* 页面容器变体 */
+.page-container-with-bg {
+  @extend .page-container;
+  background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
 }
\ No newline at end of file