1098 lines
24 KiB
Vue
1098 lines
24 KiB
Vue
<template>
|
||
<view class="pets-container">
|
||
<!-- 标签切换容器 -->
|
||
<view class="tabs-container" v-if="petsList.length > 0">
|
||
<view class="tabs-header">
|
||
<view
|
||
class="tab-btn"
|
||
:class="{ active: currentTabIndex === index }"
|
||
v-for="(pet, index) in petsList"
|
||
:key="pet.id"
|
||
@click="switchTab(index)"
|
||
>
|
||
<view class="tab-avatar">{{ getPetEmoji(pet.breed) }}</view>
|
||
<view class="tab-name">{{ pet.name }}</view>
|
||
</view>
|
||
<view class="add-tab" @click="addPet">
|
||
<text style="font-size: 40rpx; margin-bottom: 8rpx;">➕</text>
|
||
<text style="font-size: 20rpx;">添加</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 标签内容 -->
|
||
<view class="tab-content">
|
||
<view
|
||
class="tab-content-panel"
|
||
:class="{ active: currentTabIndex === index }"
|
||
v-for="(pet, index) in petsList"
|
||
:key="pet.id"
|
||
>
|
||
<!-- 宠物详情卡片 -->
|
||
<view class="pet-detail-card">
|
||
<view class="pet-main-avatar">
|
||
<text class="pet-emoji">{{ getPetEmoji(pet.breed) }}</text>
|
||
<view class="pet-status-ring" :class="pet.healthStatus || 'healthy'"></view>
|
||
</view>
|
||
<view class="pet-main-name">{{ pet.name }}</view>
|
||
<view class="pet-main-details">{{ pet.breed }} · {{ pet.age }}岁 · 陪伴{{ pet.companionDays }}天</view>
|
||
<view class="pet-main-tags">
|
||
<text
|
||
class="main-tag"
|
||
v-for="tag in (pet.personality || []).slice(0, 3)"
|
||
:key="tag"
|
||
>{{ tag }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 数据统计网格 -->
|
||
<view class="pet-stats-grid">
|
||
<view class="stat-card">
|
||
<text class="stat-icon">⚖️</text>
|
||
<view class="stat-value">{{ pet.weight || '未知' }}</view>
|
||
<view class="stat-label">当前体重</view>
|
||
</view>
|
||
<view class="stat-card">
|
||
<text class="stat-icon">📝</text>
|
||
<view class="stat-value">{{ getPetRecordsCount(pet.id) }}</view>
|
||
<view class="stat-label">记录数量</view>
|
||
</view>
|
||
<view class="stat-card">
|
||
<text class="stat-icon">💰</text>
|
||
<view class="stat-value">¥{{ getPetMonthlyExpense(pet.id) }}</view>
|
||
<view class="stat-label">本月消费</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作按钮面板 -->
|
||
<view class="pet-actions-panel">
|
||
<view class="action-card" @click="addRecord(pet)">
|
||
<text class="action-icon">📝</text>
|
||
<view class="action-text">添加记录</view>
|
||
</view>
|
||
<view class="action-card" @click="chatWithPet(pet)">
|
||
<text class="action-icon">💬</text>
|
||
<view class="action-text">AI聊天</view>
|
||
</view>
|
||
<view class="action-card" @click="viewHealth(pet)">
|
||
<text class="action-icon">📊</text>
|
||
<view class="action-text">健康档案</view>
|
||
</view>
|
||
<view class="action-card" @click="viewTimeline(pet)">
|
||
<text class="action-icon">📸</text>
|
||
<view class="action-text">成长时光</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 最近活动时间线 -->
|
||
<view class="pet-timeline">
|
||
<view class="timeline-title">⏰ 最近活动</view>
|
||
<view class="timeline-item" v-for="(activity, actIndex) in getPetRecentActivities(pet.id)" :key="actIndex">
|
||
<view class="timeline-dot"></view>
|
||
<view class="timeline-content">
|
||
<view class="timeline-text">{{ activity.text }}</view>
|
||
<view class="timeline-time">{{ activity.time }}</view>
|
||
</view>
|
||
<view class="timeline-type">{{ activity.type }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 健康状态面板 -->
|
||
<view class="pet-health-panel">
|
||
<view class="health-title">❤️ 健康状态</view>
|
||
<view class="health-indicators">
|
||
<view class="health-indicator">
|
||
<view class="health-value">{{ getHealthStatus(pet, 'overall') }}</view>
|
||
<view class="health-label">整体健康</view>
|
||
</view>
|
||
<view class="health-indicator">
|
||
<view class="health-value">{{ getHealthStatus(pet, 'activity') }}</view>
|
||
<view class="health-label">活动水平</view>
|
||
</view>
|
||
<view class="health-indicator">
|
||
<view class="health-value">{{ getHealthStatus(pet, 'appetite') }}</view>
|
||
<view class="health-label">食欲状态</view>
|
||
</view>
|
||
<view class="health-indicator">
|
||
<view class="health-value">{{ getHealthStatus(pet, 'mood') }}</view>
|
||
<view class="health-label">情绪状态</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" v-else>
|
||
<text class="empty-emoji">🐾</text>
|
||
<text class="empty-title">还没有小伙伴呢</text>
|
||
<text class="empty-desc">添加你的第一只宠物，开始记录美好时光吧~</text>
|
||
<view class="add-first-pet-btn" @click="addPet">
|
||
<text class="add-btn-text">添加第一只宠物</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 家庭概览 -->
|
||
<view class="summary-section" v-if="petsList.length > 0">
|
||
<view class="summary-title">📊 家庭概览</view>
|
||
<view class="summary-stats">
|
||
<view class="summary-card">
|
||
<view class="summary-number">{{ totalRecords }}</view>
|
||
<view class="summary-label">总记录数</view>
|
||
</view>
|
||
<view class="summary-card">
|
||
<view class="summary-number">¥{{ totalMonthlyExpense }}</view>
|
||
<view class="summary-label">本月消费</view>
|
||
</view>
|
||
<view class="summary-card">
|
||
<view class="summary-number">{{ petsList.length }}</view>
|
||
<view class="summary-label">家庭成员</view>
|
||
</view>
|
||
<view class="summary-card">
|
||
<view class="summary-number">{{ upcomingReminders }}</view>
|
||
<view class="summary-label">待办提醒</view>
|
||
</view>
|
||
</view>
|
||
<view class="quick-actions">
|
||
<view class="quick-btn" @click="navigateToRecords">
|
||
<text class="quick-icon">📝</text>
|
||
<text class="quick-text">快速记录</text>
|
||
</view>
|
||
<view class="quick-btn" @click="navigateToStats">
|
||
<text class="quick-icon">💰</text>
|
||
<text class="quick-text">记账</text>
|
||
</view>
|
||
<view class="quick-btn" @click="takePhoto">
|
||
<text class="quick-icon">📸</text>
|
||
<text class="quick-text">拍照</text>
|
||
</view>
|
||
<view class="quick-btn" @click="navigateToAdoption">
|
||
<text class="quick-icon">🏥</text>
|
||
<text class="quick-text">领养</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 浮动添加按钮 -->
|
||
<view class="floating-add" @click="addRecord(petsList[currentTabIndex])">
|
||
<text class="floating-add-icon">📝</text>
|
||
</view>
|
||
|
||
<!-- 快捷操作弹窗 -->
|
||
<u-popup v-model="showQuickActions" mode="bottom" border-radius="20">
|
||
<view class="quick-actions-popup">
|
||
<view class="popup-header">
|
||
<text class="popup-title">快捷操作</text>
|
||
<u-icon name="close" size="20" @click="showQuickActions = false"></u-icon>
|
||
</view>
|
||
<view class="quick-actions-grid">
|
||
<view class="quick-action-item" @click="navigateToRecords">
|
||
<u-icon name="list" size="24" color="#81C784"></u-icon>
|
||
<text class="quick-action-text">所有记录</text>
|
||
</view>
|
||
<view class="quick-action-item" @click="navigateToStats">
|
||
<u-icon name="bar-chart" size="24" color="#64B5F6"></u-icon>
|
||
<text class="quick-action-text">数据统计</text>
|
||
</view>
|
||
<view class="quick-action-item" @click="navigateToReminders">
|
||
<u-icon name="bell" size="24" color="#FFB74D"></u-icon>
|
||
<text class="quick-action-text">提醒事项</text>
|
||
</view>
|
||
<view class="quick-action-item" @click="navigateToSettings">
|
||
<u-icon name="setting" size="24" color="#FF8A80"></u-icon>
|
||
<text class="quick-action-text">设置</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
petsList: [],
|
||
showQuickActions: false,
|
||
totalRecords: 0,
|
||
totalDays: 0,
|
||
upcomingReminders: 0,
|
||
currentTabIndex: 0,
|
||
petRecords: [],
|
||
petExpenses: []
|
||
}
|
||
},
|
||
onShow() {
|
||
this.loadPets()
|
||
this.loadStatistics()
|
||
this.loadPetRecords()
|
||
this.loadPetExpenses()
|
||
},
|
||
computed: {
|
||
// 计算总陪伴天数
|
||
totalCompanionDays() {
|
||
return this.petsList.reduce((total, pet) => total + (pet.companionDays || 0), 0)
|
||
},
|
||
// 计算总月消费
|
||
totalMonthlyExpense() {
|
||
return this.petExpenses.reduce((total, expense) => total + (expense.amount || 0), 0)
|
||
}
|
||
},
|
||
methods: {
|
||
// 标签切换
|
||
switchTab(index) {
|
||
this.currentTabIndex = index
|
||
},
|
||
|
||
// 获取宠物表情符号
|
||
getPetEmoji(breed) {
|
||
const emojiMap = {
|
||
'橘猫': '🐱',
|
||
'金毛': '🐶',
|
||
'垂耳兔': '🐰',
|
||
'哈士奇': '🐕',
|
||
'波斯猫': '😸',
|
||
'泰迪': '🐩',
|
||
'仓鼠': '🐹',
|
||
'鹦鹉': '🦜'
|
||
}
|
||
return emojiMap[breed] || '🐾'
|
||
},
|
||
|
||
loadPets() {
|
||
try {
|
||
let pets = uni.getStorageSync('pets') || []
|
||
|
||
// 如果没有宠物数据，添加一些模拟数据
|
||
if (pets.length === 0) {
|
||
pets = [
|
||
{
|
||
id: 1,
|
||
name: '小橘',
|
||
breed: '橘猫',
|
||
age: 2,
|
||
companionDays: 365,
|
||
avatar: '/static/default-pet.png',
|
||
gender: '公',
|
||
weight: '4.5kg',
|
||
birthday: '2022-01-15',
|
||
healthStatus: 'healthy',
|
||
personality: ['活泼', '粘人', '贪吃'],
|
||
lastRecord: '2024-01-15'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '小白',
|
||
breed: '金毛',
|
||
age: 3,
|
||
companionDays: 1095,
|
||
avatar: '/static/default-pet.png',
|
||
gender: '母',
|
||
weight: '25kg',
|
||
birthday: '2021-03-20',
|
||
healthStatus: 'healthy',
|
||
personality: ['温顺', '聪明', '忠诚'],
|
||
lastRecord: '2024-01-14'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '小灰',
|
||
breed: '垂耳兔',
|
||
age: 1,
|
||
companionDays: 180,
|
||
avatar: '/static/default-pet.png',
|
||
gender: '母',
|
||
weight: '1.2kg',
|
||
birthday: '2023-06-15',
|
||
healthStatus: 'healthy',
|
||
personality: ['安静', '可爱', '乖巧'],
|
||
lastRecord: '2024-01-13'
|
||
}
|
||
]
|
||
// 保存模拟数据到本地存储
|
||
uni.setStorageSync('pets', pets)
|
||
}
|
||
|
||
this.petsList = pets
|
||
} catch (error) {
|
||
console.error('加载宠物列表失败', error)
|
||
this.petsList = []
|
||
}
|
||
},
|
||
|
||
loadPetRecords() {
|
||
try {
|
||
const records = uni.getStorageSync('petRecords') || []
|
||
this.petRecords = records
|
||
} catch (error) {
|
||
console.error('加载宠物记录失败', error)
|
||
this.petRecords = []
|
||
}
|
||
},
|
||
|
||
loadPetExpenses() {
|
||
try {
|
||
// 模拟宠物消费数据
|
||
const expenses = [
|
||
{ petId: 1, amount: 580, month: '2024-01' },
|
||
{ petId: 2, amount: 890, month: '2024-01' },
|
||
{ petId: 3, amount: 120, month: '2024-01' }
|
||
]
|
||
this.petExpenses = expenses
|
||
} catch (error) {
|
||
console.error('加载宠物消费失败', error)
|
||
this.petExpenses = []
|
||
}
|
||
},
|
||
|
||
loadStatistics() {
|
||
try {
|
||
// 加载统计数据
|
||
const records = uni.getStorageSync('petRecords') || []
|
||
this.totalRecords = records.length || 190
|
||
|
||
// 计算总陪伴天数
|
||
this.totalDays = this.petsList.reduce((total, pet) => total + (pet.companionDays || 0), 0)
|
||
|
||
// 模拟待办提醒数量
|
||
this.upcomingReminders = Math.floor(Math.random() * 5) + 1
|
||
} catch (error) {
|
||
console.error('加载统计数据失败', error)
|
||
}
|
||
},
|
||
|
||
// 获取宠物记录数量
|
||
getPetRecordsCount(petId) {
|
||
const petRecords = this.petRecords.filter(record => record.petId === petId)
|
||
const mockCounts = { 1: 89, 2: 67, 3: 34 }
|
||
return petRecords.length || mockCounts[petId] || 0
|
||
},
|
||
|
||
// 获取宠物月消费
|
||
getPetMonthlyExpense(petId) {
|
||
const expense = this.petExpenses.find(exp => exp.petId === petId)
|
||
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] || []
|
||
},
|
||
|
||
// 获取健康状态
|
||
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] : '正常'
|
||
},
|
||
|
||
getHealthIcon(status) {
|
||
const iconMap = {
|
||
healthy: 'checkmark',
|
||
warning: 'warning',
|
||
sick: 'close'
|
||
}
|
||
return iconMap[status] || 'checkmark'
|
||
},
|
||
|
||
addPet() {
|
||
uni.navigateTo({
|
||
url: '/pages/pets/add-pet'
|
||
})
|
||
},
|
||
|
||
viewPetDetail(pet) {
|
||
uni.navigateTo({
|
||
url: `/pages/pets/pet-detail?id=${pet.id}`
|
||
})
|
||
},
|
||
|
||
chatWithPet(pet) {
|
||
uni.navigateTo({
|
||
url: `/pages/pets/pet-chat-simple?petId=${pet.id}`
|
||
})
|
||
},
|
||
|
||
addRecord(pet) {
|
||
uni.navigateTo({
|
||
url: `/pages/pets/select-record-type?petId=${pet.id}`
|
||
})
|
||
},
|
||
|
||
viewHealth(pet) {
|
||
uni.navigateTo({
|
||
url: `/pages/pets/health-charts?petId=${pet.id}`
|
||
})
|
||
},
|
||
|
||
viewTimeline(pet) {
|
||
uni.navigateTo({
|
||
url: `/pages/pets/pet-timeline?petId=${pet.id}`
|
||
})
|
||
},
|
||
|
||
// 导航方法
|
||
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'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.pets-container {
|
||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
||
min-height: 100vh;
|
||
padding-bottom: 20rpx;
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
/* 标签切换容器 */
|
||
.tabs-container {
|
||
background: rgba(255, 255, 255, 0.85);
|
||
margin: 20rpx 30rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
backdrop-filter: blur(20rpx);
|
||
overflow: hidden;
|
||
box-shadow: 0 16rpx 64rpx rgba(255, 138, 128, 0.2);
|
||
border: 2rpx solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.tabs-header {
|
||
display: flex;
|
||
background: linear-gradient(135deg, rgba(255, 138, 128, 0.2) 0%, rgba(255, 182, 193, 0.2) 100%);
|
||
padding: 10rpx;
|
||
border-radius: 40rpx 40rpx 0 0;
|
||
position: relative;
|
||
}
|
||
|
||
.tab-btn {
|
||
flex: 1;
|
||
background: none;
|
||
border: none;
|
||
padding: 24rpx 16rpx;
|
||
text-align: center;
|
||
border-radius: 30rpx;
|
||
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-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;
|
||
}
|
||
}
|
||
|
||
.add-tab {
|
||
width: 120rpx;
|
||
background: none;
|
||
border: none;
|
||
padding: 24rpx 16rpx;
|
||
text-align: center;
|
||
border-radius: 30rpx;
|
||
transition: all 0.3s ease;
|
||
color: #FF8A80;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&:active {
|
||
background: rgba(255, 138, 128, 0.15);
|
||
}
|
||
}
|
||
|
||
/* 标签内容 */
|
||
.tab-content {
|
||
padding: 50rpx;
|
||
}
|
||
|
||
.tab-content-panel {
|
||
display: none;
|
||
|
||
&.active {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
/* 宠物详情卡片 */
|
||
.pet-detail-card {
|
||
text-align: center;
|
||
margin-bottom: 50rpx;
|
||
|
||
.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-emoji {
|
||
font-size: 80rpx;
|
||
}
|
||
|
||
.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;
|
||
|
||
&.healthy {
|
||
border-color: #4CAF50;
|
||
border-top-color: transparent;
|
||
}
|
||
|
||
&.warning {
|
||
border-color: #FFB74D;
|
||
border-top-color: transparent;
|
||
}
|
||
|
||
&.sick {
|
||
border-color: #FF8A80;
|
||
border-top-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pet-main-name {
|
||
font-size: 44rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.pet-main-details {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.pet-main-tags {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 40rpx;
|
||
flex-wrap: wrap;
|
||
|
||
.main-tag {
|
||
background: #E8F5E8;
|
||
color: #4CAF50;
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 24rpx;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* 数据统计网格 */
|
||
.pet-stats-grid {
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 操作按钮面板 */
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 时间线 */
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 健康状态面板 */
|
||
.pet-health-panel {
|
||
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 空状态 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
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 {
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 浮动添加按钮 */
|
||
.floating-add {
|
||
position: fixed;
|
||
bottom: 60rpx;
|
||
right: 40rpx;
|
||
width: 112rpx;
|
||
height: 112rpx;
|
||
border-radius: 56rpx;
|
||
background: linear-gradient(135deg, #FF8A80, #FFB6C1);
|
||
color: white;
|
||
border: none;
|
||
box-shadow: 0 8rpx 40rpx rgba(255, 138, 128, 0.4);
|
||
transition: transform 0.3s;
|
||
z-index: 999;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 响应式适配 */
|
||
@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;
|
||
}
|
||
}
|
||
|
||
/* 强制保持明亮主题，不受系统暗黑模式影响 */
|
||
</style>
|