修改展示页的样式

frontend/pages/profile/myWorks.vue

@@ -30,6 +30,12 @@
 						@tap="handleExhibitionCardTap(item, index)">
 						<image class="card-image" :src="item.cover_url || '/static/nft/placeholder.png'"
 							mode="aspectFill"></image>
+						<!-- 领取收益按钮 -->
+						<view class="claim-reward-btn" v-if="isRewardClaimable(item.id)">
+							<image class="claim-crystal-icon" src="/static/square/shuijingtubiao.png" mode="aspectFit">
+							</image>
+							<view @tap.stop="handleClaimReward(item, index)" class="claim-btn-text">领取收益</view>
+						</view>
 						<image class="card-frame" src="/static/square/gerenzhongxincangpinkuang.png" mode="aspectFill">
 						</image>
 						<!-- 点赞数 -->
@@ -40,7 +46,8 @@
 							</view>
 						</view>
 						<!-- 倒计时背景 -->
-						<view class="countdown-background" :style="getCountdownBackgroundStyle(index)">
+						<view class="countdown-background" v-if="!isRewardClaimable(item.id)"
+							:style="getCountdownBackgroundStyle(index)">
 							<!-- 倒计时文字 -->
 							<text class="countdown-text">
 								{{ formatCountdown(item.id) }}
@@ -268,6 +275,12 @@ const goToAssetDetail = (id) => {
 // 双击点赞处理
 const cardTapTimers = {};
 
+// 领取收益处理
+const handleClaimReward = (item, _index) => {
+	console.log('领取收益:', item);
+	uni.showToast({ title: '收益已领取', icon: 'success' });
+};
+
 const handleExhibitionCardTap = (item, index) => {
 	if (cardTapTimers[item.id]) {
 		// 第二次点击，双击点赞
@@ -360,6 +373,12 @@ const formatCountdown = (itemId) => {
 	return `${h}:${m}:${s}`;
 };
 
+// 判断收益是否可领取（倒计时已到期）
+const isRewardClaimable = (itemId) => {
+	const countdown = countdowns.value[itemId];
+	return countdown && countdown.expired;
+};
+
 // 获取倒计时背景样式
 const getCountdownBackgroundStyle = () => {
 	return {
@@ -680,6 +699,50 @@ onShow(() => {
 	z-index: 2;
 }
 
+/* 领取收益按钮 */
+.claim-reward-btn {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 88%;
+	height: 92%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-end;
+	z-index: 10;
+	background: rgba(0, 0, 0, 0.6);
+	border-radius: 16rpx;
+	gap: 8rpx;
+}
+
+.claim-crystal-icon {
+	width: 50%;
+	height: 50%;
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%)
+}
+
+.claim-btn-text {
+	background: linear-gradient(to bottom right,
+			#F0E4B1 0%,
+			#F08399 50%,
+			#B94E73 100%);
+	border-radius: 24rpx;
+	padding: 8rpx 20rpx;
+	box-shadow:
+		0 4rpx 12rpx rgba(255, 143, 158, 0.2),
+		inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
+	font-size: 22rpx;
+	color: #fff;
+	font-weight: 600;
+	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
+	position: absolute;
+	bottom: 24rpx;
+}
+
 .card-user-tag {
 	position: absolute;
 	bottom: 56rpx;

frontend/pages/support-activity/components/ThemeBanner.vue

@@ -1,13 +1,7 @@
 <template>
   <view class="theme-banner">
     <!-- 背景图 - 使用懒加载 -->
-    <image 
-      v-if="bannerImage" 
-      :src="bannerImage" 
-      class="banner-bg" 
-      mode="aspectFill"
-      :lazy-load="true"
-    />
+    <image v-if="bannerImage" :src="bannerImage" class="banner-bg" mode="aspectFill" :lazy-load="true" />
 
     <!-- 内容层 -->
     <view class="banner-content" @tap="handleBannerClick">
@@ -16,7 +10,7 @@
       <view class="title-section">
 
         <view class="subtitle-row">
-          <text class="subtitle-text">{{'「'+ title +'」' }}</text>
+          <text class="subtitle-text">{{ '「' + title + '」' }}</text>
 
           <!-- 如果确实需要过时数据警告，可以保留，否则可隐藏 -->
           <view v-if="isStaleData" class="stale-indicator">
@@ -28,7 +22,7 @@
 
       <!-- 下半部分：右下角数字 -->
       <view class="footer-section">
-        <text class="progress-text">{{ formattedCurrent }} / {{ formattedTarget }}</text>
+        <text class="progress-text">当前进度<text class="current-value">{{ formattedCurrent }}</text> / {{ formattedTarget }}</text>
       </view>
 
     </view>
@@ -178,13 +172,26 @@ const progressPercent = computed(() => {
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
+
 }
 
 .progress-text {
-  font-size: 32rpx;
+  font-size: 24rpx;
   color: #fff;
   text-shadow: 0 0 8rpx rgba(255, 255, 255, 0.6);
   font-family: 'yt', sans-serif;
+  background-image: url('@/static/rank/activity-support-icon/beijingkuang.png');
+  background-size: cover;
+  background-position: center;
+  padding: 0.8rpx 24rpx;
+  border-radius: 40rpx;
+    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.6);
+
+}
+
+.current-value {
+  color: #FFD700;
+  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.6);
 }
 
 .progress-bar {