xiaoyu/topfans
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 藏品选择框添加点赞数，修改样式

Browse Source
This commit is contained in:
zerosaturation 2026-05-08 20:39:45 +08:00
parent b1c5bf13c8
commit 9622d8c3aa
2 changed files with 96 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
frontend/pages/components/AssetSelector.vue
View File

@ -2,7 +2,7 @@
<view v-if="visible" class="asset-selector-mask" @tap="closeModal">
<view class="asset-selector-modal" @tap.stop :class="{ 'show': animated }">
<!-- 背景图片 -->
<image class="modal-background" src="/static/background/starbook.jpg" mode="aspectFill"></image>
<image class="modal-background" src="/static/starbookcontent/beijing.png" mode="aspectFill"></image>
<!-- 内容包装器 -->
<view class="modal-content">
@ -46,6 +46,11 @@
<template v-if="currentType === 'regular'">
<view v-for="gradeItem in regularGrades" :key="gradeItem.grade" class="grade-section">
<view class="grade-header">
<image
class="grade-header-bg"
:src="getGradeBackground(gradeItem.grade)"
mode="aspectFill"
></image>
<text class="grade-title">{{ formatGrade(gradeItem.grade) }}</text>
</view>
<scroll-view class="asset-row" scroll-x :show-scrollbar="false" :enable-flex="true">
@ -58,18 +63,20 @@
>
<image
class="asset-image"
:class="{ 'nft-image-displayed': item.display_status === 1 }"
:src="item.coverUrl || '/static/nft/collection.png'"
mode="aspectFill"
/>
<view v-if="item.display_status === 1" class="status-overlay">
<text class="status-text-center">已展示</text>
</view>
<view v-else class="status-overlay-pending">
<text class="status-text-pending">待展示</text>
</view>
<view class="asset-info">
<text class="asset-name">{{ item.name }}</text>
<text class="status-text-center">已展示</text>
</view>
<view class="card-rate-badge-overlay">
<image class="heart-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
<text class="card-rate-text">{{ item.like_count || 0 }}</text>
</view>
<!-- <view class="asset-info">
<text class="asset-name">{{ item.name }}</text>
</view> -->
</view>
</view>
</scroll-view>
@ -89,15 +96,17 @@
>
<image
class="asset-image"
:class="{ 'nft-image-displayed': item.display_status === 1 }"
:src="item.coverUrl || '/static/nft/collection.png'"
mode="aspectFill"
/>
<view v-if="item.display_status === 1" class="status-overlay">
<text class="status-text-center">已展示</text>
</view>
<view v-else class="status-overlay-pending">
<text class="status-text-pending">待展示</text>
</view>
<text class="status-text-center">已展示</text>
</view>
<view class="card-rate-badge-overlay">
<image class="heart-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
<text class="card-rate-text">{{ item.like_count || 0 }}</text>
</view>
<view class="asset-info">
<text class="asset-name">{{ item.name }}</text>
</view>
@ -194,7 +203,18 @@ const currentItems = computed(() => {
// grade 中文转换
const gradeMap = { 1: '一', 2: '二', 3: '三', 4: '四', 5: '五' };
const formatGrade = (grade) => `等级${gradeMap[grade] || grade}`;
const formatGrade = (grade) => `V${grade}`;
// 获取等级背景图
const getGradeBackground = (grade) => {
if (grade <= 2) {
return '/static/starbookcontent/V1dengji.png';
} else if (grade <= 4) {
return '/static/starbookcontent/V2dengji.png';
} else {
return '/static/starbookcontent/V3dengji.png';
}
};
// 切换类型
const switchType = (type) => {
@ -465,21 +485,38 @@ const handleTouchEnd = (e) => {
}
.grade-section {
background: rgba(255, 255, 255, 0.03);
background: #f0839960;
border-radius: 16rpx;
padding: 20rpx;
margin-bottom: 20rpx;
}
.grade-header {
position: relative;
margin-bottom: 16rpx;
padding-bottom: 10rpx;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
padding: 16rpx 24rpx;
display: inline-flex;
align-items: center;
justify-content: center;
width: 160rpx;
height: 32rpx;
}
.grade-header-bg {
position: absolute;
top: 0;
left: 0;
width: 160rpx;
height: 64rpx;
z-index: 0;
}
.grade-title {
font-size: 26rpx;
position: relative;
z-index: 1;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
font-weight: 600;
}
.asset-row {
@ -514,12 +551,17 @@ const handleTouchEnd = (e) => {
.asset-image {
width: 192rpx;
height: 224rpx;
height: 100%;
border-radius: 16rpx;
background: rgba(255, 255, 255, 0.05);
display: block;
}
/* 已展示的图片 - 灰色滤镜 */
.nft-image-displayed {
filter: grayscale(25%);
}
.status-overlay {
position: absolute;
top: 0;
@ -568,6 +610,40 @@ const handleTouchEnd = (e) => {
font-weight: bold;
}
/* 点赞数徽章 - 图片上覆盖层 */
.card-rate-badge-overlay {
position: absolute;
bottom: 12rpx;
left: 12rpx;
display: flex;
align-items: center;
background: linear-gradient(to bottom right,
#F0E4B1 0%,
#F08399 50%,
#B94E73 100%);
border-radius: 999rpx;
padding: 8rpx 20rpx 8rpx 40rpx;
box-shadow:
0 4rpx 12rpx rgba(255, 143, 158, 0.2),
inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
border-radius: 20rpx;
padding: 6rpx 12rpx;
z-index: 2;
}
.card-rate-badge-overlay .heart-icon {
width: 24rpx;
height: 24rpx;
margin-right: 6rpx;
}
.card-rate-badge-overlay .card-rate-text {
font-size: 22rpx;
color: #fff;
font-weight: bold;
}
.asset-info {
padding: 12rpx 0;
text-align: center;

3
frontend/pages/components/StarbookContent.vue
View File

@ -504,7 +504,7 @@ watch(() => props.isActive, (newVal) => {
/* 等级区块 */
.grade-section {
background: rgba(255, 255, 255, 0.03);
background: #f0839960;
border-radius: 16rpx;
padding: 20rpx;
}
@ -543,7 +543,6 @@ watch(() => props.isActive, (newVal) => {
width: 100%;
height: 288rpx;
white-space: nowrap;
background: #f0839960;
padding: 0.5rem;
}