From 5edf153521ef0f314dedcd9019868df412135a3c Mon Sep 17 00:00:00 2001 From: zheng020 Date: Fri, 15 May 2026 15:21:54 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E8=97=8F=E5=93=81=E8=AF=A6=E7=BB=86?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/pages/asset-detail/asset-detail.vue | 219 ++++++++++++------- frontend/pages/castlove/craft-select.vue | 58 +++-- frontend/pages/castlove/create.vue | 2 +- frontend/pages/profile/hisWorks.vue | 140 +++++++++++- frontend/pages/profile/myWorks.vue | 129 ++++++++++- frontend/pages/profile/profile.vue | 2 +- frontend/utils/api.js | 12 +- 7 files changed, 435 insertions(+), 127 deletions(-) diff --git a/frontend/pages/asset-detail/asset-detail.vue b/frontend/pages/asset-detail/asset-detail.vue index e6d19c2..e9d9977 100644 --- a/frontend/pages/asset-detail/asset-detail.vue +++ b/frontend/pages/asset-detail/asset-detail.vue @@ -33,7 +33,7 @@ - + @@ -47,8 +47,9 @@ - - + {{ countdownText }} @@ -69,10 +70,19 @@ + + + 来源 + {{ assetData.source || '铸造' }} + + 创作者 - {{ assetData.owner_nickname || '未知' }} + + + {{ assetData.owner_nickname || '未知' }} + @@ -81,27 +91,16 @@ {{ formattedAcquireTime }} - - - 来源 - {{ assetData.source || '铸造' }} - - - + - - + + @@ -133,16 +133,18 @@ 区块链编号 - {{ showBlockNumber ? (assetData.block_number || '未知') : hiddenBlockNumber }} + {{ showBlockNumber ? (assetData.block_number || '未知') : + hiddenBlockNumber }} {{ showBlockNumber ? '👁' : '👁‍🗨' }} - 交易哈希 + 链上哈希 - {{ showTxHash ? displayTxHash : hiddenTxHash }} + {{ showTxHash ? displayTxHash + : hiddenTxHash }} {{ showTxHash ? '👁' : '👁‍🗨' }} @@ -154,30 +156,19 @@ - + @@ -400,8 +487,8 @@ onMounted(() => { .card-rate-badge { position: absolute; - bottom: 16rpx; - left: 40%; + top: 16rpx; + left: 25%; transform: translateX(-50%); display: flex; align-items: center; @@ -476,6 +563,35 @@ onMounted(() => { font-weight: 700; } +/* 倒计时背景 */ +.countdown-background { + /* position: absolute; + bottom: 20rpx; + right: 30%; + transform: translateX(-50%); */ + width: 140rpx; + height: 36rpx; + background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%); + border-radius: 999rpx; + z-index: 9; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4); + opacity: 0.95; +} + +/* 倒计时文字 */ +.countdown-text { + font-size: 22rpx; + font-weight: bold; + color: #fff; + font-family: 'yt', sans-serif; + text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.8); + z-index: 10; + font-variant-numeric: tabular-nums; + font-feature-settings: "tnum"; + display: flex; + justify-content: center; +} + .empty-exhibition { display: flex; align-items: center; @@ -527,7 +643,7 @@ onMounted(() => { flex-shrink: 0; /* margin-right: 8rpx; */ position: relative; - left: 32rpx; + left: 32rpx; } .rank-icon-1 { diff --git a/frontend/pages/profile/myWorks.vue b/frontend/pages/profile/myWorks.vue index 87f628c..012ac14 100644 --- a/frontend/pages/profile/myWorks.vue +++ b/frontend/pages/profile/myWorks.vue @@ -39,6 +39,13 @@ {{ item.like_count || 0 }} + + + + + {{ formatCountdown(item.id) }} + + @@ -101,13 +108,14 @@ - + - + - + - + +{{ item.reward }} @@ -302,9 +312,73 @@ const formatScore = (score) => { return Number(score).toLocaleString(); }; +// 计算剩余时间 +const calculateRemainingTime = (item) => { + if (item.remainSeconds !== undefined) { + if (item.remainSeconds <= 0) { + return { hours: 0, minutes: 0, seconds: 0, expired: true }; + } + const hours = Math.floor(item.remainSeconds / 3600); + const minutes = Math.floor((item.remainSeconds % 3600) / 60); + const seconds = Math.floor(item.remainSeconds % 60); + return { hours, minutes, seconds, expired: false }; + } + if (item.expire_at) { + const now = Date.now(); + const expireTime = new Date(item.expire_at).getTime(); + const remaining = expireTime - now; + if (remaining <= 0) { + return { hours: 0, minutes: 0, seconds: 0, expired: true }; + } + const hours = Math.floor(remaining / (60 * 60 * 1000)); + const minutes = Math.floor((remaining % (60 * 60 * 1000)) / (60 * 1000)); + const seconds = Math.floor((remaining % (60 * 1000)) / 1000); + return { hours, minutes, seconds, expired: false }; + } + return { hours: 0, minutes: 0, seconds: 0, expired: true }; +}; + +// 更新所有倒计时 +const updateCountdowns = () => { + exhibitionWorks.value.forEach(item => { + if (item && item.id) { + if (item.remainSeconds !== undefined && item.remainSeconds > 0) { + item.remainSeconds--; + } + countdowns.value[item.id] = calculateRemainingTime(item); + } + }); +}; + +// 格式化倒计时显示 +const formatCountdown = (itemId) => { + const countdown = countdowns.value[itemId]; + if (!countdown || countdown.expired) return '00:00:00'; + const h = String(countdown.hours).padStart(2, '0'); + const m = String(countdown.minutes).padStart(2, '0'); + const s = String(countdown.seconds).padStart(2, '0'); + return `${h}:${m}:${s}`; +}; + +// 获取倒计时背景样式 +const getCountdownBackgroundStyle = () => { + return { + position: 'absolute', + bottom: '20rpx', + right: '40%', + transform: 'translateX(50%)', + width: '140rpx', + height: '36rpx', + zIndex: 9 + }; +}; + // 在展作品列表 const exhibitionWorks = ref([]); +// 倒计时状态 +const countdowns = ref({}); + // 当前点赞作品列表 const likedWorks = ref([]); @@ -380,6 +454,11 @@ onMounted(() => { loadExhibitedAssets(); loadLikedAssets(); + // 启动倒计时定时器 + countdownTimer = setInterval(() => { + updateCountdowns(); + }, 1000); + // 监听身份切换事件，切换后刷新数据 uni.$on('userInfoUpdated', () => { loadExhibitedAssets(); @@ -387,7 +466,12 @@ onMounted(() => { }); }); +let countdownTimer = null; + onUnmounted(() => { + if (countdownTimer) { + clearInterval(countdownTimer); + } uni.$off('userInfoUpdated'); }); @@ -560,13 +644,13 @@ onShow(() => { .card-tilt-left { transform: rotate(-4deg) translateY(10rpx); margin-right: 32rpx; - border-radius: 32rpx; + border-radius: 32rpx; box-shadow: -16rpx 16rpx 16rpx rgba(229, 76, 93, 0.9); } .card-tilt-right { transform: rotate(4deg) translateY(10rpx); - border-radius: 32rpx; + border-radius: 32rpx; box-shadow: 16rpx 16rpx 16rpx rgba(229, 76, 93, 0.9); } @@ -617,8 +701,8 @@ onShow(() => { .card-rate-badge { position: absolute; - bottom: 16rpx; - left: 40%; + top: 16rpx; + left: 25%; transform: translateX(-50%); display: flex; align-items: center; @@ -697,6 +781,35 @@ onShow(() => { font-weight: 700; } +/* 倒计时背景 */ +.countdown-background { + /* position: absolute; */ + /* top: 20rpx; + left: 30%; */ + /* transform: translateX(-50%); */ + width: 140rpx; + height: 36rpx; + background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%); + border-radius: 999rpx; + z-index: 9; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4); + opacity: 0.95; +} + +/* 倒计时文字 */ +.countdown-text { + font-size: 22rpx; + font-weight: bold; + color: #fff; + font-family: 'yt', sans-serif; + text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.8); + z-index: 10; + font-variant-numeric: tabular-nums; + font-feature-settings: "tnum"; + display: flex; + justify-content: center; +} + /* 空状态 */ .empty-exhibition { display: flex; diff --git a/frontend/pages/profile/profile.vue b/frontend/pages/profile/profile.vue index 69120f5..c41e995 100644 --- a/frontend/pages/profile/profile.vue +++ b/frontend/pages/profile/profile.vue @@ -1521,7 +1521,7 @@ onShow(() => { .asset-card { background-image: url(/static/rank/activity-support-icon/beijingkuang.png); - background-size: 100% 100%; + background-size: 100% 125%; background-position: center; border-radius: 20rpx; padding: 0 16rpx; diff --git a/frontend/utils/api.js b/frontend/utils/api.js index 6ed4129..da8ab9b 100644 --- a/frontend/utils/api.js +++ b/frontend/utils/api.js @@ -3,19 +3,19 @@ // 不需要手动注释！ // #ifdef H5 -// const baseURL = 'http://localhost:8080' // H5 开发用本机 -const baseURL = 'http://101.132.250.62:8080' // H5 开发用本机 +const baseURL = 'http://192.168.110.60:8080' // H5 开发用本机 +// const baseURL = 'http://101.132.250.62:8080' // H5 开发用本机 // #endif // #ifdef APP-PLUS // 开发调试：手机和电脑同一WiFi时用这个（改成你电脑IP） // 上线后：改成实际服务器地址 -// const baseURL = 'http://192.168.110.60:8080' +const baseURL = 'http://192.168.110.60:8080' // #endif // 服务器地址（正式上线用） // #ifdef APP-PLUS -const baseURL = 'http://101.132.250.62:8080' +// const baseURL = 'http://101.132.250.62:8080' // #endif // 是否使用模拟数据（开发调试时设为 true，后端API准备好后改为 false） @@ -468,7 +468,9 @@ export function getBatchOssPresignedUrlsApi(files, expires = 3600, type = 'asset * @returns {Promise<{ imageUrl: string, orderId?: string, data: object }>} */ export function uploadLocalFileToOss(filePath, options = {}) { - const { type = 'asset', orderId = '', fileName } = options + const { + type = 'asset', orderId = '', fileName + } = options const objectName = fileName || `${Date.now()}.jpg` return new Promise((resolve, reject) => { getOssSignatureApi(type, orderId)