From 5877a1ee434eccf5637f3d626430864b32d09fb9 Mon Sep 17 00:00:00 2001 From: yvan <8574526@qq.com> Date: Tue, 12 Aug 2025 20:06:22 +0800 Subject: [PATCH] 1 --- html/layout01-horizontal-carousel.html | 630 ++++++++++++++++++ html/layout04-large-carousel.html | 756 ++++++++++++++++++++++ html/layout05-tab-switch.html | 852 +++++++++++++++++++++++++ html/layout11-horizontal-scroll.html | 616 ++++++++++++++++++ html/layout2-dashboard-tabs.html | 798 +++++++++++++++++++++++ html/layout7-multi-pet-carousel.html | 579 +++++++++++++++++ html/layout8-pet-dashboard.html | 593 +++++++++++++++++ pages.json | 22 +- pages/pets/health-charts.vue | 34 +- pages/pets/pet-personality.vue | 34 +- pages/pets/pets.vue | 31 +- 11 files changed, 4904 insertions(+), 41 deletions(-) create mode 100644 html/layout01-horizontal-carousel.html create mode 100644 html/layout04-large-carousel.html create mode 100644 html/layout05-tab-switch.html create mode 100644 html/layout11-horizontal-scroll.html create mode 100644 html/layout2-dashboard-tabs.html create mode 100644 html/layout7-multi-pet-carousel.html create mode 100644 html/layout8-pet-dashboard.html 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只毛孩子的温馨日常

+
+
+ + +
+
+ +
+
+
+
+
+ 🐱 +
+
+
+

小橘

+

橘猫 · 2岁 · 陪伴365天

+
+ 活泼 + 粘人 +
+
+
+
+
+ 4.5kg + 体重 +
+
+ 89 + 记录 +
+
+ 健康 + 状态 +
+
+
+ + + +
+
+ +
+
+
+ 🐶 +
+
+
+

小白

+

金毛 · 3岁 · 陪伴1095天

+
+ 温顺 + 忠诚 +
+
+
+
+
+ 25kg + 体重 +
+
+ 67 + 记录 +
+
+ 健康 + 状态 +
+
+
+ + + +
+
+ +
+
+
+ 🐰 +
+
+
+

小灰

+

垂耳兔 · 1岁 · 陪伴180天

+
+ 安静 + 可爱 +
+
+
+
+
+ 1.2kg + 体重 +
+
+ 34 + 记录 +
+
+ 健康 + 状态 +
+
+
+ + + +
+
+ +
+ ➕ +
添加新宠物
+
+
+
+ +
+
📊 家庭概览
+
+
+
190
+
总记录数
+
+
+
¥2,340
+
本月消费
+
+
+
5
+
待办提醒
+
+
+
3
+
家庭成员
+
+
+ +
+ + + + +
+
+ +
+
⏰ 最近活动
+
+
🐱
+
+
小橘完成了今天的早餐
+
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：轮播大卡片式 + + + +
+
+

🎡 宠物轮播

+

沉浸式宠物展示体验

+
+
+ + +
+
+ +
+ + + + +
+ +
+
+
+
+
+ +
+
📊 家庭概览
+
+
+
190
+
总记录数
+
+
+
¥1,590
+
本月消费
+
+
+
3
+
家庭成员
+
+
+
5
+
待办提醒
+
+
+
+ + + + +
+
+ +
+
+
⏰ 最近活动
+ +
+
+
+
🐱
+
+
小橘完成了今天的早餐
+
2小时前 · 日常记录
+
+
饮食
+
+
+
🐶
+
+
小白外出散步30分钟
+
3小时前 · 日常记录
+
+
运动
+
+
+
🐰
+
+
小灰吃了新鲜胡萝卜
+
5小时前 · 随手记
+
+
饮食
+
+
+
+ +
+
+ 🤖 +
AI助手建议
+
+
+ 根据分析，小橘今天的活动量比平时少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天
+
+ 活泼 + 粘人 + 健康 +
+
+ +
+
+ ⚖️ +
4.5kg
+
当前体重
+
+
+ 📝 +
89
+
记录数量
+
+
+ 💰 +
¥580
+
本月消费
+
+
+ +
+ + + + +
+ +
+
⏰ 最近活动
+
+
+
+
完成了今天的早餐
+
2小时前
+
+
饮食
+
+
+
+
+
和主人玩了15分钟
+
4小时前
+
+
互动
+
+
+
+
+
午睡了2小时
+
6小时前
+
+
休息
+
+
+ +
+
❤️ 健康状态
+
+
+
优秀
+
整体健康
+
+
+
正常
+
活动水平
+
+
+
良好
+
食欲状态
+
+
+
稳定
+
情绪状态
+
+
+
+
+ + +
+
+
+ 🐶 +
+
+
小白
+
金毛 · 3岁 · 陪伴1095天
+
+ 温顺 + 忠诚 + 健康 +
+
+ +
+
+ ⚖️ +
25kg
+
当前体重
+
+
+ 📝 +
67
+
记录数量
+
+
+ 💰 +
¥890
+
本月消费
+
+
+ +
+ + + + +
+ +
+
⏰ 最近活动
+
+
+
+
外出散步30分钟
+
1小时前
+
+
运动
+
+
+
+
+
完成了午餐
+
3小时前
+
+
饮食
+
+
+ +
+
❤️ 健康状态
+
+
+
优秀
+
整体健康
+
+
+
活跃
+
活动水平
+
+
+
良好
+
食欲状态
+
+
+
愉快
+
情绪状态
+
+
+
+
+ + +
+
+
+ 🐰 +
+
+
小灰
+
垂耳兔 · 1岁 · 陪伴180天
+
+ 安静 + 可爱 + 健康 +
+
+ +
+
+ ⚖️ +
1.2kg
+
当前体重
+
+
+ 📝 +
34
+
记录数量
+
+
+ 💰 +
¥120
+
本月消费
+
+
+ +
+ + + + +
+ +
+
⏰ 最近活动
+
+
+
+
吃了新鲜胡萝卜
+
1小时前
+
+
饮食
+
+
+
+
+
在笼子里活动
+
2小时前
+
+
运动
+
+
+ +
+
❤️ 健康状态
+
+
+
良好
+
整体健康
+
+
+
正常
+
活动水平
+
+
+
良好
+
食欲状态
+
+
+
平静
+
情绪状态
+
+
+
+
+
+
+ +
+
📊 家庭概览
+
+
+
190
+
总记录数
+
+
+
¥1,590
+
本月消费
+
+
+
3
+
家庭成员
+
+
+
5
+
待办提醒
+
+
+
+ + + + +
+
+ + + + + + 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：横向滑动卡片式 + + + +
+
+

🏠 宠物之家

+

4只毛孩子的温馨日常

+
+ +
+ +
+
+
+
+
+ 🐱 +
💚
+
+
+

小橘

+

橘猫 · 2岁 · 陪伴365天

+
+ 活泼 + 粘人 +
+
+
+
+
+ 4.5kg + 体重 +
+
+ 89 + 记录 +
+
+ 健康 + 状态 +
+
+
+ + + +
+
+ +
+
+
+ 🐶 +
💚
+
+
+

小白

+

金毛 · 3岁 · 陪伴1095天

+
+ 温顺 + 忠诚 +
+
+
+
+
+ 25kg + 体重 +
+
+ 67 + 记录 +
+
+ 健康 + 状态 +
+
+
+ + + +
+
+ +
+
+
+ 🐰 +
💚
+
+
+

小灰

+

垂耳兔 · 1岁 · 陪伴180天

+
+ 安静 + 可爱 +
+
+
+
+
+ 1.2kg + 体重 +
+
+ 34 + 记录 +
+
+ 健康 + 状态 +
+
+
+ + + +
+
+ +
+ ➕ +
添加新宠物
+
+
+
+ +
+
📊 家庭概览
+
+
+
190
+
总记录数
+
+
+
¥2,340
+
本月消费
+
+
+
5
+
待办提醒
+
+
+
3
+
家庭成员
+
+
+ +
+ + + + +
+
+ +
+
⏰ 最近活动
+
+
🐱
+
+
小橘完成了今天的早餐
+
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
+
当前体重
+
→ 稳定
+
+
+ 📝 +
67
+
记录数量
+
↗ +8
+
+
+ 💰 +
¥890
+
本月消费
+
↗ +¥120
+
+
+ +
+
📊 健康指标
+
+
+ ❤️ + 整体健康 +
+
+
+
+
+
+
+ 🏃 + 活动水平 +
+
+
+
+
+
+
+ 🍽️ + 食欲状态 +
+
+
+
+
+
+
+ 😊 + 快乐指数 +
+
+
+
+
+
+ +
+
🔔 重要提醒
+
+ 🦷 + 牙齿清洁 + 明天 +
+
+
+ + +
+
+
+ 🐰 +
+
+
小灰
+
垂耳兔 · 1岁 · 陪伴180天
+
+ 安静 + 可爱 + 健康 +
+
+ +
+
+ ⚖️ +
1.2kg
+
当前体重
+
↗ +0.1kg
+
+
+ 📝 +
34
+
记录数量
+
↗ +5
+
+
+ 💰 +
¥120
+
本月消费
+
→ 稳定
+
+
+ +
+
📊 健康指标
+
+
+ ❤️ + 整体健康 +
+
+
+
+
+
+
+ 🏃 + 活动水平 +
+
+
+
+
+
+
+ 🍽️ + 食欲状态 +
+
+
+
+
+
+
+ 😊 + 快乐指数 +
+
+
+
+
+
+ +
+
🔔 重要提醒
+
+ 🥕 + 补充新鲜蔬菜 + 今天 +
+
+
+
+
+ +
+
📊 家庭概览
+
+
+
190
+
总记录数
+
+
+
¥1,590
+
本月消费
+
+
+
3
+
家庭成员
+
+
+
5
+
待办提醒
+
+
+
+ + + + +
+
+ + + + + + 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：多宠物轮播式布局 + + + +
+
+

🏠 我的宠物家庭

+

3只毛孩子的温馨日常

+
+
+
+
+ +
+
+
+
+
+ 🐱 +
+
+
+

小橘

+

橘猫 · 2岁

+
+ 开心 + 活跃 +
+
+
+
+
+ 4.5kg + 体重 +
+
+ 89 + 记录 +
+
+ 365 + 天数 +
+
+
+ + + +
+
+ +
+
+
+ 🐶 +
+
+
+

小白

+

金毛 · 3岁

+
+ 温顺 + 忠诚 +
+
+
+
+
+ 25kg + 体重 +
+
+ 67 + 记录 +
+
+ 1095 + 天数 +
+
+
+ + + +
+
+ +
+
+
+ 🐰 +
+
+
+

小灰

+

垂耳兔 · 1岁

+
+ 安静 + 可爱 +
+
+
+
+
+ 1.2kg + 体重 +
+
+ 34 + 记录 +
+
+ 180 + 天数 +
+
+
+ + + +
+
+
+
+ +
+
+
+
+
+ +
+
📊 家庭概览
+
+ 总记录数 + 190条 +
+
+ 本月新增 + 23条 +
+
+ 待办提醒 + 5项 +
+
+ 健康状态 + 全部良好 +
+
+ +
+
⏰ 最近动态
+
+
🐱
+
+
小橘完成了今天的早餐
+
2小时前
+
+
+
+
🐶
+
+
小白外出散步30分钟
+
3小时前
+
+
+
+
🐰
+
+
小灰吃了新鲜的胡萝卜
+
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：宠物仪表盘聚合式 + + + +
+
+
+
🏠 宠物管家
+
3只毛孩子的智能管理
+
+ +
+
+
+
🐱
+
小橘
+
健康
+
+
+
🐶
+
小白
+
活跃
+
+
+
🐰
+
小灰
+
安静
+
+
+
➕
+
添加
+
新宠物
+
+
+
+ +
+
📊 家庭数据概览
+
+
+ 📝 +
190
+
总记录数
+
+
+ 📅 +
1640
+
陪伴天数
+
+
+ 💚 +
100%
+
健康率
+
+
+ 🎯 +
23
+
本月记录
+
+
+
+ +
+
🎯 今日重点
+
+
+ 🍽️ +
早餐完成
+
3/3只已用餐
+
+
+ 🚶 +
遛弯计划
+
小白待遛弯
+
+
+ 💊 +
用药提醒
+
小橘驱虫药
+
+
+ 🛁 +
洗澡安排
+
本周计划
+
+
+
+ +
+ + + + +
+ +
+
⏰ 活动流
+
+
+
+
🐱
+
小橘完成早餐
+
2小时前
+
+
+
+
+
🐶
+
小白外出散步
+
3小时前
+
+
+
+
+
🐰
+
小灰吃胡萝卜
+
4小时前
+
+
+
+
+ +
+
🔔 健康提醒
+
+
💊
+
+
小橘驱虫药到期
+
明天
+
+
+
+
💉
+
+
小白疫苗接种
+
下周
+
+
+
+ + + + 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 @@