From ca87faf98d3b9575ec91866ee594dfa8a57792db Mon Sep 17 00:00:00 2001
From: zheng020 <zheng02007@163.com>
Date: Wed, 10 Jun 2026 16:55:28 +0800
Subject: [PATCH] fix(stargalaxy): reverse top/bottom mask to fade header at
 top instead of bottom

---
 .../square/components/StarGalaxy/index.vue    | 172 +++++++++++-------
 1 file changed, 109 insertions(+), 63 deletions(-)

diff --git a/frontend/pages/square/components/StarGalaxy/index.vue b/frontend/pages/square/components/StarGalaxy/index.vue
index 68beeb2..e51fad1 100644
--- a/frontend/pages/square/components/StarGalaxy/index.vue
+++ b/frontend/pages/square/components/StarGalaxy/index.vue
@@ -1,13 +1,13 @@
 <template>
   <view class="stargalaxy-container">
     <!-- 装饰层：粉红渐变 overlay + 樱花粉光晕 + 暖黄光晕 -->
-    <view class="decoration-layer">
+    <!-- <view class="decoration-layer">
       <view class="halo-pink"></view>
       <view class="halo-yellow"></view>
-    </view>
+    </view> -->
 
     <!-- 标题 -->
-    <view class="title">★ 星河 ★</view>
+    <!-- <view class="title">★ 星河 ★</view> -->
 
     <!-- Loading 骨架 -->
     <view v-if="loading" class="skeleton-grid">
@@ -29,17 +29,17 @@
     <!-- Success -->
     <template v-else>
       <!-- 颁奖台：TOP 1-3 -->
-      <view class="podium-row">
-        <PodiumCard
-          v-for="(item, i) in podiumItems"
-          :key="item.id || i"
-          :item="item"
-          :rank="i + 4"
-          :size="PODIUM_SIZES[i + 4]"
-          :style="PODIUM_POSITIONS[i + 4]"
-          @cardClick="handleCardClick"
-        />
-      </view>
+      <!-- <view class="podium-row"> -->
+      <PodiumCard
+        v-for="(item, i) in podiumItems"
+        :key="item.id || i"
+        :item="item"
+        :rank="i + 4"
+        :size="PODIUM_SIZES[i + 4]"
+        :style="PODIUM_POSITIONS[i + 4]"
+        @cardClick="handleCardClick"
+      />
+      <!-- </view> -->
 
       <!-- 散落 9 item：TOP 4-12 -->
       <ScatteredRanks
@@ -49,91 +49,117 @@
       />
 
       <!-- 底部提示 -->
-      <view class="footer-hint">每日 0:00 更新榜单</view>
+      <!-- <view class="footer-hint">每日 0:00 更新榜单</view> -->
     </template>
   </view>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import PodiumCard from './PodiumCard.vue'
-import ScatteredRanks from './ScatteredRanks.vue'
-import { generateRingPositions } from './config.js'
-import { getHotRankingApi } from '@/utils/api.js'
-import { getAssetCoverRealUrl } from '@/utils/assetImageHelper.js'
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import PodiumCard from "./PodiumCard.vue";
+import ScatteredRanks from "./ScatteredRanks.vue";
+import { generateRingPositions } from "./config.js";
+import { getHotRankingApi } from "@/utils/api.js";
+import { getAssetCoverRealUrl } from "@/utils/assetImageHelper.js";
 
-const emit = defineEmits(['cardClick'])
+const emit = defineEmits(["cardClick"]);
 
 // 颁奖台 3 个位置的尺寸和位置（与 ScatteredRanks 的 rpx 单位对齐）
 const PODIUM_SIZES = {
-  4: { width: 240, height: 260 },  // TOP 1
-  5: { width: 200, height: 200 },  // TOP 2
-  6: { width: 192, height: 192 },  // TOP 3
-}
+  4: { width: 240, height: 260 }, // TOP 1
+  5: { width: 200, height: 200 }, // TOP 2
+  6: { width: 192, height: 192 }, // TOP 3
+};
 const PODIUM_POSITIONS = {
-  4: { position: 'absolute', top: '400rpx', left: '50%', transform: 'translateX(-50%)' },
-  5: { position: 'absolute', top: '120rpx', left: '60rpx' },
-  6: { position: 'absolute', top: '150rpx', right: '60rpx' },
-}
+  4: {
+    position: "absolute",
+    top: "400rpx",
+    left: "50%",
+    transform: "translateX(-50%)",
+  },
+  5: { position: "absolute", top: "120rpx", left: "60rpx" },
+  6: { position: "absolute", top: "150rpx", right: "60rpx" },
+};
 
-const items = ref([])
-const loading = ref(true)
-const error = ref(false)
-const ringPositions = generateRingPositions()
+const items = ref([]);
+const loading = ref(true);
+const error = ref(false);
+const ringPositions = generateRingPositions();
 
-const podiumItems = computed(() => items.value.slice(0, 3))
-const scatteredItems = computed(() => items.value.slice(3, 12))
+const podiumItems = computed(() => items.value.slice(0, 3));
+const scatteredItems = computed(() => items.value.slice(3, 12));
 
 async function resolveUrl(item) {
-  const cover = item.cover_url || item.cover_image || ''
+  const cover = item.cover_url || item.cover_image || "";
   if (cover) {
-    item.cover_url = await getAssetCoverRealUrl(cover)
+    item.cover_url = await getAssetCoverRealUrl(cover);
   }
-  return item
+  return item;
 }
 
 async function loadData() {
-  loading.value = true
-  error.value = false
+  loading.value = true;
+  error.value = false;
   try {
-    const res = await getHotRankingApi('displaying', null, 1, 12)
+    const res = await getHotRankingApi("displaying", null, 1, 12);
     if (res && res.code === 200 && res.data?.items) {
       items.value = await Promise.all(
         res.data.items.map(async (item) => {
-          return await resolveUrl({ ...item, id: item.id || item.asset_id })
-        })
-      )
+          return await resolveUrl({ ...item, id: item.id || item.asset_id });
+        }),
+      );
     } else {
-      items.value = []
+      items.value = [];
     }
   } catch (e) {
-    console.error('[StarGalaxy] 加载失败', e?.message ?? e)
-    error.value = true
+    console.error("[StarGalaxy] 加载失败", e?.message ?? e);
+    error.value = true;
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }
 
 function handleCardClick(item) {
-  emit('cardClick', item)
+  emit("cardClick", item);
 }
 
 onMounted(() => {
-  loadData()
-})
+  loadData();
+});
 
 onUnmounted(() => {
   // 清理（如有 timer）
-})
+});
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .stargalaxy-container {
   position: relative;
   width: 750rpx;
   min-height: 1440rpx;
   padding-bottom: 200rpx;
   overflow: hidden;
+  // [方案3] 伪元素承载 bj.png，对图片单独设 opacity
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: url("/static/square/galaxy/bj.png") center / cover no-repeat;
+    pointer-events: none;
+    z-index: 0;
+    bottom: 512rpx;
+    // 顶部渐隐蒙版：让 StarGalaxy 顶部 20% 渐变到透明，
+    // 上方 header/页面 bj.png 从顶部自然透出，形成柔和衔接
+    // 700rpx 中 0-20%(0-140rpx) 完全透明，20-40%(140-280rpx) 渐变到不透明
+    mask-image: linear-gradient(to bottom, transparent 0%, transparent 20%, #000 40%, #000 100%);
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      transparent 20%,
+      #000 40%,
+      #000 100%
+    );
+  }
 }
 
 .decoration-layer {
@@ -141,7 +167,13 @@ onUnmounted(() => {
   inset: 0;
   pointer-events: none;
   z-index: 0;
-  background: linear-gradient(179deg, #FFE5E5 0%, #F3A0A1 0%, #FF9C9C 86%, #FF2024 100%);
+  background: linear-gradient(
+    179deg,
+    #ffe5e5 0%,
+    #f3a0a1 0%,
+    #ff9c9c 86%,
+    #ff2024 100%
+  );
   opacity: 0.85;
 }
 
@@ -152,7 +184,7 @@ onUnmounted(() => {
   transform: translateX(-50%);
   width: 680rpx;
   height: 340rpx;
-  background: #F3D3E3;
+  background: #f3d3e3;
   border-radius: 50%;
   filter: blur(60rpx);
   opacity: 0.7;
@@ -165,7 +197,7 @@ onUnmounted(() => {
   transform: translateX(-50%);
   width: 400rpx;
   height: 400rpx;
-  background: #FFFABD;
+  background: #fffabd;
   border-radius: 50%;
   filter: blur(50rpx);
   opacity: 0.3;
@@ -178,7 +210,7 @@ onUnmounted(() => {
   transform: translateX(-50%);
   font-size: 40rpx;
   font-weight: 900;
-  color: #FFFABD;
+  color: #fffabd;
   text-shadow: -1rpx 1rpx 4rpx rgba(206, 9, 9, 0.84);
   letter-spacing: 8rpx;
   z-index: 5;
@@ -205,7 +237,12 @@ onUnmounted(() => {
   background: rgba(255, 255, 255, 0.15);
   border-radius: 12rpx;
   animation: shimmer 1.5s linear infinite;
-  background-image: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.05) 100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.05) 0%,
+    rgba(255, 255, 255, 0.25) 50%,
+    rgba(255, 255, 255, 0.05) 100%
+  );
   background-size: 200% 100%;
 }
 
@@ -214,14 +251,23 @@ onUnmounted(() => {
   height: 80rpx;
   background: rgba(255, 255, 255, 0.15);
   border-radius: 8rpx;
-  background-image: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.05) 100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.05) 0%,
+    rgba(255, 255, 255, 0.25) 50%,
+    rgba(255, 255, 255, 0.05) 100%
+  );
   background-size: 200% 100%;
   animation: shimmer 1.5s linear infinite;
 }
 
 @keyframes shimmer {
-  0%   { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
 }
 
 .error-state {
@@ -255,7 +301,7 @@ onUnmounted(() => {
 .retry-btn {
   display: inline-block;
   padding: 16rpx 60rpx;
-  background: linear-gradient(135deg, #FFD700, #FF6B6B);
+  background: linear-gradient(135deg, #ffd700, #ff6b6b);
   color: #fff;
   border-radius: 30rpx;
   font-size: 28rpx;