From 9622d8c3aa4b9f412e7f4de0b919852a7960806c Mon Sep 17 00:00:00 2001
From: zerosaturation <zerosaturation@163.com>
Date: Fri, 8 May 2026 20:39:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=97=8F=E5=93=81=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E6=A1=86=E6=B7=BB=E5=8A=A0=E7=82=B9=E8=B5=9E=E6=95=B0=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/pages/components/AssetSelector.vue   | 114 +++++++++++++++---
 frontend/pages/components/StarbookContent.vue |   3 +-
 2 files changed, 96 insertions(+), 21 deletions(-)

diff --git a/frontend/pages/components/AssetSelector.vue b/frontend/pages/components/AssetSelector.vue
index 2c8253d..d81098a 100644
--- a/frontend/pages/components/AssetSelector.vue
+++ b/frontend/pages/components/AssetSelector.vue
@@ -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;
diff --git a/frontend/pages/components/StarbookContent.vue b/frontend/pages/components/StarbookContent.vue
index 555fa7e..e0da17b 100644
--- a/frontend/pages/components/StarbookContent.vue
+++ b/frontend/pages/components/StarbookContent.vue
@@ -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;
 }