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

1

This commit is contained in:
yvan 2025-08-14 22:07:01 +08:00
parent a206f83412
commit 82b50285f9
3 changed files with 87 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
manifest.json
View File

@ -50,7 +50,7 @@
"quickapp" : {}, "quickapp" : {},
/* 小程序特有相关 */ /* 小程序特有相关 */
"mp-weixin" : { "mp-weixin" : {
"appid" : "wxdf340fe2d9aff21d", "appid" : "wx0f5dc17ba3f9fe31",
"setting" : { "setting" : {
"urlCheck" : false, "urlCheck" : false,
"minified" : false "minified" : false

48
pages/adoption/adoption.vue
View File

@ -249,13 +249,11 @@
</view> </view>
<view class="pet-personality"> <view class="pet-personality">
<view <text
class="personality-tag" class="personality-trait"
v-for="trait in pet.personality.slice(0, 3)" v-for="trait in pet.personality.slice(0, 3)"
:key="trait" :key="trait"
> >{{ trait }}</text>
<text class="trait-text">{{ trait }}</text>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -1194,7 +1192,7 @@ export default {
/* 头部搜索栏 */ /* 头部搜索栏 */
.header-section { .header-section {
background: transparent; background: transparent;
padding: 24rpx 32rpx; padding: 24rpx 20rpx;
.search-wrapper { .search-wrapper {
display: flex; display: flex;
@ -1289,7 +1287,7 @@ export default {
.filter-panel { .filter-panel {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
padding: 24rpx 32rpx; padding: 24rpx 20rpx;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.3); border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
position: relative; position: relative;
z-index: 10; z-index: 10;
@ -1516,7 +1514,7 @@ export default {
/* 宠物列表区域 */ /* 宠物列表区域 */
.pets-scroll { .pets-scroll {
height: calc(100vh - 100rpx); height: calc(100vh - 100rpx);
padding: 0 16rpx; padding: 0 20rpx;
overflow-x: hidden; overflow-x: hidden;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -1561,10 +1559,10 @@ export default {
.pet-image-container { .pet-image-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 200rpx; height: 280rpx;
border-radius: 12rpx; border-radius: 12rpx;
overflow: hidden; overflow: hidden;
margin-bottom: 8rpx; margin-bottom: 12rpx;
.pet-image { .pet-image {
width: 100%; width: 100%;
@ -1611,15 +1609,16 @@ export default {
.pet-info { .pet-info {
.pet-basic { .pet-basic {
margin-bottom: 12rpx; margin-bottom: 8rpx;
.pet-name { .pet-name {
font-size: 26rpx; font-size: 30rpx;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
margin-bottom: 6rpx; margin-bottom: 6rpx;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
padding: 6rpx 0;
} }
.pet-tags { .pet-tags {
@ -1629,11 +1628,12 @@ export default {
.pet-type, .pet-type,
.pet-breed { .pet-breed {
background: rgba(255, 138, 128, 0.1); background: rgba(255, 138, 128, 0.2);
border-radius: 8rpx; border-radius: 8rpx;
padding: 2rpx 8rpx; padding: 2rpx 8rpx;
font-size: 18rpx; font-size: 18rpx;
color: #FF8A80; color: #E57373;
font-weight: 500;
} }
} }
} }
@ -1641,7 +1641,7 @@ export default {
.pet-details { .pet-details {
display: flex; display: flex;
gap: 16rpx; gap: 16rpx;
margin-bottom: 12rpx; margin-bottom: 8rpx;
flex-wrap: wrap; flex-wrap: wrap;
.detail-item { .detail-item {
@ -1662,19 +1662,17 @@ export default {
.pet-personality { .pet-personality {
display: flex; display: flex;
flex-wrap: wrap;
gap: 6rpx; gap: 6rpx;
margin-bottom: 12rpx; flex-wrap: wrap;
margin-bottom: 8rpx;
.personality-tag { .personality-trait {
background: rgba(255, 138, 128, 0.05); background: rgba(100, 181, 246, 0.15);
border-radius: 8rpx; border-radius: 8rpx;
padding: 4rpx 8rpx; padding: 2rpx 8rpx;
font-size: 18rpx;
.trait-text { color: #42A5F5;
font-size: 16rpx; font-weight: 500;
color: #666666;
}
} }
} }

103
pages/review/review.vue
View File

@ -197,23 +197,31 @@
</view> </view>
</view> </view>
<view class="product-info"> <view class="product-info">
<view class="product-brand">{{ product.brand }}</view> <view class="product-basic">
<view class="product-name">{{ product.name }}</view> <text class="product-name">{{ product.name }}</text>
<view class="product-brand-tags">
<text class="product-brand">{{ product.brand }}</text>
</view>
</view>
<view class="product-rating"> <view class="product-rating">
<view class="rating-stars"> <view class="rating-stars">
<text <u-icon
class="star"
v-for="i in 5" v-for="i in 5"
:key="i" :key="i"
:class="{ active: i <= product.rating }" name="star-fill"
>★</text> :color="i <= product.rating ? '#FFD700' : '#DDDDDD'"
size="14"
></u-icon>
</view> </view>
<text class="rating-score">{{ product.rating }}</text> <text class="rating-score">{{ product.rating }}</text>
<text class="rating-count">({{ product.reviewCount }})</text> <text class="rating-count">({{ product.reviewCount }})</text>
</view> </view>
<view class="product-price"> <view class="product-price">
<text class="price-range">¥{{ product.priceRange }}</text> <text class="price-range">¥{{ product.priceRange }}</text>
</view> </view>
<view class="product-tags" v-if="viewMode === 'list'"> <view class="product-tags" v-if="viewMode === 'list'">
<text <text
class="product-tag" class="product-tag"
@ -811,12 +819,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.review-container { .review-container {
padding-bottom: 120rpx; padding-bottom: 60rpx;
} }
/* 搜索栏 */ /* 搜索栏 */
.search-section { .search-section {
padding: 20rpx 30rpx; padding: 24rpx 20rpx;
.search-wrapper { .search-wrapper {
display: flex; display: flex;
@ -911,7 +919,7 @@ export default {
/* 产品列表 */ /* 产品列表 */
.products-section { .products-section {
margin: 0 30rpx; margin: 0 20rpx;
.products-grid { .products-grid {
&.grid { &.grid {
@ -929,8 +937,8 @@ export default {
.product-card { .product-card {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
border-radius: 20rpx; border-radius: 12rpx;
overflow: hidden; padding: 12rpx;
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.1); box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
@ -940,10 +948,16 @@ export default {
.product-image { .product-image {
position: relative; position: relative;
width: 100%;
height: 280rpx;
border-radius: 12rpx;
overflow: hidden;
margin-bottom: 12rpx;
.product-img { .product-img {
width: 100%; width: 100%;
height: 200rpx; height: 100%;
object-fit: cover;
} }
.product-badge { .product-badge {
@ -986,54 +1000,57 @@ export default {
} }
.product-info { .product-info {
padding: 16rpx;
.product-brand { .product-basic {
font-size: 20rpx; margin-bottom: 8rpx;
color: #999999;
margin-bottom: 6rpx;
}
.product-name { .product-name {
font-size: 26rpx; font-size: 30rpx;
font-weight: 600; font-weight: bold;
color: #333333; color: #333333;
margin-bottom: 8rpx; margin-bottom: 6rpx;
line-height: 1.3; display: block;
display: -webkit-box; line-height: 1.2;
-webkit-box-orient: vertical; padding: 6rpx 0;
-webkit-line-clamp: 2; }
overflow: hidden;
.product-brand-tags {
display: flex;
gap: 6rpx;
flex-wrap: wrap;
.product-brand {
background: rgba(100, 181, 246, 0.15);
border-radius: 8rpx;
padding: 2rpx 8rpx;
font-size: 18rpx;
color: #42A5F5;
font-weight: 500;
}
}
} }
.product-rating { .product-rating {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4rpx;
margin-bottom: 8rpx; margin-bottom: 8rpx;
.rating-stars { .rating-stars {
margin-right: 8rpx; display: flex;
gap: 2rpx;
.star { align-items: center;
font-size: 16rpx;
color: #DDDDDD;
&.active {
color: #FFD700;
}
}
} }
.rating-score { .rating-score {
font-size: 20rpx; font-size: 18rpx;
color: #333333; color: #666666;
font-weight: 600; font-weight: 500;
margin-right: 6rpx;
} }
.rating-count { .rating-count {
font-size: 18rpx; font-size: 18rpx;
color: #999999; color: #666666;
} }
} }
@ -1065,8 +1082,10 @@ export default {
&.list .product-card { &.list .product-card {
.product-image { .product-image {
height: 240rpx;
.product-img { .product-img {
height: 160rpx; height: 100%;
} }
} }