1
This commit is contained in:
+15
-7
@@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<view class="add-pet-container">
|
||||
<u-navbar title="添加宠物" left-icon="arrow-left" @left-click="goBack"></u-navbar>
|
||||
|
||||
<u-form :model="petForm" ref="petFormRef" :rules="rules" label-width="120">
|
||||
<u-card :padding="20" margin="20">
|
||||
<view class="avatar-section">
|
||||
@@ -104,10 +102,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
|
||||
chooseAvatar() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
@@ -188,7 +182,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-pet-container {
|
||||
background-color: #f8f9fa;
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@@ -206,4 +200,18 @@ export default {
|
||||
:deep(.u-form-item) {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
:deep(.u-card) {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
:deep(.u-button--primary) {
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
|
||||
border: none;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -372,7 +372,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.health-charts-container {
|
||||
background: linear-gradient(135deg, #FFF8F0 0%, #F8F9FA 100%);
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
+54
-14
@@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<view class="pet-detail-container">
|
||||
<u-navbar :title="petInfo.name || '宠物详情'" left-icon="arrow-left" @left-click="goBack">
|
||||
<template #right>
|
||||
<u-icon name="edit-pen" size="20" @click="editPet"></u-icon>
|
||||
</template>
|
||||
</u-navbar>
|
||||
|
||||
<!-- 头部操作栏 -->
|
||||
<view class="header-actions">
|
||||
<text class="page-title">{{ petInfo.name || '宠物详情' }}</text>
|
||||
<view class="edit-btn" @click="editPet">
|
||||
<text class="edit-text">编辑</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pet-header">
|
||||
<u-avatar :src="petInfo.avatar || '/static/default-pet.png'" size="80" shape="circle"></u-avatar>
|
||||
<view class="pet-basic-info">
|
||||
@@ -230,10 +232,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
|
||||
editPet() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/pets/edit-pet?id=${this.petId}`
|
||||
@@ -351,20 +349,62 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pet-detail-container {
|
||||
background-color: #f8f9fa;
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 20rpx 30rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
.page-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #FF8A80;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
|
||||
border-radius: 20rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.edit-text {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pet-header {
|
||||
background-color: white;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 0 30rpx 20rpx 30rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
.pet-basic-info {
|
||||
margin-left: 30rpx;
|
||||
flex: 1;
|
||||
|
||||
|
||||
:deep(.u-text) {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
+53
-16
@@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<view class="pet-records-container">
|
||||
<u-navbar :title="`${petInfo.name}的记录`" left-icon="arrow-left" @left-click="goBack">
|
||||
<template #right>
|
||||
<u-icon name="plus-circle" size="20" @click="addRecord"></u-icon>
|
||||
</template>
|
||||
</u-navbar>
|
||||
<!-- 头部操作栏 -->
|
||||
<view class="header-actions">
|
||||
<text class="page-title">{{ petInfo.name }}的记录</text>
|
||||
<view class="add-btn" @click="addRecord">
|
||||
<text class="add-text">添加</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<view class="filter-bar">
|
||||
@@ -414,11 +416,6 @@ export default {
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
return {
|
||||
...state,
|
||||
filterTabs,
|
||||
@@ -434,8 +431,7 @@ export default {
|
||||
onFilterChange,
|
||||
viewRecordDetail,
|
||||
addRecord,
|
||||
loadMoreRecords,
|
||||
goBack
|
||||
loadMoreRecords
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -466,13 +462,54 @@ function formatDateLabel(date) {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f8f9fa;
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 20rpx 30rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
.page-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #FF8A80;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
|
||||
border-radius: 20rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.add-text {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
background-color: #ffffff;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 0 30rpx 20rpx 30rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.records-scroll {
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<view class="pet-timeline-container">
|
||||
<u-navbar :title="`${petInfo.name}的成长时光`" left-icon="arrow-left" @left-click="goBack">
|
||||
<template #right>
|
||||
<u-icon name="calendar" size="20" @click="showCalendar"></u-icon>
|
||||
</template>
|
||||
</u-navbar>
|
||||
<!-- 头部操作栏 -->
|
||||
<view class="header-actions">
|
||||
<text class="page-title">{{ petInfo.name }}的成长时光</text>
|
||||
<view class="calendar-btn" @click="showCalendar">
|
||||
<text class="calendar-text">日历</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 宠物信息卡片 -->
|
||||
<view class="pet-info-card">
|
||||
@@ -429,7 +431,44 @@ export default {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f8f9fa;
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 20rpx 30rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
.page-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #FF8A80;
|
||||
}
|
||||
|
||||
.calendar-btn {
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
|
||||
border-radius: 20rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.calendar-text {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pet-info-card {
|
||||
|
||||
Reference in New Issue
Block a user