diff --git a/html/layout01-horizontal-carousel.html b/html/layout01-horizontal-carousel.html
new file mode 100644
index 0000000..e3531f0
--- /dev/null
+++ b/html/layout01-horizontal-carousel.html
@@ -0,0 +1,630 @@
+
+
+
+
+
+ 方案1:横向轮播卡片式
+
+
+
+
+
+
+
+
+
+
+
+ 4.5kg
+ 体重
+
+
+ 89
+ 记录
+
+
+ 健康
+ 状态
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 25kg
+ 体重
+
+
+ 67
+ 记录
+
+
+ 健康
+ 状态
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1.2kg
+ 体重
+
+
+ 34
+ 记录
+
+
+ 健康
+ 状态
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📊 家庭概览
+
+
+
+
+
+
+
+
+
+
+
+
⏰ 最近活动
+
+
🐱
+
+
小橘完成了今天的早餐
+
2小时前 · 日常记录
+
+
饮食
+
+
+
🐶
+
+
小白外出散步30分钟
+
3小时前 · 日常记录
+
+
运动
+
+
+
🐰
+
+
小灰吃了新鲜胡萝卜
+
5小时前 · 随手记
+
+
饮食
+
+
+
+
+
🤖 AI助手
+
+ 根据记录分析,小橘今天的活动量比平时少,建议增加一些互动游戏时间。
+
+
+
+
+
+
+
+
+
+
diff --git a/html/layout04-large-carousel.html b/html/layout04-large-carousel.html
new file mode 100644
index 0000000..3154015
--- /dev/null
+++ b/html/layout04-large-carousel.html
@@ -0,0 +1,756 @@
+
+
+
+
+
+ 方案4:轮播大卡片式
+
+
+
+
+
+
+
+
+
+
+
小橘
+
橘猫 · 2岁 · 陪伴365天
+
+ 活泼
+ 粘人
+ 健康
+
+
+
+ 4.5kg
+ 体重
+
+
+ 89
+ 记录数
+
+
+ ¥580
+ 本月消费
+
+
+
+
+
+
+
+
+
+
+
+
+
+
小白
+
金毛 · 3岁 · 陪伴1095天
+
+ 温顺
+ 忠诚
+ 健康
+
+
+
+ 25kg
+ 体重
+
+
+ 67
+ 记录数
+
+
+ ¥890
+ 本月消费
+
+
+
+
+
+
+
+
+
+
+
+
+
+
小灰
+
垂耳兔 · 1岁 · 陪伴180天
+
+ 安静
+ 可爱
+ 健康
+
+
+
+ 1.2kg
+ 体重
+
+
+ 34
+ 记录数
+
+
+ ¥120
+ 本月消费
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📊 家庭概览
+
+
+
+
+
+
+
+
+
+
+
+
+
+
🐱
+
+
小橘完成了今天的早餐
+
2小时前 · 日常记录
+
+
饮食
+
+
+
🐶
+
+
小白外出散步30分钟
+
3小时前 · 日常记录
+
+
运动
+
+
+
🐰
+
+
小灰吃了新鲜胡萝卜
+
5小时前 · 随手记
+
+
饮食
+
+
+
+
+
+
+
+ 根据分析,小橘今天的活动量比平时少15%,建议增加互动游戏时间。小白的散步规律很好,继续保持!
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/html/layout05-tab-switch.html b/html/layout05-tab-switch.html
new file mode 100644
index 0000000..cf51b06
--- /dev/null
+++ b/html/layout05-tab-switch.html
@@ -0,0 +1,852 @@
+
+
+
+
+
+ 方案5:标签切换式
+
+
+
+
+
+
+
+
+
+
+
+
+
+
小橘
+
橘猫 · 2岁 · 陪伴365天
+
+ 活泼
+ 粘人
+ 健康
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
小白
+
金毛 · 3岁 · 陪伴1095天
+
+ 温顺
+ 忠诚
+ 健康
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
小灰
+
垂耳兔 · 1岁 · 陪伴180天
+
+ 安静
+ 可爱
+ 健康
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📊 家庭概览
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/html/layout11-horizontal-scroll.html b/html/layout11-horizontal-scroll.html
new file mode 100644
index 0000000..66a281f
--- /dev/null
+++ b/html/layout11-horizontal-scroll.html
@@ -0,0 +1,616 @@
+
+
+
+
+
+ 方案11:横向滑动卡片式
+
+
+
+
+
+
+
+
+
📊 家庭概览
+
+
+
+
+
+
+
+
+
+
+
+
⏰ 最近活动
+
+
🐱
+
+
小橘完成了今天的早餐
+
2小时前 · 日常记录
+
+
饮食
+
+
+
🐶
+
+
小白外出散步30分钟
+
3小时前 · 日常记录
+
+
运动
+
+
+
🐰
+
+
小灰吃了新鲜胡萝卜
+
5小时前 · 随手记
+
+
饮食
+
+
+
+
+
🤖 AI助手
+
+ 根据记录分析,小橘今天的活动量比平时少,建议增加一些互动游戏时间。
+
+
+
+
+
+
+
+
+
+
diff --git a/html/layout2-dashboard-tabs.html b/html/layout2-dashboard-tabs.html
new file mode 100644
index 0000000..839cabe
--- /dev/null
+++ b/html/layout2-dashboard-tabs.html
@@ -0,0 +1,798 @@
+
+
+
+
+
+ 宠物标签切换式仪表盘
+
+
+
+
+
+
+
+
+
+
+
+
+
+
小橘
+
橘猫 · 2岁 · 陪伴365天
+
+ 活泼
+ 粘人
+ 健康
+
+
+
+
+
+
⚖️
+
4.5kg
+
当前体重
+
↗ +0.2kg
+
+
+
📝
+
89
+
记录数量
+
↗ +12
+
+
+
💰
+
¥580
+
本月消费
+
↘ -¥50
+
+
+
+
+
+
+
🔔 重要提醒
+
+ 💉
+ 疫苗接种提醒
+ 3天后
+
+
+ 🏥
+ 定期体检
+ 1周后
+
+
+
+
+
+
+
+
+
小白
+
金毛 · 3岁 · 陪伴1095天
+
+ 温顺
+ 忠诚
+ 健康
+
+
+
+
+
+
⚖️
+
25kg
+
当前体重
+
→ 稳定
+
+
+
+
💰
+
¥890
+
本月消费
+
↗ +¥120
+
+
+
+
+
+
+
🔔 重要提醒
+
+ 🦷
+ 牙齿清洁
+ 明天
+
+
+
+
+
+
+
+
+
小灰
+
垂耳兔 · 1岁 · 陪伴180天
+
+ 安静
+ 可爱
+ 健康
+
+
+
+
+
+
⚖️
+
1.2kg
+
当前体重
+
↗ +0.1kg
+
+
+
+
💰
+
¥120
+
本月消费
+
→ 稳定
+
+
+
+
+
+
+
🔔 重要提醒
+
+ 🥕
+ 补充新鲜蔬菜
+ 今天
+
+
+
+
+
+
+
+
📊 家庭概览
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/html/layout7-multi-pet-carousel.html b/html/layout7-multi-pet-carousel.html
new file mode 100644
index 0000000..1e8fb84
--- /dev/null
+++ b/html/layout7-multi-pet-carousel.html
@@ -0,0 +1,579 @@
+
+
+
+
+
+ 方案7:多宠物轮播式布局
+
+
+
+
+
+
+
+
+
+
+
+ 4.5kg
+ 体重
+
+
+ 89
+ 记录
+
+
+ 365
+ 天数
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 25kg
+ 体重
+
+
+ 67
+ 记录
+
+
+ 1095
+ 天数
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1.2kg
+ 体重
+
+
+ 34
+ 记录
+
+
+ 180
+ 天数
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📊 家庭概览
+
+ 总记录数
+ 190条
+
+
+ 本月新增
+ 23条
+
+
+ 待办提醒
+ 5项
+
+
+ 健康状态
+ 全部良好
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/html/layout8-pet-dashboard.html b/html/layout8-pet-dashboard.html
new file mode 100644
index 0000000..b6eef6b
--- /dev/null
+++ b/html/layout8-pet-dashboard.html
@@ -0,0 +1,593 @@
+
+
+
+
+
+ 方案8:宠物仪表盘聚合式
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pages.json b/pages.json
index fa95cd5..ee39a7f 100644
--- a/pages.json
+++ b/pages.json
@@ -3,10 +3,9 @@
{
"path": "pages/pets/pets",
"style": {
- "navigationBarTitleText": "我的宠物",
- "navigationBarBackgroundColor": "#ffffff",
- "navigationBarTextStyle": "black",
- "navigationStyle": "custom"
+ "navigationBarTitleText": "宠物管家",
+ "navigationBarBackgroundColor": "#FF8A80",
+ "navigationBarTextStyle": "white"
}
},
{
@@ -47,9 +46,8 @@
"path": "pages/pets/pet-detail",
"style": {
"navigationBarTitleText": "宠物详情",
- "navigationBarBackgroundColor": "#ffffff",
- "navigationBarTextStyle": "black",
- "navigationStyle": "custom"
+ "navigationBarBackgroundColor": "#FF8A80",
+ "navigationBarTextStyle": "white"
}
},
{
@@ -128,18 +126,16 @@
"path": "pages/pets/health-charts",
"style": {
"navigationBarTitleText": "健康档案",
- "navigationBarBackgroundColor": "#ffffff",
- "navigationBarTextStyle": "black",
- "navigationStyle": "custom"
+ "navigationBarBackgroundColor": "#81C784",
+ "navigationBarTextStyle": "white"
}
},
{
"path": "pages/pets/pet-personality",
"style": {
"navigationBarTitleText": "性格预设",
- "navigationBarBackgroundColor": "#ffffff",
- "navigationBarTextStyle": "black",
- "navigationStyle": "custom"
+ "navigationBarBackgroundColor": "#64B5F6",
+ "navigationBarTextStyle": "white"
}
},
{
diff --git a/pages/pets/health-charts.vue b/pages/pets/health-charts.vue
index fbaa450..64d3577 100644
--- a/pages/pets/health-charts.vue
+++ b/pages/pets/health-charts.vue
@@ -1,11 +1,12 @@
-
-
-
-
-
-
+
+
+
+
+ 更多
+
+
@@ -375,6 +376,27 @@ export default {
min-height: 100vh;
}
+/* 顶部操作栏 */
+.top-action-bar {
+ display: flex;
+ justify-content: flex-end;
+ padding: 20rpx 30rpx;
+
+ .action-item {
+ display: flex;
+ align-items: center;
+ gap: 8rpx;
+ padding: 12rpx 20rpx;
+ border-radius: 20rpx;
+ background: rgba(255, 255, 255, 0.8);
+
+ .action-text {
+ font-size: 24rpx;
+ color: #666666;
+ }
+ }
+}
+
/* 宠物信息卡片 */
.pet-info-card {
background: #ffffff;
diff --git a/pages/pets/pet-personality.vue b/pages/pets/pet-personality.vue
index 3ce5759..811928c 100644
--- a/pages/pets/pet-personality.vue
+++ b/pages/pets/pet-personality.vue
@@ -1,11 +1,12 @@
-
-
-
-
-
-
+
+
+
+
+ 帮助
+
+
@@ -448,6 +449,27 @@ export default {
padding-bottom: 120rpx;
}
+/* 顶部操作栏 */
+.top-action-bar {
+ display: flex;
+ justify-content: flex-end;
+ padding: 20rpx 30rpx;
+
+ .action-item {
+ display: flex;
+ align-items: center;
+ gap: 8rpx;
+ padding: 12rpx 20rpx;
+ border-radius: 20rpx;
+ background: rgba(255, 255, 255, 0.8);
+
+ .action-text {
+ font-size: 24rpx;
+ color: #666666;
+ }
+ }
+}
+
/* 进度指示器 */
.progress-container {
padding: 30rpx;
diff --git a/pages/pets/pets.vue b/pages/pets/pets.vue
index dbfcd06..2aa0d2f 100644
--- a/pages/pets/pets.vue
+++ b/pages/pets/pets.vue
@@ -1,13 +1,13 @@
-
-
-
-
- 🐾 我的宠物
- {{ petsList.length }}只小可爱陪伴着你
+
+
+
+
+ 🐾 我的宠物
+ {{ petsList.length }}只小可爱陪伴着你
-
+
@@ -305,29 +305,28 @@ export default {
padding-bottom: 20rpx;
}
-/* 自定义导航栏 */
-.custom-navbar {
+/* 顶部信息栏 */
+.top-info-bar {
background: linear-gradient(135deg, #FF8A80 0%, #FFB74D 100%);
- padding: 20rpx 30rpx 30rpx;
+ padding: 30rpx;
border-radius: 0 0 40rpx 40rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.3);
- .navbar-content {
+ .info-content {
display: flex;
justify-content: space-between;
align-items: center;
- margin-top: 20rpx;
}
- .navbar-title {
- .title-text {
+ .welcome-text {
+ .main-title {
color: #ffffff;
font-size: 36rpx;
font-weight: bold;
display: block;
}
- .subtitle-text {
+ .sub-title {
color: rgba(255, 255, 255, 0.8);
font-size: 24rpx;
margin-top: 8rpx;
@@ -335,7 +334,7 @@ export default {
}
}
- .navbar-actions {
+ .top-actions {
display: flex;
gap: 20rpx;
align-items: center;