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 15:40:19 +08:00
parent 479a246518
commit da67ef6214
10 changed files with 458 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
pages.json
View File

@ -20,7 +20,7 @@
"path": "pages/assistant/knowledge", "path": "pages/assistant/knowledge",
"style": { "style": {
"navigationBarTitleText": "宠物知识库", "navigationBarTitleText": "宠物知识库",
"navigationBarBackgroundColor": "#81C784", "navigationBarBackgroundColor": "#FF8A80",
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
}, },
@ -28,16 +28,16 @@
"path": "pages/adoption/adoption", "path": "pages/adoption/adoption",
"style": { "style": {
"navigationBarTitleText": "领养专区", "navigationBarTitleText": "领养专区",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#FF8A80",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "white"
} }
}, },
{ {
"path": "pages/profile/profile", "path": "pages/profile/profile",
"style": { "style": {
"navigationBarTitleText": "我的", "navigationBarTitleText": "我的",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#FF8A80",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "white"
} }
}, },
{ {
@ -60,8 +60,8 @@
"path": "pages/pets/add-record", "path": "pages/pets/add-record",
"style": { "style": {
"navigationBarTitleText": "添加记录", "navigationBarTitleText": "添加记录",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#FF8A80",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "white"
} }
}, },
@ -77,8 +77,8 @@
"path": "pages/pets/add-record-enhanced", "path": "pages/pets/add-record-enhanced",
"style": { "style": {
"navigationBarTitleText": "添加记录", "navigationBarTitleText": "添加记录",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#FF8A80",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "white"
} }
}, },
{ {
@ -117,7 +117,7 @@
"path": "pages/pets/pet-timeline", "path": "pages/pets/pet-timeline",
"style": { "style": {
"navigationBarTitleText": "成长时光", "navigationBarTitleText": "成长时光",
"navigationBarBackgroundColor": "#FFB74D", "navigationBarBackgroundColor": "#FF8A80",
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
}, },
@ -125,7 +125,7 @@
"path": "pages/pets/health-charts", "path": "pages/pets/health-charts",
"style": { "style": {
"navigationBarTitleText": "健康档案", "navigationBarTitleText": "健康档案",
"navigationBarBackgroundColor": "#81C784", "navigationBarBackgroundColor": "#FF8A80",
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
}, },
@ -133,7 +133,7 @@
"path": "pages/pets/pet-personality", "path": "pages/pets/pet-personality",
"style": { "style": {
"navigationBarTitleText": "性格预设", "navigationBarTitleText": "性格预设",
"navigationBarBackgroundColor": "#64B5F6", "navigationBarBackgroundColor": "#FF8A80",
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
}, },

180
pages/adoption/adoption.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<view class="adoption-container"> <view class="adoption-container">
<u-navbar title="领养专区" :border="false" bg-color="#ff6b6b"> <view class="search-container">
<template #right> <u-search placeholder="搜索宠物品种或地区" v-model="searchKeyword" @search="searchPets"></u-search>
<u-icon name="plus" color="white" size="20" @click="publishAdoption"></u-icon> <view class="publish-btn" @click="publishAdoption">
</template> <text class="publish-text">发布</text>
</u-navbar> </view>
</view>
<u-search placeholder="搜索宠物品种或地区" v-model="searchKeyword" @search="searchPets"></u-search>
<view class="filter-bar"> <view class="filter-bar">
<u-button v-for="filter in filters" :key="filter.key" <u-button v-for="filter in filters" :key="filter.key"
@ -19,22 +18,26 @@
</view> </view>
<scroll-view class="adoption-list" scroll-y="true"> <scroll-view class="adoption-list" scroll-y="true">
<u-card v-for="pet in filteredPets" :key="pet.id" :margin="20" :padding="0" @click="viewDetail(pet)"> <view v-for="pet in filteredPets" :key="pet.id" class="pet-card" @click="viewDetail(pet)">
<view class="pet-adoption-item"> <view class="pet-adoption-item">
<u-avatar :src="pet.avatar" size="80" shape="square"></u-avatar> <view class="pet-avatar">
<image :src="pet.avatar || '/static/default-pet.png'" class="avatar-image" mode="aspectFill"></image>
</view>
<view class="pet-info"> <view class="pet-info">
<u-text :text="pet.name" type="primary" size="16" bold></u-text> <text class="pet-name">{{ pet.name }}</text>
<u-text :text="`${pet.breed} · ${pet.age}岁 · ${pet.gender}`" type="info" size="14"></u-text> <text class="pet-details">{{ pet.breed }} · {{ pet.age }}岁 · {{ pet.gender }}</text>
<u-text :text="pet.location" type="tips" size="12"></u-text> <text class="pet-location">{{ pet.location }}</text>
<view class="pet-tags"> <view class="pet-tags">
<u-tag :text="pet.status" :type="pet.status === '待领养' ? 'success' : 'warning'" size="mini"></u-tag> <view class="status-tag" :class="{ 'available': pet.status === '待领养' }">
<text class="tag-text">{{ pet.status }}</text>
</view>
</view> </view>
</view> </view>
<view class="contact-btn"> <view class="contact-btn" @click.stop="contact(pet)">
<u-button text="联系" type="primary" size="mini" @click.stop="contact(pet)"></u-button> <text class="btn-text">联系</text>
</view> </view>
</view> </view>
</u-card> </view>
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
@ -136,45 +139,172 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.adoption-container { .adoption-container {
background-color: #f8f9fa; background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
min-height: 100vh; min-height: 100vh;
} }
.filter-bar { .search-container {
background-color: white; background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
margin: 20rpx 30rpx;
border-radius: 24rpx;
padding: 20rpx; padding: 20rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
gap: 16rpx;
.publish-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);
}
.publish-text {
font-size: 28rpx;
color: #ffffff;
font-weight: 500;
}
}
}
.filter-bar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
margin: 20rpx 30rpx;
border-radius: 24rpx;
padding: 24rpx;
display: flex; display: flex;
gap: 20rpx; gap: 20rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3);
:deep(.u-button) { :deep(.u-button) {
margin: 0; margin: 0;
background: rgba(255, 138, 128, 0.1);
border: 2rpx solid rgba(255, 138, 128, 0.3);
border-radius: 20rpx;
}
: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);
} }
} }
.adoption-list { .adoption-list {
height: calc(100vh - 300rpx); height: calc(100vh - 300rpx);
padding: 0 30rpx;
}
.pet-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
margin: 20rpx 0;
border-radius: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.3);
}
} }
.pet-adoption-item { .pet-adoption-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20rpx; padding: 24rpx;
.pet-avatar {
width: 120rpx;
height: 120rpx;
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.2);
.avatar-image {
width: 100%;
height: 100%;
}
}
.pet-info { .pet-info {
flex: 1; flex: 1;
margin-left: 20rpx; margin-left: 24rpx;
.pet-tags { .pet-name {
margin-top: 10rpx; font-size: 32rpx;
font-weight: 600;
color: #FF8A80;
display: block;
margin-bottom: 8rpx;
} }
:deep(.u-text) { .pet-details {
font-size: 28rpx;
color: #666666;
display: block;
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
.pet-location {
font-size: 24rpx;
color: #999999;
display: block;
margin-bottom: 16rpx;
}
.pet-tags {
.status-tag {
background: rgba(255, 193, 7, 0.1);
border: 2rpx solid rgba(255, 193, 7, 0.3);
border-radius: 16rpx;
padding: 8rpx 16rpx;
display: inline-block;
&.available {
background: rgba(76, 175, 80, 0.1);
border-color: rgba(76, 175, 80, 0.3);
.tag-text {
color: #4CAF50;
}
}
.tag-text {
font-size: 24rpx;
color: #FFC107;
font-weight: 500;
}
}
}
} }
.contact-btn { .contact-btn {
margin-left: 20rpx; 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);
}
.btn-text {
font-size: 28rpx;
color: #ffffff;
font-weight: 500;
}
} }
} }
</style> </style>

95
pages/assistant/knowledge.vue
View File

@ -1,24 +1,26 @@
<template> <template>
<view class="knowledge-container"> <view class="knowledge-container">
<u-navbar title="宠物知识库" left-icon="arrow-left" @left-click="goBack"></u-navbar> <view class="search-container">
<u-search placeholder="搜索知识" v-model="searchKeyword" @search="searchKnowledge" @custom="searchKnowledge"></u-search>
<u-search placeholder="搜索知识" v-model="searchKeyword" @search="searchKnowledge" @custom="searchKnowledge"></u-search> </view>
<view class="category-tabs"> <view class="category-tabs">
<u-tabs :list="categories" @click="switchCategory" :current="currentCategory"></u-tabs> <u-tabs :list="categories" @click="switchCategory" :current="currentCategory"></u-tabs>
</view> </view>
<scroll-view class="knowledge-list" scroll-y="true"> <scroll-view class="knowledge-list" scroll-y="true">
<u-card v-for="item in filteredKnowledge" :key="item.id" :margin="20" :padding="20" @click="viewDetail(item)"> <view v-for="item in filteredKnowledge" :key="item.id" class="knowledge-card" @click="viewDetail(item)">
<view class="knowledge-item"> <view class="knowledge-item">
<u-text :text="item.title" type="primary" size="16" bold></u-text> <text class="knowledge-title">{{ item.title }}</text>
<u-text :text="item.summary" type="info" size="14" margin="10rpx 0"></u-text> <text class="knowledge-summary">{{ item.summary }}</text>
<view class="knowledge-meta"> <view class="knowledge-meta">
<u-tag :text="item.category" type="info" size="mini"></u-tag> <view class="category-tag">
<u-text :text="item.readCount + '次阅读'" type="tips" size="12"></u-text> <text class="tag-text">{{ item.category }}</text>
</view>
<text class="read-count">{{ item.readCount }}次阅读</text>
</view> </view>
</view> </view>
</u-card> </view>
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
@ -86,10 +88,6 @@ export default {
} }
}, },
methods: { methods: {
goBack() {
uni.navigateBack()
},
switchCategory(item) { switchCategory(item) {
this.currentCategory = item.index this.currentCategory = item.index
}, },
@ -109,25 +107,90 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.knowledge-container { .knowledge-container {
background-color: #f8f9fa; background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
min-height: 100vh; min-height: 100vh;
} }
.search-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
margin: 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);
}
.category-tabs { .category-tabs {
background-color: white; background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
margin: 20rpx 30rpx;
border-radius: 24rpx;
padding: 20rpx 0; padding: 20rpx 0;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3);
} }
.knowledge-list { .knowledge-list {
height: calc(100vh - 300rpx); height: calc(100vh - 300rpx);
padding: 0 30rpx;
}
.knowledge-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
margin: 20rpx 0;
border-radius: 24rpx;
padding: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.3);
}
} }
.knowledge-item { .knowledge-item {
.knowledge-title {
font-size: 32rpx;
font-weight: 600;
color: #FF8A80;
display: block;
margin-bottom: 16rpx;
}
.knowledge-summary {
font-size: 28rpx;
color: #666666;
line-height: 1.4;
display: block;
margin-bottom: 20rpx;
}
.knowledge-meta { .knowledge-meta {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 20rpx;
.category-tag {
background: rgba(255, 138, 128, 0.1);
border: 2rpx solid rgba(255, 138, 128, 0.3);
border-radius: 16rpx;
padding: 8rpx 16rpx;
.tag-text {
font-size: 24rpx;
color: #FF8A80;
font-weight: 500;
}
}
.read-count {
font-size: 24rpx;
color: #999999;
}
} }
} }
</style> </style>

22
pages/pets/add-pet.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<view class="add-pet-container"> <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-form :model="petForm" ref="petFormRef" :rules="rules" label-width="120">
<u-card :padding="20" margin="20"> <u-card :padding="20" margin="20">
<view class="avatar-section"> <view class="avatar-section">
@ -104,10 +102,6 @@ export default {
} }
}, },
methods: { methods: {
goBack() {
uni.navigateBack()
},
chooseAvatar() { chooseAvatar() {
uni.chooseImage({ uni.chooseImage({
count: 1, count: 1,
@ -188,7 +182,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.add-pet-container { .add-pet-container {
background-color: #f8f9fa; background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
min-height: 100vh; min-height: 100vh;
} }
@ -206,4 +200,18 @@ export default {
:deep(.u-form-item) { :deep(.u-form-item) {
margin-bottom: 30rpx; 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> </style>

2
pages/pets/health-charts.vue
View File

@ -372,7 +372,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.health-charts-container { .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; min-height: 100vh;
} }

62
pages/pets/pet-detail.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<view class="pet-detail-container"> <view class="pet-detail-container">
<u-navbar :title="petInfo.name || '宠物详情'" left-icon="arrow-left" @left-click="goBack"> <!-- 头部操作栏 -->
<template #right> <view class="header-actions">
<u-icon name="edit-pen" size="20" @click="editPet"></u-icon> <text class="page-title">{{ petInfo.name || '宠物详情' }}</text>
</template> <view class="edit-btn" @click="editPet">
</u-navbar> <text class="edit-text">编辑</text>
</view>
</view>
<view class="pet-header"> <view class="pet-header">
<u-avatar :src="petInfo.avatar || '/static/default-pet.png'" size="80" shape="circle"></u-avatar> <u-avatar :src="petInfo.avatar || '/static/default-pet.png'" size="80" shape="circle"></u-avatar>
@ -230,10 +232,6 @@ export default {
} }
}, },
goBack() {
uni.navigateBack()
},
editPet() { editPet() {
uni.navigateTo({ uni.navigateTo({
url: `/pages/pets/edit-pet?id=${this.petId}` url: `/pages/pets/edit-pet?id=${this.petId}`
@ -351,15 +349,57 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.pet-detail-container { .pet-detail-container {
background-color: #f8f9fa; background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
min-height: 100vh; 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 { .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; padding: 30rpx;
display: flex; display: flex;
align-items: center; 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 { .pet-basic-info {
margin-left: 30rpx; margin-left: 30rpx;

69
pages/pets/pet-records.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<view class="pet-records-container"> <view class="pet-records-container">
<u-navbar :title="`${petInfo.name}的记录`" left-icon="arrow-left" @left-click="goBack"> <!-- 头部操作栏 -->
<template #right> <view class="header-actions">
<u-icon name="plus-circle" size="20" @click="addRecord"></u-icon> <text class="page-title">{{ petInfo.name }}的记录</text>
</template> <view class="add-btn" @click="addRecord">
</u-navbar> <text class="add-text">添加</text>
</view>
</view>
<!-- 筛选栏 --> <!-- 筛选栏 -->
<view class="filter-bar"> <view class="filter-bar">
@ -414,11 +416,6 @@ export default {
}, 1000) }, 1000)
} }
// 返回上一页
const goBack = () => {
uni.navigateBack()
}
return { return {
...state, ...state,
filterTabs, filterTabs,
@ -434,8 +431,7 @@ export default {
onFilterChange, onFilterChange,
viewRecordDetail, viewRecordDetail,
addRecord, addRecord,
loadMoreRecords, loadMoreRecords
goBack
} }
} }
} }
@ -466,13 +462,54 @@ function formatDateLabel(date) {
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; 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 { .filter-bar {
background-color: #ffffff; background: rgba(255, 255, 255, 0.95);
padding: 0 20px; backdrop-filter: blur(20rpx);
border-bottom: 1px solid #f0f0f0; 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 { .records-scroll {

51
pages/pets/pet-timeline.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<view class="pet-timeline-container"> <view class="pet-timeline-container">
<u-navbar :title="`${petInfo.name}的成长时光`" left-icon="arrow-left" @left-click="goBack"> <!-- 头部操作栏 -->
<template #right> <view class="header-actions">
<u-icon name="calendar" size="20" @click="showCalendar"></u-icon> <text class="page-title">{{ petInfo.name }}的成长时光</text>
</template> <view class="calendar-btn" @click="showCalendar">
</u-navbar> <text class="calendar-text">日历</text>
</view>
</view>
<!-- 宠物信息卡片 --> <!-- 宠物信息卡片 -->
<view class="pet-info-card"> <view class="pet-info-card">
@ -429,7 +431,44 @@ export default {
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; 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 { .pet-info-card {

61
pages/profile/profile.vue
View File

@ -80,77 +80,90 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
background-color: #f8f9fa; background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
min-height: 100vh; min-height: 100vh;
} }
.header {
padding: 20rpx 30rpx;
background-color: white;
.title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
}
.user-info { .user-info {
background-color: white; background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
margin: 20rpx 30rpx;
border-radius: 24rpx;
padding: 40rpx 30rpx; padding: 40rpx 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20rpx; box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3);
.avatar { .avatar {
width: 120rpx; width: 120rpx;
height: 120rpx; height: 120rpx;
border-radius: 60rpx; border-radius: 60rpx;
margin-right: 30rpx; margin-right: 30rpx;
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.2);
} }
.nickname { .nickname {
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: 600;
color: #333; color: #FF8A80;
} }
} }
.login-section { .login-section {
background-color: white; background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
margin: 20rpx 30rpx;
border-radius: 24rpx;
padding: 40rpx 30rpx; padding: 40rpx 30rpx;
margin-bottom: 20rpx; box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3);
.login-btn { .login-btn {
background-color: #07c160; background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
color: white; color: white;
border-radius: 10rpx; border-radius: 24rpx;
font-size: 32rpx; font-size: 32rpx;
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
border: none;
} }
} }
.menu-list { .menu-list {
background-color: white; background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
margin: 20rpx 30rpx;
border-radius: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3);
overflow: hidden;
.menu-item { .menu-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 40rpx 30rpx; padding: 40rpx 30rpx;
border-bottom: 1rpx solid #f0f0f0; border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
&:active {
background: rgba(255, 138, 128, 0.1);
}
.menu-text { .menu-text {
font-size: 30rpx; font-size: 30rpx;
color: #333; color: #333333;
font-weight: 500;
} }
.menu-arrow { .menu-arrow {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #FF8A80;
font-weight: 600;
} }
} }
} }

1
prompts/宠物小程序开发助手_优化版.md
View File

@ -15,7 +15,6 @@
"状态管理": "Pinia + 本地存储策略", "状态管理": "Pinia + 本地存储策略",
"工具函数": "uni.$u工具库 + 自定义utils", "工具函数": "uni.$u工具库 + 自定义utils",
"样式方案": "SCSS + uni.scss变量系统", "样式方案": "SCSS + uni.scss变量系统",
"数据持久化": "uni.setStorageSync + 数据版本管理"
} }
``` ```