diff --git a/pages.json b/pages.json
index 91bf9d6..ce1297d 100644
--- a/pages.json
+++ b/pages.json
@@ -137,6 +137,7 @@
"navigationBarTextStyle": "white"
}
},
+
{
"path": "pages/index/index",
"style": {
diff --git a/pages/pets/pet-detail.vue b/pages/pets/pet-detail.vue
index 545190b..aebf260 100644
--- a/pages/pets/pet-detail.vue
+++ b/pages/pets/pet-detail.vue
@@ -124,6 +124,9 @@ export default {
return {
petId: '',
petInfo: {},
+ currentLayout: 1,
+ activeTab: 0,
+ drawerExpanded: false,
recentRecords: [
{
id: 1,
@@ -135,6 +138,64 @@ export default {
date: '2024-01-14',
content: '带小橘去公园散步，玩得很开心'
}
+ ],
+ layout1Items: [
+ { id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
+ { id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
+ { id: 3, icon: '📊', text: '健康档案', action: 'viewHealth' },
+ { id: 4, icon: '⏰', text: '成长时光', action: 'viewTimeline' },
+ { id: 5, icon: '📋', text: '所有记录', action: 'viewRecords' },
+ { id: 6, icon: '🔔', text: '提醒设置', action: 'showReminder' },
+ { id: 7, icon: '📷', text: '拍照记录', action: 'takePhoto' },
+ { id: 8, icon: '🎵', text: '音频日记', action: 'recordAudio' },
+ { id: 9, icon: '🏥', text: '医疗记录', action: 'medicalRecord' }
+ ],
+ layout2Items: [
+ { id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
+ { id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
+ { id: 3, icon: '📊', text: '健康档案', action: 'viewHealth' },
+ { id: 4, icon: '⏰', text: '成长时光', action: 'viewTimeline' },
+ { id: 5, icon: '📋', text: '所有记录', action: 'viewRecords' },
+ { id: 6, icon: '🔔', text: '提醒设置', action: 'showReminder' },
+ { id: 7, icon: '📷', text: '拍照记录', action: 'takePhoto' },
+ { id: 8, icon: '🎵', text: '音频日记', action: 'recordAudio' }
+ ],
+ tabs: [
+ {
+ id: 1,
+ name: '日常',
+ items: [
+ { id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
+ { id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
+ { id: 3, icon: '📷', text: '拍照记录', action: 'takePhoto' }
+ ]
+ },
+ {
+ id: 2,
+ name: '健康',
+ items: [
+ { id: 4, icon: '📊', text: '健康档案', action: 'viewHealth' },
+ { id: 5, icon: '🏥', text: '医疗记录', action: 'medicalRecord' },
+ { id: 6, icon: '💊', text: '用药提醒', action: 'medicineReminder' }
+ ]
+ },
+ {
+ id: 3,
+ name: '其他',
+ items: [
+ { id: 7, icon: '⏰', text: '成长时光', action: 'viewTimeline' },
+ { id: 8, icon: '📋', text: '所有记录', action: 'viewRecords' },
+ { id: 9, icon: '🔔', text: '提醒设置', action: 'showReminder' }
+ ]
+ }
+ ],
+ layout7Items: [
+ { id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
+ { id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
+ { id: 3, icon: '📊', text: '健康档案', action: 'viewHealth' },
+ { id: 4, icon: '⏰', text: '成长时光', action: 'viewTimeline' },
+ { id: 5, icon: '📋', text: '所有记录', action: 'viewRecords' },
+ { id: 6, icon: '🔔', text: '提醒设置', action: 'showReminder' }
]
}
},
@@ -220,6 +281,69 @@ export default {
title: '分享功能开发中',
icon: 'none'
})
+ },
+
+ switchLayout(layoutNumber) {
+ this.currentLayout = layoutNumber
+ },
+
+ handleAction(action) {
+ switch(action) {
+ case 'addRecord':
+ this.addRecord()
+ break
+ case 'chatWithPet':
+ this.chatWithPet()
+ break
+ case 'viewHealth':
+ this.viewHealth()
+ break
+ case 'viewTimeline':
+ this.viewTimeline()
+ break
+ case 'viewRecords':
+ this.viewRecords()
+ break
+ case 'showReminder':
+ uni.showToast({
+ title: '提醒功能开发中',
+ icon: 'none'
+ })
+ break
+ case 'takePhoto':
+ uni.chooseImage({
+ count: 1,
+ sizeType: ['original', 'compressed'],
+ sourceType: ['camera'],
+ success: () => {
+ uni.showToast({
+ title: '拍照成功',
+ icon: 'success'
+ })
+ }
+ })
+ break
+ case 'recordAudio':
+ uni.showToast({
+ title: '音频功能开发中',
+ icon: 'none'
+ })
+ break
+ case 'medicalRecord':
+ uni.showToast({
+ title: '医疗记录功能开发中',
+ icon: 'none'
+ })
+ break
+ case 'medicineReminder':
+ uni.showToast({
+ title: '用药提醒功能开发中',
+ icon: 'none'
+ })
+ break
+ default:
+ console.log('未知操作:', action)
+ }
}
}
}
diff --git a/pages/pets/pets.vue b/pages/pets/pets.vue
index c89de6e..77457ac 100644
--- a/pages/pets/pets.vue
+++ b/pages/pets/pets.vue
@@ -5,7 +5,7 @@
- ➕
- 添加
+ ➕
+ 添加
-
-
- {{ getPetEmoji(pet.breed) }}
-
-
- {{ pet.name }}
- {{ pet.breed }} · {{ pet.age }}岁 · 陪伴{{ pet.companionDays }}天
-
- {{ tag }}
-
-
-
-
-
-
- ⚖️
- {{ pet.weight || '未知' }}
- 当前体重
-
-
- 📝
- {{ getPetRecordsCount(pet.id) }}
- 记录数量
-
-
- 💰
- ¥{{ getPetMonthlyExpense(pet.id) }}
- 本月消费
-
-
-
-
-
-
- 📝
- 添加记录
-
-
- 💬
- AI聊天
-
-
- 📊
- 健康档案
-
-
- 📸
- 成长时光
-
-
-
-
-
- ⏰ 最近活动
-
-
-
- {{ activity.text }}
- {{ activity.time }}
+
+
+
-
-
-
- ❤️ 健康状态
-
-
- {{ getHealthStatus(pet, 'overall') }}
- 整体健康
+
+
+
+ ⚖️
+ {{ pet.weight || '未知' }}
+ 当前体重
-
- {{ getHealthStatus(pet, 'activity') }}
- 活动水平
+
+ 📝
+ {{ getPetRecordsCount(pet.id) }}
+ 记录数量
-
- {{ getHealthStatus(pet, 'appetite') }}
- 食欲状态
+
+ 💰
+ ¥{{ getPetMonthlyExpense(pet.id) }}
+ 本月消费
-
- {{ getHealthStatus(pet, 'mood') }}
- 情绪状态
+
+ 🔔
+ {{ getPetReminders(pet.id) }}
+ 待办提醒
@@ -122,53 +91,94 @@
+
+
+
+
+
+ {{ item.icon }}
+ {{ item.text }}
+
+
+
+
+
🐾
还没有小伙伴呢
添加你的第一只宠物，开始记录美好时光吧~
-
- 添加第一只宠物
+
+ 添加第一只宠物
-
-
- 📊 家庭概览
-
-
- {{ totalRecords }}
- 总记录数
+
+
+
+
+
-
- ¥{{ totalMonthlyExpense }}
- 本月消费
-
-
- {{ petsList.length }}
- 家庭成员
-
-
- {{ upcomingReminders }}
- 待办提醒
+
+
+ {{ totalRecords }}
+ 总记录
+
+
+ ¥{{ totalMonthlyExpense }}
+ 本月消费
+
+
+ {{ totalCompanionDays }}
+ 陪伴天数
+
-
-
- 📝
- 快速记录
+
+
+
+
-
- 💰
- 记账
+
+
+ {{ interaction.petEmoji }}
+
+ {{ interaction.title }}
+ {{ interaction.time }}
+
+ {{ interaction.typeIcon }}
+
-
- 📸
- 拍照
+
+ 查看更多 →
-
- 🏥
- 领养
+
+
+
+
+
+
+
+
+ {{ getPetEmoji(pet.breed) }}
+ {{ pet.name }}
+
+
+ {{ getHealthStatusText(pet.healthStatus) }}
+
+
+
+
+
+ 查看详细报告
+
@@ -177,34 +187,6 @@
📝
-
-
-
-
-
@@ -213,13 +195,41 @@ export default {
data() {
return {
petsList: [],
- showQuickActions: false,
totalRecords: 0,
- totalDays: 0,
- upcomingReminders: 0,
currentTabIndex: 0,
petRecords: [],
- petExpenses: []
+ petExpenses: [],
+ mainActionItems: [
+ { id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
+ { id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
+ { id: 3, icon: '📊', text: '健康档案', action: 'viewHealth' },
+ { id: 4, icon: '📸', text: '成长时光', action: 'viewTimeline' },
+ { id: 5, icon: '📋', text: '所有记录', action: 'viewRecords' },
+ { id: 6, icon: '🔔', text: '提醒设置', action: 'showReminder' }
+ ],
+ recentInteractions: [
+ {
+ id: 1,
+ petEmoji: '🐱',
+ title: '小橘完成了今日散步',
+ time: '2小时前',
+ typeIcon: '🚶'
+ },
+ {
+ id: 2,
+ petEmoji: '🐶',
+ title: '小白吃完了晚餐',
+ time: '4小时前',
+ typeIcon: '🍽️'
+ },
+ {
+ id: 3,
+ petEmoji: '🐱',
+ title: '小橘的体重记录已更新',
+ time: '1天前',
+ typeIcon: '⚖️'
+ }
+ ]
}
},
onShow() {
@@ -244,6 +254,35 @@ export default {
this.currentTabIndex = index
},
+ // 处理功能按钮点击
+ handleAction(action, pet) {
+ switch(action) {
+ case 'addRecord':
+ this.addRecord(pet)
+ break
+ case 'chatWithPet':
+ this.chatWithPet(pet)
+ break
+ case 'viewHealth':
+ this.viewHealth(pet)
+ break
+ case 'viewTimeline':
+ this.viewTimeline(pet)
+ break
+ case 'viewRecords':
+ this.navigateToRecords()
+ break
+ case 'showReminder':
+ uni.showToast({
+ title: '提醒功能开发中',
+ icon: 'none'
+ })
+ break
+ default:
+ console.log('未知操作:', action)
+ }
+ },
+
// 获取宠物表情符号
getPetEmoji(breed) {
const emojiMap = {
@@ -276,6 +315,7 @@ export default {
gender: '公',
weight: '4.5kg',
birthday: '2022-01-15',
+ constellation: '摩羯座',
healthStatus: 'healthy',
personality: ['活泼', '粘人', '贪吃'],
lastRecord: '2024-01-15'
@@ -374,45 +414,41 @@ export default {
return expense ? expense.amount : 0
},
- // 获取宠物最近活动
- getPetRecentActivities(petId) {
- const activities = {
- 1: [
- { text: '完成了今天的早餐', time: '2小时前', type: '饮食' },
- { text: '和主人玩了15分钟', time: '4小时前', type: '互动' },
- { text: '午睡了2小时', time: '6小时前', type: '休息' }
- ],
- 2: [
- { text: '外出散步30分钟', time: '1小时前', type: '运动' },
- { text: '完成了午餐', time: '3小时前', type: '饮食' },
- { text: '在院子里玩耍', time: '5小时前', type: '互动' }
- ],
- 3: [
- { text: '吃了新鲜胡萝卜', time: '1小时前', type: '饮食' },
- { text: '在笼子里活动', time: '2小时前', type: '运动' },
- { text: '安静地休息', time: '4小时前', type: '休息' }
- ]
- }
- return activities[petId] || []
+ // 获取宠物待办提醒数量
+ getPetReminders(petId) {
+ // 模拟获取宠物待办提醒数量
+ const reminders = [3, 1, 5, 2, 0];
+ return reminders[petId % reminders.length] || 0;
},
- // 获取健康状态
- getHealthStatus(pet, type) {
- const healthData = {
- 1: { overall: '优秀', activity: '正常', appetite: '良好', mood: '稳定' },
- 2: { overall: '优秀', activity: '活跃', appetite: '良好', mood: '愉快' },
- 3: { overall: '良好', activity: '正常', appetite: '良好', mood: '平静' }
- }
- return healthData[pet.id] ? healthData[pet.id][type] : '正常'
+ // 获取星座对应的图标
+ getConstellationIcon(constellation) {
+ const constellationIcons = {
+ '白羊座': '♈',
+ '金牛座': '♉',
+ '双子座': '♊',
+ '巨蟹座': '♋',
+ '狮子座': '♌',
+ '处女座': '♍',
+ '天秤座': '♎',
+ '天蝎座': '♏',
+ '射手座': '♐',
+ '摩羯座': '♑',
+ '水瓶座': '♒',
+ '双鱼座': '♓'
+ };
+ return constellationIcons[constellation] || '⭐';
},
- getHealthIcon(status) {
- const iconMap = {
- healthy: 'checkmark',
- warning: 'warning',
- sick: 'close'
+
+
+ getHealthStatusText(status) {
+ const statusMap = {
+ healthy: '健康',
+ warning: '注意',
+ sick: '异常'
}
- return iconMap[status] || 'checkmark'
+ return statusMap[status] || '健康'
},
addPet() {
@@ -452,68 +488,16 @@ export default {
},
// 导航方法
- navigateToAdoption() {
- uni.navigateTo({
- url: '/pages/adoption/adoption'
- })
- },
-
- takePhoto() {
- uni.chooseImage({
- count: 1,
- sizeType: ['original', 'compressed'],
- sourceType: ['camera'],
- success: (res) => {
- uni.showToast({
- title: '拍照成功',
- icon: 'success'
- })
- },
- fail: () => {
- uni.showToast({
- title: '拍照失败',
- icon: 'none'
- })
- }
- })
- },
-
- // 快捷操作方法
navigateToRecords() {
- this.showQuickActions = false
uni.navigateTo({
url: '/pages/pets/pet-records'
})
},
navigateToStats() {
- this.showQuickActions = false
uni.navigateTo({
url: '/pages/pets/health-charts'
})
- },
-
- navigateToReminders() {
- this.showQuickActions = false
- uni.showToast({
- title: '提醒功能开发中',
- icon: 'none'
- })
- },
-
- navigateToSettings() {
- this.showQuickActions = false
- uni.navigateTo({
- url: '/pages/profile/profile'
- })
- },
-
- exportData() {
- this.showQuickActions = false
- uni.showToast({
- title: '数据导出功能开发中',
- icon: 'none'
- })
}
}
}
@@ -523,11 +507,10 @@ export default {
.pets-container {
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
min-height: 100vh;
- padding-bottom: 20rpx;
+ padding-bottom: 120rpx;
padding-top: 20rpx;
}
-/* 标签切换容器 */
.tabs-container {
background: rgba(255, 255, 255, 0.85);
margin: 20rpx 30rpx 30rpx;
@@ -556,29 +539,29 @@ export default {
transition: all 0.3s ease;
position: relative;
z-index: 2;
+}
- &.active {
- background: rgba(255, 255, 255, 0.9);
- box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.2);
- }
+.tab-btn--active {
+ background: rgba(255, 255, 255, 0.9);
+ box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.2);
+}
- .tab-avatar {
- width: 48rpx;
- height: 48rpx;
- border-radius: 24rpx;
- background: linear-gradient(135deg, #FF8A80, #FFB6C1);
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 28rpx;
- margin: 0 auto 8rpx;
- }
+.tab-avatar {
+ width: 48rpx;
+ height: 48rpx;
+ border-radius: 24rpx;
+ background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 28rpx;
+ margin: 0 auto 8rpx;
+}
- .tab-name {
- font-size: 24rpx;
- font-weight: bold;
- color: #333;
- }
+.tab-name {
+ font-size: 24rpx;
+ font-weight: bold;
+ color: #333;
}
.add-tab {
@@ -594,103 +577,175 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
-
- &:active {
- background: rgba(255, 138, 128, 0.15);
- }
}
-/* 标签内容 */
+.add-tab:active {
+ background: rgba(255, 138, 128, 0.15);
+}
+
+.add-tab__icon {
+ font-size: 40rpx;
+ margin-bottom: 8rpx;
+}
+
+.add-tab__text {
+ font-size: 20rpx;
+}
+
.tab-content {
- padding: 50rpx;
+ padding: 30rpx;
}
-.tab-content-panel {
+.tab-panel {
display: none;
-
- &.active {
- display: block;
- }
}
-/* 宠物详情卡片 */
-.pet-detail-card {
- text-align: center;
- margin-bottom: 50rpx;
+.tab-panel--active {
+ display: block;
+}
- .pet-main-avatar {
- width: 160rpx;
- height: 160rpx;
- border-radius: 80rpx;
- background: linear-gradient(135deg, #FF8A80, #FFB6C1);
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 0 auto 30rpx;
- position: relative;
- box-shadow: 0 16rpx 50rpx rgba(255, 138, 128, 0.25);
+.pet-card {
+ margin-bottom: 0;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ border-radius: 16rpx;
+ padding: 16rpx;
+}
- .pet-emoji {
- font-size: 80rpx;
- }
+.pet-card:active {
+ transform: scale(0.98);
+ background: rgba(255, 255, 255, 0.1);
+}
- .pet-status-ring {
- position: absolute;
- top: -8rpx;
- left: -8rpx;
- right: -8rpx;
- bottom: -8rpx;
- border: 6rpx solid #4CAF50;
- border-radius: 50%;
- border-top-color: transparent;
- animation: spin 3s linear infinite;
+.pet-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 8rpx;
+ text-align: left;
+ width: 100%;
+}
- &.healthy {
- border-color: #4CAF50;
- border-top-color: transparent;
- }
+.pet-avatar-section {
+ width: 35%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 8rpx;
+}
- &.warning {
- border-color: #FFB74D;
- border-top-color: transparent;
- }
+.pet-info-section {
+ width: 60%;
+ padding-left: 16rpx;
+ padding-right: 8rpx;
+}
- &.sick {
- border-color: #FF8A80;
- border-top-color: transparent;
- }
- }
- }
+.pet-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ min-height: 100rpx;
+ width: 100%;
+}
- .pet-main-name {
- font-size: 44rpx;
- font-weight: bold;
- color: #333;
- margin-bottom: 16rpx;
- }
+.pet-info-top {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 100%;
+}
- .pet-main-details {
- font-size: 28rpx;
- color: #666;
- margin-bottom: 30rpx;
- }
+.pet-info-bottom {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 6rpx;
+ width: 100%;
+}
- .pet-main-tags {
- display: flex;
- justify-content: center;
- gap: 16rpx;
- margin-bottom: 40rpx;
- flex-wrap: wrap;
+.pet-name-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 6rpx;
+ height: 40rpx;
+}
- .main-tag {
- background: #E8F5E8;
- color: #4CAF50;
- padding: 12rpx 24rpx;
- border-radius: 24rpx;
- font-size: 24rpx;
- font-weight: bold;
- }
- }
+.pet-name {
+ font-size: 36rpx;
+ font-weight: bold;
+ color: #333;
+ line-height: 1;
+ display: inline-block;
+ margin-right: 24rpx;
+}
+
+.pet-details {
+ font-size: 24rpx;
+ color: #666;
+ margin-bottom: 8rpx;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.constellation-text {
+ color: #666;
+}
+
+.constellation-icon {
+ font-size: 20rpx;
+ color: #FFD700;
+ margin-left: 4rpx;
+}
+
+.companion-text {
+ font-size: 22rpx;
+ color: #999;
+ flex: 1;
+ text-align: left;
+}
+
+.pet-avatar {
+ width: 90rpx;
+ height: 90rpx;
+ border-radius: 45rpx;
+ background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+ 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;
+ left: -8rpx;
+ right: -8rpx;
+ bottom: -8rpx;
+ border: 6rpx solid #4CAF50;
+ border-radius: 50%;
+ border-top-color: transparent;
+ animation: spin 3s linear infinite;
+}
+
+.pet-status-ring--healthy {
+ border-color: #4CAF50;
+ border-top-color: transparent;
+}
+
+.pet-status-ring--warning {
+ border-color: #FFB74D;
+ border-top-color: transparent;
+}
+
+.pet-status-ring--sick {
+ border-color: #FF8A80;
+ border-top-color: transparent;
}
@keyframes spin {
@@ -698,180 +753,91 @@ export default {
100% { transform: rotate(360deg); }
}
-/* 数据统计网格 */
-.pet-stats-grid {
+.pet-stats {
display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 30rpx;
- margin-bottom: 50rpx;
-
- .stat-card {
- background: #F8F9FA;
- padding: 30rpx 20rpx;
- border-radius: 30rpx;
- text-align: center;
-
- .stat-icon {
- font-size: 40rpx;
- margin-bottom: 16rpx;
- display: block;
- }
-
- .stat-value {
- font-size: 36rpx;
- font-weight: bold;
- color: #333;
- margin-bottom: 8rpx;
- }
-
- .stat-label {
- font-size: 22rpx;
- color: #999;
- }
- }
+ grid-template-columns: repeat(4, 1fr);
+ gap: 4rpx;
+ margin-bottom: 0;
}
-/* 操作按钮面板 */
-.pet-actions-panel {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 24rpx;
- margin-bottom: 50rpx;
-
- .action-card {
- background: linear-gradient(135deg, #FF8A80, #FFB6C1);
- color: white;
- border: none;
- padding: 30rpx;
- border-radius: 30rpx;
- text-align: center;
- transition: transform 0.2s;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-
- &:active {
- transform: translateY(-4rpx);
- }
-
- .action-icon {
- font-size: 40rpx;
- margin-bottom: 16rpx;
- display: block;
- }
-
- .action-text {
- font-size: 28rpx;
- font-weight: bold;
- }
- }
+.stat-item {
+ padding: 14rpx 8rpx;
+ border-radius: 10rpx;
+ text-align: center;
}
-/* 时间线 */
-.pet-timeline {
- background: #F8F9FA;
- border-radius: 30rpx;
- padding: 40rpx;
- margin-bottom: 50rpx;
-
- .timeline-title {
- font-size: 32rpx;
- font-weight: bold;
- color: #333;
- margin-bottom: 30rpx;
- display: flex;
- align-items: center;
- gap: 16rpx;
- }
-
- .timeline-item {
- display: flex;
- align-items: center;
- gap: 24rpx;
- padding: 20rpx 0;
- border-bottom: 2rpx solid #E9ECEF;
-
- &:last-child {
- border-bottom: none;
- }
-
- .timeline-dot {
- width: 16rpx;
- height: 16rpx;
- border-radius: 8rpx;
- background: #FF8A80;
- flex-shrink: 0;
- }
-
- .timeline-content {
- flex: 1;
-
- .timeline-text {
- font-size: 26rpx;
- color: #333;
- margin-bottom: 4rpx;
- }
-
- .timeline-time {
- font-size: 22rpx;
- color: #999;
- }
- }
-
- .timeline-type {
- background: #E3F2FD;
- color: #2196F3;
- padding: 4rpx 12rpx;
- border-radius: 16rpx;
- font-size: 18rpx;
- }
- }
+.stat-icon {
+ font-size: 28rpx;
+ margin-bottom: 6rpx;
+ display: block;
}
-/* 健康状态面板 */
-.pet-health-panel {
- background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
+.stat-value {
+ font-size: 22rpx;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 3rpx;
+}
+
+.stat-label {
+ font-size: 16rpx;
+ color: #999;
+}
+
+.functions-section {
+ margin: 16rpx 30rpx 20rpx;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 16rpx;
+ padding: 16rpx 0;
+ backdrop-filter: blur(10rpx);
+}
+
+.functions-scroll {
+ white-space: nowrap;
+ width: 100%;
+ overflow-x: auto;
+}
+
+.functions-scroll::-webkit-scrollbar {
+ display: none;
+}
+
+.functions-container {
+ display: flex;
+ gap: 14rpx;
+ width: max-content;
+ padding: 0 12rpx;
+}
+
+.function-item {
+ display: flex;
+ 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;
+}
+
+.function-item:active {
+ transform: scale(0.95);
+ box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.2);
+}
+
+.function-icon {
+ font-size: 32rpx;
+ margin-bottom: 10rpx;
+}
+
+.function-text {
+ font-size: 22rpx;
color: white;
- border-radius: 30rpx;
- padding: 40rpx;
- margin-bottom: 50rpx;
-
- .health-title {
- font-size: 32rpx;
- font-weight: bold;
- margin-bottom: 30rpx;
- display: flex;
- align-items: center;
- gap: 16rpx;
- }
-
- .health-indicators {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 30rpx;
-
- .health-indicator {
- background: rgba(255, 255, 255, 0.2);
- border-radius: 24rpx;
- padding: 24rpx;
- text-align: center;
-
- .health-value {
- font-size: 32rpx;
- font-weight: bold;
- margin-bottom: 8rpx;
- }
-
- .health-label {
- font-size: 22rpx;
- opacity: 0.9;
- }
- }
- }
+ font-weight: 500;
}
-/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
@@ -879,124 +845,102 @@ export default {
justify-content: center;
padding: 120rpx 60rpx;
text-align: center;
-
- .empty-emoji {
- font-size: 200rpx;
- margin-bottom: 40rpx;
- opacity: 0.8;
- }
-
- .empty-title {
- font-size: 36rpx;
- font-weight: bold;
- color: white;
- margin-bottom: 16rpx;
- }
-
- .empty-desc {
- font-size: 28rpx;
- color: rgba(255, 255, 255, 0.8);
- line-height: 1.5;
- margin-bottom: 60rpx;
- }
-
- .add-first-pet-btn {
- background: linear-gradient(135deg, #FF8A80, #FFB6C1);
- padding: 24rpx 48rpx;
- border-radius: 50rpx;
- box-shadow: 0 16rpx 64rpx rgba(255, 138, 128, 0.4);
- display: flex;
- align-items: center;
- justify-content: center;
-
- .add-btn-text {
- color: white;
- font-size: 32rpx;
- font-weight: bold;
- }
- }
}
-/* 家庭概览 */
-.summary-section {
+.empty-emoji {
+ font-size: 200rpx;
+ margin-bottom: 40rpx;
+ opacity: 0.8;
+}
+
+.empty-title {
+ font-size: 36rpx;
+ font-weight: bold;
+ color: white;
+ margin-bottom: 16rpx;
+}
+
+.empty-desc {
+ font-size: 28rpx;
+ color: rgba(255, 255, 255, 0.8);
+ line-height: 1.5;
+ margin-bottom: 60rpx;
+}
+
+.empty-add-btn {
+ background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+ padding: 24rpx 48rpx;
+ border-radius: 50rpx;
+ box-shadow: 0 16rpx 64rpx rgba(255, 138, 128, 0.4);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.empty-add-text {
+ color: white;
+ font-size: 32rpx;
+ font-weight: bold;
+}
+
+.cards-section {
+ padding: 0 30rpx;
+ display: flex;
+ flex-direction: column;
+ gap: 16rpx;
+}
+
+.overview-card,
+.interactions-card,
+.health-card {
background: rgba(255, 255, 255, 0.95);
- margin: 30rpx;
- border-radius: 40rpx;
- padding: 40rpx;
- backdrop-filter: blur(40rpx);
- box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.1);
-
- .summary-title {
- font-size: 36rpx;
- font-weight: bold;
- color: #333;
- margin-bottom: 30rpx;
- text-align: center;
- }
-
- .summary-stats {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 30rpx;
- margin-bottom: 40rpx;
-
- .summary-card {
- background: linear-gradient(135deg, #FF8A80, #FFB6C1);
- color: white;
- padding: 30rpx;
- border-radius: 30rpx;
- text-align: center;
-
- .summary-number {
- font-size: 40rpx;
- font-weight: bold;
- margin-bottom: 8rpx;
- }
-
- .summary-label {
- font-size: 24rpx;
- opacity: 0.9;
- }
- }
- }
-
- .quick-actions {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 20rpx;
-
- .quick-btn {
- background: #F8F9FA;
- border: none;
- border-radius: 24rpx;
- padding: 24rpx 16rpx;
- text-align: center;
- transition: transform 0.2s;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-
- &:active {
- transform: translateY(-4rpx);
- }
-
- .quick-icon {
- font-size: 32rpx;
- margin-bottom: 8rpx;
- display: block;
- }
-
- .quick-text {
- font-size: 20rpx;
- color: #666;
- font-weight: bold;
- }
- }
- }
+ border-radius: 24rpx;
+ padding: 30rpx;
+ box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(10rpx);
+}
+
+.card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24rpx;
+}
+
+.card-title {
+ font-size: 32rpx;
+ font-weight: 600;
+ color: #333;
+}
+
+.card-subtitle {
+ font-size: 24rpx;
+ color: #999;
+}
+
+.overview-stats {
+ display: flex;
+ justify-content: space-around;
+ gap: 20rpx;
+}
+
+.overview-stat {
+ text-align: center;
+ flex: 1;
+}
+
+.overview-stat-number {
+ font-size: 36rpx;
+ font-weight: 700;
+ color: #FF8A80;
+ margin-bottom: 8rpx;
+}
+
+.overview-stat-label {
+ font-size: 22rpx;
+ color: #666;
}
-/* 浮动添加按钮 */
.floating-add {
position: fixed;
bottom: 60rpx;
@@ -1013,85 +957,123 @@ export default {
display: flex;
align-items: center;
justify-content: center;
-
- &:active {
- transform: scale(1.1);
- }
-
- .floating-add-icon {
- font-size: 48rpx;
- }
}
-/* 快捷操作弹窗 */
-.quick-actions-popup {
- background: #ffffff;
- border-radius: 40rpx 40rpx 0 0;
- padding: 40rpx 30rpx 60rpx;
-
- .popup-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 40rpx;
-
- .popup-title {
- font-size: 32rpx;
- font-weight: bold;
- color: #333333;
- }
- }
-
- .quick-actions-grid {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 40rpx;
-
- .quick-action-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 16rpx;
- padding: 24rpx 16rpx;
- border-radius: 16rpx;
- background: #F8F9FA;
- transition: all 0.3s ease;
- text-align: center;
-
- &:active {
- background: #E9ECEF;
- transform: scale(0.95);
- }
-
- .quick-action-text {
- font-size: 24rpx;
- color: #666666;
- text-align: center;
- }
- }
- }
+.floating-add:active {
+ transform: scale(1.1);
}
-/* 响应式适配 */
-@media screen and (max-width: 375px) {
- .tabs-container,
- .summary-section {
- margin: 15rpx;
- }
-
- .tab-content {
- padding: 30rpx;
- }
-
- .pet-stats-grid {
- gap: 20rpx;
- }
-
- .pet-actions-panel {
- gap: 16rpx;
- }
+.floating-add-icon {
+ font-size: 48rpx;
}
-/* 强制保持明亮主题，不受系统暗黑模式影响 */
+.interactions-list {
+ display: flex;
+ flex-direction: column;
+ gap: 16rpx;
+}
+
+.interaction-item {
+ display: flex;
+ align-items: center;
+ padding: 16rpx;
+ border-radius: 12rpx;
+ background: #f8f9fa;
+}
+
+.interaction-avatar {
+ font-size: 32rpx;
+ margin-right: 16rpx;
+}
+
+.interaction-content {
+ flex: 1;
+}
+
+.interaction-title {
+ font-size: 26rpx;
+ color: #333;
+ margin-bottom: 4rpx;
+}
+
+.interaction-time {
+ font-size: 22rpx;
+ color: #999;
+}
+
+.interaction-type {
+ font-size: 24rpx;
+}
+
+.view-more {
+ text-align: center;
+ margin-top: 16rpx;
+ padding: 12rpx;
+}
+
+.view-more-text {
+ font-size: 24rpx;
+ color: #FF8A80;
+}
+
+.health-list {
+ display: flex;
+ flex-direction: column;
+ gap: 16rpx;
+}
+
+.health-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16rpx;
+ border-radius: 12rpx;
+ background: #f8f9fa;
+}
+
+.health-pet-info {
+ display: flex;
+ align-items: center;
+ gap: 12rpx;
+}
+
+.health-pet-emoji {
+ font-size: 28rpx;
+}
+
+.health-pet-name {
+ font-size: 26rpx;
+ color: #333;
+}
+
+.health-status {
+ padding: 8rpx 16rpx;
+ border-radius: 20rpx;
+ font-size: 22rpx;
+}
+
+.health-status--healthy {
+ background: #e8f5e8;
+ color: #4caf50;
+}
+
+.health-status--warning {
+ background: #fff3e0;
+ color: #ff9800;
+}
+
+.health-status--sick {
+ background: #ffebee;
+ color: #f44336;
+}
+
+.health-actions {
+ text-align: center;
+ margin-top: 16rpx;
+}
+
+.health-action-text {
+ font-size: 24rpx;
+ color: #FF8A80;
+}