diff --git a/docs/superpowers/specs/2026-05-28-热门推荐模块前端设计.md b/docs/superpowers/specs/2026-05-28-热门推荐模块前端设计.md index 63008ce..cbc7cc4 100644 --- a/docs/superpowers/specs/2026-05-28-热门推荐模块前端设计.md +++ b/docs/superpowers/specs/2026-05-28-热门推荐模块前端设计.md @@ -2,10 +2,13 @@ ## 一、页面结构 +### 完整页面布局（4个分类区块纵向堆叠） + ``` ┌──────────────────────────────────────┐ -│ 热门推荐 │ +│ BannerCarousel │ ├──────────────────────────────────────┤ +│ 热门推荐 │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │ │ │ │ │ │ │ │ ← 行1 │ │ └────┘ └────┘ └────┘ └────┘ │ @@ -13,6 +16,52 @@ │ │ │ │ │ │ │ │ │ ← 行2 │ │ └────┘ └────┘ └────┘ └────┘ │ │ 🔄 刷新 查看更多 ›│ +├──────────────────────────────────────┤ +│ 热门星卡 │ +│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ +│ │ │ │ │ │ │ │ │ ← 行1 │ +│ └────┘ └────┘ └────┘ └────┘ │ +│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ +│ │ │ │ │ │ │ │ │ ← 行2 │ +│ └────┘ └────┘ └────┘ └────┘ │ +│ 🔄 刷新 查看更多 ›│ +├──────────────────────────────────────┤ +│ 热门吧唧 │ +│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ +│ │ │ │ │ │ │ │ │ ← 行1 │ +│ └────┘ └────┘ └────┘ └────┘ │ +│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ +│ │ │ │ │ │ │ │ │ ← 行2 │ +│ └────┘ └────┘ └────┘ └────┘ │ +│ 🔄 刷新 查看更多 ›│ +├──────────────────────────────────────┤ +│ 热门海报 │ +│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ +│ │ │ │ │ │ │ │ │ ← 行1 │ +│ └────┘ └────┘ └────┘ └────┘ │ +│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ +│ │ │ │ │ │ │ │ │ ← 行2 │ +│ └────┘ └────┘ └────┘ └────┘ │ +│ 🔄 刷新 查看更多 ›│ +├──────────────────────────────────────┤ +│ CreationGrid（原有组件，不变） │ +│ [热门作品] [最新作品] [星卡] [吧唧]... │ +└──────────────────────────────────────┘ +``` + +### 单个 HotCategoryBlock 内部结构 + +``` +┌──────────────────────────────────────┐ +│ 热门推荐 │ ← block-title +├──────────────────────────────────────┤ +│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ +│ │ │ │ │ │ │ │ │ │ +│ └────┘ └────┘ └────┘ └────┘ │ ← block-grid (4×2) +│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ +│ │ │ │ │ │ │ │ │ │ +│ └────┘ └────┘ └────┘ └────┘ │ +│ 🔄 刷新 查看更多 ›│ ← block-actions └──────────────────────────────────────┘ ``` diff --git a/frontend/main.js b/frontend/main.js index 6867426..579a0cb 100644 --- a/frontend/main.js +++ b/frontend/main.js @@ -11,10 +11,6 @@ const app = new Vue({ app.$mount() // #endif -// #ifdef VUE3 && H5 -import './pages/castlove/create-laser-upload.css' -// #endif - // #ifdef VUE3 import { createSSRApp } from 'vue' import store from './store' diff --git a/frontend/pages/components/Header.vue b/frontend/pages/components/Header.vue index 8cf6791..bc1de9f 100644 --- a/frontend/pages/components/Header.vue +++ b/frontend/pages/components/Header.vue @@ -5,83 +5,85 @@ ← - - - - - - - - - - - - - 每日任务 - + + + + + - - + + + + + + + {{ exhibitionRevenue }} - 2. 下层：文字背景块 - - 新手引导 - - --> + + + + - - - - + + + + + + - + - + - {{ activity.theme || '星援活动' }} + 每日任务 + + + + + + + + + + + + + + + + {{ + activity.theme || "星援活动" + }} + + + + - - - - - - - - - - - - - - - - {{ exhibitionRevenue }} - - - - - 收益 {{ hourlyEarnings }}/时 - - - - - - - + @@ -94,15 +96,15 @@ @@ -438,32 +451,43 @@ defineExpose({ margin-left: auto; } +.left-items { + display: flex; + align-items: center; + justify-content: flex-start; +} + .star-activity-list { display: flex; align-items: center; gap: 8rpx; + width: 68rpx; + /* 控制整体宽度，根据图标大小调整 */ + height: 156rpx; + /* 预估高度，包含图标和文字块 */ } .daily-task-group { position: relative; /* 必须是相对定位，作为子元素的定位基准 */ - width: 100rpx; + width: 68rpx; /* 控制整体宽度，根据图标大小调整 */ - height: 120rpx; + height: 156rpx; /* 预估高度，包含图标和文字块 */ + margin-right: 24rpx; } /* --- 上层图标样式 --- */ .task-icon-box { position: absolute; - top: 8rpx; + top: 40rpx; /* 固定在顶部 */ left: 50%; transform: translateX(-50%); /* 水平居中 */ - width: 88rpx; + width: 34rpx; /* 图标宽度 */ - height: 88rpx; + height: 40rpx; /* 图标高度 */ z-index: 10; /* 确保图标在文字块上面 */ @@ -490,12 +514,13 @@ defineExpose({ /* 关键：调整这个值，让文字块往上顶，与图标产生重叠 */ left: 50%; transform: translateX(-50%); - width: 88rpx; - height: 80rpx; - background-image: url('/static/square/gerenzhongxincangpinkuang.png'); + width: 60rpx; + height: 60rpx; + background-image: url("/static/square/gerenzhongxincangpinkuang.png"); background-size: 100% 100%; background-repeat: no-repeat; border-radius: 20rpx; + box-shadow: 0px 4px 4px 0px #ee262654; display: flex; align-items: center; justify-content: center; @@ -504,11 +529,13 @@ defineExpose({ } .task-text-label { - font-size: 16rpx; - color: #fff; - text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.9); + font-weight: 500; + font-size: 12rpx; + line-height: 100%; + letter-spacing: 0%; + color: #fff9e7; + text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.84); margin-top: 32rpx; - } /* 水晶余额组件 */ @@ -526,13 +553,14 @@ defineExpose({ /* --- 左侧钻石图标 --- */ .crystal-icon-box { position: absolute; - left: 0; - bottom: 10rpx; + left: 8rpx; + bottom: 24rpx; /* 与右侧底部平齐 */ z-index: 10; - /* 最高层级：盖住右侧背景 */ - width: 100rpx; - height: 100rpx; + width: 68rpx; + height: 60rpx; + transform: rotate(-15deg); + opacity: 1; } .crystal-icon { @@ -543,12 +571,14 @@ defineExpose({ /* --- 右侧容器 --- */ .crystal-info-container { position: relative; - height: 56rpx; - width: 80rpx; - border-radius: 16rpx; - bottom: 4rpx; - padding-right: 28rpx; - padding-left: 56rpx; + height: 34rpx; + width: 120rpx; + opacity: 1; + border-radius: 20rpx; + border-width: 1px; + border: 1px solid #F3A68A40; + box-shadow: 2px 2px 4.1px 0px #F936365C; + } .crystal-bg-img { @@ -567,14 +597,18 @@ defineExpose({ display: flex; flex-direction: column; align-items: center; - margin-top: 8rpx; + border-radius: 120rpx; + opacity: 0.75; + background: linear-gradient(270deg, rgba(168, 17, 255, 0.83) 0%, rgba(30, 180, 217, 0.470865) 81.01%, rgba(101, 10, 153, 0) 178.07%); + + } .balance-number { font-size: 24rpx; font-weight: bold; - color: #FFB800; - font-family: 'yt', sans-serif; + color: #ffb800; + font-family: "yt", sans-serif; text-shadow: 0 0 10rpx rgba(255, 184, 0, 0.8), 0 2rpx 4rpx rgba(0, 0, 0, 0.5); @@ -586,14 +620,14 @@ defineExpose({ .balance-income { font-size: 18rpx; - color: #FFFFFF; + color: #ffffff; margin-bottom: 2rpx; margin-left: 28rpx; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.9); } /* --- 下层：渐变背景 --- */ -.crystal-bg-layer { +/* .crystal-bg-layer { display: flex; align-items: center; justify-content: center; @@ -605,9 +639,9 @@ defineExpose({ z-index: 1; background: linear-gradient(to bottom right, - #F0E4B1 0%, - #F08399 50%, - #B94E7399 100%); + #f0e4b1 0%, + #f08399 50%, + #b94e7399 100%); box-shadow: 0 4rpx 12rpx rgba(255, 143, 158, 0.2), @@ -615,15 +649,13 @@ defineExpose({ inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.05); border-radius: 10rpx; -} +} */ .icon-item { display: flex; align-items: center; justify-content: center; cursor: pointer; - margin-left: 32rpx; - margin-top: 16rpx; } .task-icon { diff --git a/frontend/pages/profile/profile.vue b/frontend/pages/profile/profile.vue index f137371..df1e0ef 100644 --- a/frontend/pages/profile/profile.vue +++ b/frontend/pages/profile/profile.vue @@ -2,18 +2,22 @@ - + + + + + + + ← + + + + + LV: + {{ fanLevel }} + - - - - - - - ← - - + @@ -356,6 +360,15 @@ const mobile = ref(''); const showBlockNumber = ref(false); const showMobile = ref(false); +// 可替换背景叠加层图片（类似微信更换主页背景） +const replaceableBgOverlay = ref('/static/sucai/image-06.png'); + + +// 更新背景叠加层方法 +const updateBgOverlay = (newOverlayImage) => { + replaceableBgOverlay.value = newOverlayImage; +}; + // 显示手机号（根据showMobile状态显示脱敏或未脱敏） const displayMobile = computed(() => { console.log('displayMobile computed, mobile:', mobile.value, 'showMobile:', showMobile.value); @@ -1263,10 +1276,18 @@ onShow(() => { } .profile-scroll { - width: 100%; - height: 100%; - position: relative; - z-index: 1; + width: 616rpx; + height: 955.2rpx; + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 2; + border-radius: 86rpx; + background: linear-gradient(133.78deg, rgba(154, 146, 255, 0.19) 9.69%, rgba(255, 202, 229, 0.19) 43.91%, rgba(255, 250, 253, 0.1881) 76.13%, rgba(63, 63, 76, 0.19) 91.61%); + backdrop-filter: blur(35.70000076293945px); + box-shadow: 2px 4px 1.8px 0px #D629291F; + } /* 隐藏滚动条 */ @@ -1276,6 +1297,35 @@ onShow(() => { height: 0; } +/* 右上角模块 */ +.top-right-module { + position: fixed; + width: 313.6rpx; + height: 73.6rpx; + top: -16rpx; + right: 0; + border-top-right-radius: 35.5rpx; + border-top-left-radius: 7rpx; + border-bottom-left-radius: 35.5rpx; + border-bottom-right-radius: 6rpx; + background: linear-gradient(135deg, #9E90FF 0%, #FFCAD3 100%); + z-index: 4; + display: flex; + align-items: center; + justify-content: center; +} + +.level-label { + color: #fff; + font-size: 24rpx; +} + +.level-value { + color: #fff; + font-size: 28rpx; + font-weight: bold; +} + /* 上半部分：用户信息区域 */ .top-section { position: relative; @@ -1298,12 +1348,26 @@ onShow(() => { /* filter: blur(20rpx); */ } +.replaceable-bg-layer { + position: fixed; + width: 100%; + height: 80vh; + z-index: 1; + pointer-events: none; +} + +.replaceable-bg-overlay-image { + width: 100%; + height: 100%; + object-fit: cover; +} + .background-overlay { display: none; } .nav-back { - position: relative; + position: fixed; top: 96rpx; left: 32rpx; width: 80rpx; @@ -1313,6 +1377,7 @@ onShow(() => { justify-content: center; /* background: rgba(255,255,255,0.5); border-radius: 50%; */ + z-index: 4; } .nav-back-icon { diff --git a/frontend/pages/square/components/CreationGrid.vue b/frontend/pages/square/components/CreationGrid.vue index 5377107..7e6154e 100644 --- a/frontend/pages/square/components/CreationGrid.vue +++ b/frontend/pages/square/components/CreationGrid.vue @@ -1,23 +1,88 @@ \ No newline at end of file + diff --git a/frontend/pages/square/square.vue b/frontend/pages/square/square.vue index c2aef6f..b825c1e 100644 --- a/frontend/pages/square/square.vue +++ b/frontend/pages/square/square.vue @@ -56,7 +56,7 @@ - + store.state.user?.userInfo?.nickname || '') +// const currentUserNickname = computed(() => store.state.user?.userInfo?.nickname || '') const currentStarId = ref(uni.getStorageSync('star_id') || null) // ========== UI State ========== @@ -289,30 +289,30 @@ onHide(() => { isActive.value = false }) -onLoad((options) => { - if (options && 'guide_debug' in options) { - const debugValue = options.guide_debug - const isDebug = debugValue === '1' || debugValue === 'true' - if (isDebug) { - uni.setStorageSync('guide_debug_mode', true) - uni.setStorageSync('is_new_user', true) - console.log('[Guide] 调试模式已开启') - } else { - uni.setStorageSync('guide_debug_mode', false) - uni.removeStorageSync('is_new_user') - console.log('[Guide] 调试模式已关闭') - } - } +// onLoad((options) => { +// if (options && 'guide_debug' in options) { +// const debugValue = options.guide_debug +// const isDebug = debugValue === '1' || debugValue === 'true' +// if (isDebug) { +// uni.setStorageSync('guide_debug_mode', true) +// uni.setStorageSync('is_new_user', true) +// console.log('[Guide] 调试模式已开启') +// } else { +// uni.setStorageSync('guide_debug_mode', false) +// uni.removeStorageSync('is_new_user') +// console.log('[Guide] 调试模式已关闭') +// } +// } - if (options && options.guide_key) { - console.log('[Guide] 收到引导跳转参数, guide_key:', options.guide_key, 'guide_step:', options.guide_step) - store.dispatch('guide/resumeGuide', options.guide_key).then(res => { - console.log('[Guide] resumeGuide 结果:', res) - }).catch(err => { - console.error('[Guide] resumeGuide 失败:', err) - }) - } -}) +// if (options && options.guide_key) { +// console.log('[Guide] 收到引导跳转参数, guide_key:', options.guide_key, 'guide_step:', options.guide_step) +// store.dispatch('guide/resumeGuide', options.guide_key).then(res => { +// console.log('[Guide] resumeGuide 结果:', res) +// }).catch(err => { +// console.error('[Guide] resumeGuide 失败:', err) +// }) +// } +// }) // 监听引导打开组件事件 uni.$on('guide:openComponent', (componentName) => { @@ -350,7 +350,7 @@ onUnmounted(() => { position: relative; z-index: 1; width: 100%; - height: calc(100vh - 64rpx); + height: 100vh; /* margin-top: 160rpx; */ padding: 240rpx 24rpx 0; box-sizing: border-box; diff --git a/图标2 (1).png b/frontend/static/icon/heart-icon-false.png similarity index 100% rename from 图标2 (1).png rename to frontend/static/icon/heart-icon-false.png diff --git a/frontend/static/icon/heart-icon.png b/frontend/static/icon/heart-icon.png index 6535768..5559ffe 100644 Binary files a/frontend/static/icon/heart-icon.png and b/frontend/static/icon/heart-icon.png differ diff --git a/frontend/static/icon/task.png b/frontend/static/icon/task.png index 8771971..0c0d0a2 100644 Binary files a/frontend/static/icon/task.png and b/frontend/static/icon/task.png differ diff --git a/图标1 (1).png b/图标1 (1).png deleted file mode 100644 index 5559ffe..0000000 Binary files a/图标1 (1).png and /dev/null differ