From d505663f4ac29765599fa20efa447d96b805bf19 Mon Sep 17 00:00:00 2001 From: yvan <8574526@qq.com> Date: Wed, 13 Aug 2025 11:59:01 +0800 Subject: [PATCH] 1 --- pages.json | 1 + pages/pets/pet-detail.vue | 124 ++++ pages/pets/pets.vue | 1362 ++++++++++++++++++------------------- 3 files changed, 797 insertions(+), 690 deletions(-) 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 @@ {{ pet.name }} - ➕ - 添加 + ➕ + 添加 - - - {{ 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 }} + + + + + + + {{ getPetEmoji(pet.breed) }} + + + + + + + + + {{ pet.name }} + + + + {{ pet.breed }} · {{ pet.age }}岁 · + {{ pet.constellation || '水瓶座' }} + {{ getConstellationIcon(pet.constellation || '水瓶座') }} + + + + 陪伴 {{ pet.companionDays }} 天 + + - {{ activity.type }} - - - - ❤️ 健康状态 - - - {{ 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 }} - 总记录数 + + + + + + 📊 家庭概览 + {{ petsList.length }}位家庭成员 - - ¥{{ 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; +}