This commit is contained in:
parent
479a246518
commit
da67ef6214
24
pages.json
24
pages.json
|
|
@ -20,7 +20,7 @@
|
|||
"path": "pages/assistant/knowledge",
|
||||
"style": {
|
||||
"navigationBarTitleText": "宠物知识库",
|
||||
"navigationBarBackgroundColor": "#81C784",
|
||||
"navigationBarBackgroundColor": "#FF8A80",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
|
|
@ -28,16 +28,16 @@
|
|||
"path": "pages/adoption/adoption",
|
||||
"style": {
|
||||
"navigationBarTitleText": "领养专区",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
"navigationBarBackgroundColor": "#FF8A80",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/profile",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
"navigationBarBackgroundColor": "#FF8A80",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -60,8 +60,8 @@
|
|||
"path": "pages/pets/add-record",
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加记录",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
"navigationBarBackgroundColor": "#FF8A80",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -77,8 +77,8 @@
|
|||
"path": "pages/pets/add-record-enhanced",
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加记录",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
"navigationBarBackgroundColor": "#FF8A80",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
"path": "pages/pets/pet-timeline",
|
||||
"style": {
|
||||
"navigationBarTitleText": "成长时光",
|
||||
"navigationBarBackgroundColor": "#FFB74D",
|
||||
"navigationBarBackgroundColor": "#FF8A80",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
"path": "pages/pets/health-charts",
|
||||
"style": {
|
||||
"navigationBarTitleText": "健康档案",
|
||||
"navigationBarBackgroundColor": "#81C784",
|
||||
"navigationBarBackgroundColor": "#FF8A80",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
"path": "pages/pets/pet-personality",
|
||||
"style": {
|
||||
"navigationBarTitleText": "性格预设",
|
||||
"navigationBarBackgroundColor": "#64B5F6",
|
||||
"navigationBarBackgroundColor": "#FF8A80",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
<template>
|
||||
<view class="adoption-container">
|
||||
<u-navbar title="领养专区" :border="false" bg-color="#ff6b6b">
|
||||
<template #right>
|
||||
<u-icon name="plus" color="white" size="20" @click="publishAdoption"></u-icon>
|
||||
</template>
|
||||
</u-navbar>
|
||||
|
||||
<u-search placeholder="搜索宠物品种或地区" v-model="searchKeyword" @search="searchPets"></u-search>
|
||||
<view class="search-container">
|
||||
<u-search placeholder="搜索宠物品种或地区" v-model="searchKeyword" @search="searchPets"></u-search>
|
||||
<view class="publish-btn" @click="publishAdoption">
|
||||
<text class="publish-text">发布</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-bar">
|
||||
<u-button v-for="filter in filters" :key="filter.key"
|
||||
|
|
@ -19,22 +18,26 @@
|
|||
</view>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<u-text :text="pet.name" type="primary" size="16" bold></u-text>
|
||||
<u-text :text="`${pet.breed} · ${pet.age}岁 · ${pet.gender}`" type="info" size="14"></u-text>
|
||||
<u-text :text="pet.location" type="tips" size="12"></u-text>
|
||||
<text class="pet-name">{{ pet.name }}</text>
|
||||
<text class="pet-details">{{ pet.breed }} · {{ pet.age }}岁 · {{ pet.gender }}</text>
|
||||
<text class="pet-location">{{ pet.location }}</text>
|
||||
<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 class="contact-btn">
|
||||
<u-button text="联系" type="primary" size="mini" @click.stop="contact(pet)"></u-button>
|
||||
<view class="contact-btn" @click.stop="contact(pet)">
|
||||
<text class="btn-text">联系</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-card>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -136,45 +139,172 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.adoption-container {
|
||||
background-color: #f8f9fa;
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
background-color: white;
|
||||
.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);
|
||||
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;
|
||||
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) {
|
||||
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 {
|
||||
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 {
|
||||
display: flex;
|
||||
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 {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
margin-left: 24rpx;
|
||||
|
||||
.pet-tags {
|
||||
margin-top: 10rpx;
|
||||
.pet-name {
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,26 @@
|
|||
<template>
|
||||
<view class="knowledge-container">
|
||||
<u-navbar title="宠物知识库" left-icon="arrow-left" @left-click="goBack"></u-navbar>
|
||||
|
||||
<u-search placeholder="搜索知识" v-model="searchKeyword" @search="searchKnowledge" @custom="searchKnowledge"></u-search>
|
||||
<view class="search-container">
|
||||
<u-search placeholder="搜索知识" v-model="searchKeyword" @search="searchKnowledge" @custom="searchKnowledge"></u-search>
|
||||
</view>
|
||||
|
||||
<view class="category-tabs">
|
||||
<u-tabs :list="categories" @click="switchCategory" :current="currentCategory"></u-tabs>
|
||||
</view>
|
||||
|
||||
<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">
|
||||
<u-text :text="item.title" type="primary" size="16" bold></u-text>
|
||||
<u-text :text="item.summary" type="info" size="14" margin="10rpx 0"></u-text>
|
||||
<text class="knowledge-title">{{ item.title }}</text>
|
||||
<text class="knowledge-summary">{{ item.summary }}</text>
|
||||
<view class="knowledge-meta">
|
||||
<u-tag :text="item.category" type="info" size="mini"></u-tag>
|
||||
<u-text :text="item.readCount + '次阅读'" type="tips" size="12"></u-text>
|
||||
<view class="category-tag">
|
||||
<text class="tag-text">{{ item.category }}</text>
|
||||
</view>
|
||||
<text class="read-count">{{ item.readCount }}次阅读</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-card>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -86,10 +88,6 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
|
||||
switchCategory(item) {
|
||||
this.currentCategory = item.index
|
||||
},
|
||||
|
|
@ -109,25 +107,90 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.knowledge-container {
|
||||
background-color: #f8f9fa;
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
||||
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 {
|
||||
background-color: white;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
margin: 20rpx 30rpx;
|
||||
border-radius: 24rpx;
|
||||
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 {
|
||||
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-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 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -80,77 +80,90 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #f8f9fa;
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: white;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
display: flex;
|
||||
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 {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
margin-right: 30rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.nickname {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
color: #FF8A80;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
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 {
|
||||
background-color: #07c160;
|
||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
|
||||
color: white;
|
||||
border-radius: 10rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 32rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
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 {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
&:active {
|
||||
background: rgba(255, 138, 128, 0.1);
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
color: #FF8A80;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
"状态管理": "Pinia + 本地存储策略",
|
||||
"工具函数": "uni.$u工具库 + 自定义utils",
|
||||
"样式方案": "SCSS + uni.scss变量系统",
|
||||
"数据持久化": "uni.setStorageSync + 数据版本管理"
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue