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

1

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
pages/adoption/adoption.vue
+155 -25
View File
@@ -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>