yvan
/
pet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
yvan 2025-08-13 14:04:52 +08:00
parent d505663f4a
commit 7d32f5d0f9
3 changed files with 157 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
pages/pets/pets.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view class="pets-container"> <view class="pets-container gradient-bg">
<!-- 标签切换容器 --> <!-- 标签切换容器 -->
<view class="tabs-container" v-if="petsList.length > 0"> <view class="tabs-container" v-if="petsList.length > 0">
<view class="tabs-header"> <view class="tabs-header">
@ -10,7 +10,7 @@
:key="pet.id" :key="pet.id"
@click="switchTab(index)" @click="switchTab(index)"
> >
<view class="tab-avatar">{{ getPetEmoji(pet.breed) }}</view> <view class="tab-avatar gradient-bg-primary">{{ getPetEmoji(pet.breed) }}</view>
<view class="tab-name">{{ pet.name }}</view> <view class="tab-name">{{ pet.name }}</view>
</view> </view>
<view class="add-tab" @click="addPet"> <view class="add-tab" @click="addPet">
@ -33,8 +33,15 @@
<view class="pet-header" @click="viewPetDetail(pet)"> <view class="pet-header" @click="viewPetDetail(pet)">
<!-- 左侧头像区域 --> <!-- 左侧头像区域 -->
<view class="pet-avatar-section"> <view class="pet-avatar-section">
<view class="pet-avatar"> <view class="pet-avatar-wrapper">
<text class="pet-emoji">{{ getPetEmoji(pet.breed) }}</text> <u-avatar
:text="getPetEmoji(pet.breed)"
size="90"
shape="circle"
bg-color="linear-gradient(135deg, #FF8A80, #FFB6C1)"
color="white"
font-size="45"
></u-avatar>
<view class="pet-status-ring" :class="`pet-status-ring--${pet.healthStatus || 'healthy'}`"></view> <view class="pet-status-ring" :class="`pet-status-ring--${pet.healthStatus || 'healthy'}`"></view>
</view> </view>
</view> </view>
@ -95,7 +102,7 @@
<view class="functions-section" v-if="petsList.length > 0"> <view class="functions-section" v-if="petsList.length > 0">
<scroll-view scroll-x class="functions-scroll" :show-scrollbar="false"> <scroll-view scroll-x class="functions-scroll" :show-scrollbar="false">
<view class="functions-container"> <view class="functions-container">
<view class="function-item" v-for="item in mainActionItems" :key="item.id" @click="handleAction(item.action, petsList[currentTabIndex])"> <view class="function-item btn-gradient radius-medium shadow-medium" v-for="item in mainActionItems" :key="item.id" @click="handleAction(item.action, petsList[currentTabIndex])">
<text class="function-icon">{{ item.icon }}</text> <text class="function-icon">{{ item.icon }}</text>
<text class="function-text">{{ item.text }}</text> <text class="function-text">{{ item.text }}</text>
</view> </view>
@ -116,32 +123,32 @@
<!-- 模块化卡片区域 --> <!-- 模块化卡片区域 -->
<view class="cards-section" v-if="petsList.length > 0"> <view class="cards-section" v-if="petsList.length > 0">
<!-- 家庭概览卡片 --> <!-- 家庭概览卡片 -->
<view class="overview-card"> <view class="overview-card card-style padding-large">
<view class="card-header"> <view class="card-header">
<text class="card-title">📊 家庭概览</text> <text class="card-title text-primary">📊 家庭概览</text>
<text class="card-subtitle">{{ petsList.length }}位家庭成员</text> <text class="card-subtitle text-muted">{{ petsList.length }}位家庭成员</text>
</view> </view>
<view class="overview-stats"> <view class="overview-stats">
<view class="overview-stat"> <view class="overview-stat">
<view class="overview-stat-number">{{ totalRecords }}</view> <view class="overview-stat-number text-primary">{{ totalRecords }}</view>
<view class="overview-stat-label">总记录</view> <view class="overview-stat-label text-secondary">总记录</view>
</view> </view>
<view class="overview-stat"> <view class="overview-stat">
<view class="overview-stat-number">¥{{ totalMonthlyExpense }}</view> <view class="overview-stat-number text-primary">¥{{ totalMonthlyExpense }}</view>
<view class="overview-stat-label">本月消费</view> <view class="overview-stat-label text-secondary">本月消费</view>
</view> </view>
<view class="overview-stat"> <view class="overview-stat">
<view class="overview-stat-number">{{ totalCompanionDays }}</view> <view class="overview-stat-number text-primary">{{ totalCompanionDays }}</view>
<view class="overview-stat-label">陪伴天数</view> <view class="overview-stat-label text-secondary">陪伴天数</view>
</view> </view>
</view> </view>
</view> </view>
<!-- 最近互动卡片 --> <!-- 最近互动卡片 -->
<view class="interactions-card"> <view class="interactions-card card-style padding-large">
<view class="card-header"> <view class="card-header">
<text class="card-title">💬 最近互动</text> <text class="card-title text-primary">💬 最近互动</text>
<text class="card-subtitle">今日活动</text> <text class="card-subtitle text-muted">今日活动</text>
</view> </view>
<view class="interactions-list"> <view class="interactions-list">
<view class="interaction-item" v-for="interaction in recentInteractions" :key="interaction.id"> <view class="interaction-item" v-for="interaction in recentInteractions" :key="interaction.id">
@ -159,10 +166,10 @@
</view> </view>
<!-- 健康状态卡片 --> <!-- 健康状态卡片 -->
<view class="health-card"> <view class="health-card card-style padding-large">
<view class="card-header"> <view class="card-header">
<text class="card-title">💚 健康状态</text> <text class="card-title text-primary">💚 健康状态</text>
<text class="card-subtitle">实时监控</text> <text class="card-subtitle text-muted">实时监控</text>
</view> </view>
<view class="health-list"> <view class="health-list">
<view class="health-item" v-for="pet in petsList" :key="pet.id"> <view class="health-item" v-for="pet in petsList" :key="pet.id">
@ -170,9 +177,12 @@
<text class="health-pet-emoji">{{ getPetEmoji(pet.breed) }}</text> <text class="health-pet-emoji">{{ getPetEmoji(pet.breed) }}</text>
<text class="health-pet-name">{{ pet.name }}</text> <text class="health-pet-name">{{ pet.name }}</text>
</view> </view>
<view class="health-status" :class="`health-status--${pet.healthStatus || 'healthy'}`"> <u-tag
<text class="health-status-text">{{ getHealthStatusText(pet.healthStatus) }}</text> :text="getHealthStatusText(pet.healthStatus)"
</view> :type="getHealthTagType(pet.healthStatus)"
shape="circle"
size="mini"
></u-tag>
</view> </view>
</view> </view>
<view class="health-actions"> <view class="health-actions">
@ -184,7 +194,7 @@
</view> </view>
<!-- 浮动添加按钮 --> <!-- 浮动添加按钮 -->
<view class="floating-add" @click="addRecord(petsList[currentTabIndex])"> <view class="floating-add btn-gradient text-white shadow-medium" @click="addRecord(petsList[currentTabIndex])">
<text class="floating-add-icon">📝</text> <text class="floating-add-icon">📝</text>
</view> </view>
</view> </view>
@ -505,7 +515,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.pets-container { .pets-container {
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
min-height: 100vh; min-height: 100vh;
padding-bottom: 120rpx; padding-bottom: 120rpx;
padding-top: 20rpx; padding-top: 20rpx;
@ -550,7 +559,6 @@ export default {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
border-radius: 24rpx; border-radius: 24rpx;
background: linear-gradient(135deg, #FF8A80, #FFB6C1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -704,23 +712,14 @@ export default {
text-align: left; text-align: left;
} }
.pet-avatar { .pet-avatar-wrapper {
width: 90rpx; position: relative;
height: 90rpx;
border-radius: 45rpx;
background: linear-gradient(135deg, #FF8A80, #FFB6C1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative;
box-shadow: 0 6rpx 20rpx rgba(255, 138, 128, 0.25);
flex-shrink: 0; flex-shrink: 0;
} }
.pet-emoji {
font-size: 45rpx;
}
.pet-status-ring { .pet-status-ring {
position: absolute; position: absolute;
top: -8rpx; top: -8rpx;
@ -814,11 +813,8 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 18rpx 8rpx; padding: 18rpx 8rpx;
border-radius: 16rpx;
background: linear-gradient(135deg, #FF8A80, #FFB6C1);
width: 145rpx; width: 145rpx;
flex-shrink: 0; flex-shrink: 0;
box-shadow: 0 6rpx 20rpx rgba(255, 138, 128, 0.3);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@ -893,11 +889,7 @@ export default {
.overview-card, .overview-card,
.interactions-card, .interactions-card,
.health-card { .health-card {
background: rgba(255, 255, 255, 0.95); margin-bottom: 16rpx;
border-radius: 24rpx;
padding: 30rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10rpx);
} }
.card-header { .card-header {
@ -910,12 +902,10 @@ export default {
.card-title { .card-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #333;
} }
.card-subtitle { .card-subtitle {
font-size: 24rpx; font-size: 24rpx;
color: #999;
} }
.overview-stats { .overview-stats {
@ -932,13 +922,11 @@ export default {
.overview-stat-number { .overview-stat-number {
font-size: 36rpx; font-size: 36rpx;
font-weight: 700; font-weight: 700;
color: #FF8A80;
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
.overview-stat-label { .overview-stat-label {
font-size: 22rpx; font-size: 22rpx;
color: #666;
} }
.floating-add { .floating-add {
@ -948,10 +936,7 @@ export default {
width: 112rpx; width: 112rpx;
height: 112rpx; height: 112rpx;
border-radius: 56rpx; border-radius: 56rpx;
background: linear-gradient(135deg, #FF8A80, #FFB6C1);
color: white;
border: none; border: none;
box-shadow: 0 8rpx 40rpx rgba(255, 138, 128, 0.4);
transition: transform 0.3s; transition: transform 0.3s;
z-index: 999; z-index: 999;
display: flex; display: flex;

117
styles/common.scss Normal file
View File

@ -0,0 +1,117 @@
/**
* 公共样式文件
* 定义项目中常用的样式类，提高代码复用性
*/
/* 渐变背景 */
.gradient-bg {
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
}
.gradient-bg-primary {
background: linear-gradient(135deg, #FF8A80, #FFB6C1);
}
/* 卡片样式 */
.card-style {
background: rgba(255, 255, 255, 0.95);
border-radius: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10rpx);
}
/* 按钮渐变 */
.btn-gradient {
background: linear-gradient(135deg, #FF8A80, #FFB6C1);
color: white;
border: none;
}
/* 阴影效果 */
.shadow-light {
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.2);
}
.shadow-medium {
box-shadow: 0 6rpx 20rpx rgba(255, 138, 128, 0.3);
}
.shadow-heavy {
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}
/* 圆角 */
.radius-small {
border-radius: 12rpx;
}
.radius-medium {
border-radius: 16rpx;
}
.radius-large {
border-radius: 24rpx;
}
.radius-round {
border-radius: 50%;
}
/* 间距 */
.margin-small {
margin: 16rpx;
}
.margin-medium {
margin: 24rpx;
}
.margin-large {
margin: 32rpx;
}
.padding-small {
padding: 16rpx;
}
.padding-medium {
padding: 24rpx;
}
.padding-large {
padding: 32rpx;
}
/* 文字颜色 */
.text-primary {
color: #FF8A80;
}
.text-secondary {
color: #666;
}
.text-muted {
color: #999;
}
.text-white {
color: white;
}
/* 背景透明度 */
.bg-transparent {
background: transparent;
}
.bg-white-light {
background: rgba(255, 255, 255, 0.1);
}
.bg-white-medium {
background: rgba(255, 255, 255, 0.85);
}
.bg-white-heavy {
background: rgba(255, 255, 255, 0.95);
}

3
uni.scss
View File

@ -78,3 +78,6 @@ $uni-font-size-paragraph:15px;
/* uView UI主题变量 */ /* uView UI主题变量 */
@import "uview-ui-next/theme.scss"; @import "uview-ui-next/theme.scss";
@import '@/uni_modules/uview-next/theme.scss'; @import '@/uni_modules/uview-next/theme.scss';
/* 项目公共样式 */
@import '@/styles/common.scss';