diff --git a/frontend/pages/profile/myWorks.vue b/frontend/pages/profile/myWorks.vue index 0046613..4da80b4 100644 --- a/frontend/pages/profile/myWorks.vue +++ b/frontend/pages/profile/myWorks.vue @@ -30,6 +30,12 @@ @tap="handleExhibitionCardTap(item, index)"> + + + + + 领取收益 + @@ -40,7 +46,8 @@ - + {{ 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; diff --git a/frontend/pages/support-activity/components/ThemeBanner.vue b/frontend/pages/support-activity/components/ThemeBanner.vue index 613ac42..caba28e 100644 --- a/frontend/pages/support-activity/components/ThemeBanner.vue +++ b/frontend/pages/support-activity/components/ThemeBanner.vue @@ -1,23 +1,17 @@ @@ -131,7 +125,7 @@ const progressPercent = computed(() => { font-size: 64rpx; font-weight: 900; color: #fff; - text-shadow: + text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.8), 0 4rpx 8rpx rgba(0, 0, 0, 0.5); line-height: 1.2; @@ -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 { diff --git a/frontend/static/nft/lihe.png b/frontend/static/nft/lihe.png index 01da12c..0698187 100644 Binary files a/frontend/static/nft/lihe.png and b/frontend/static/nft/lihe.png differ