From 7f831c4fbe0066d3d25df4142a08812b6c97f6d0 Mon Sep 17 00:00:00 2001
From: zheng020 <zheng02007@163.com>
Date: Wed, 10 Jun 2026 17:18:35 +0800
Subject: [PATCH] refactor(stargalaxy): move PODIUM_SIZES/POSITIONS into
 PodiumCard for self-contained layout

---
 .../components/StarGalaxy/PodiumCard.vue      | 31 ++++++++++++----
 .../square/components/StarGalaxy/index.vue    | 36 +++++++------------
 2 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/frontend/pages/square/components/StarGalaxy/PodiumCard.vue b/frontend/pages/square/components/StarGalaxy/PodiumCard.vue
index 9e492f0..23cfb0c 100644
--- a/frontend/pages/square/components/StarGalaxy/PodiumCard.vue
+++ b/frontend/pages/square/components/StarGalaxy/PodiumCard.vue
@@ -2,7 +2,7 @@
   <view
     class="podium-card"
     :class="['podium-' + rank]"
-    :style="cardStyle"
+    :style="[cardStyle, internalPosition]"
     @click="handleClick"
   >
     <!-- 相框（最底层） -->
@@ -28,11 +28,30 @@ import { computed } from "vue";
 const props = defineProps({
   item: { type: Object, required: true },
   rank: { type: Number, required: true, validator: (v) => v >= 4 && v <= 6 },
-  size: { type: Object, default: () => ({ width: 120, height: 130 }) },
 });
 
 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
+};
+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" },
+};
+
+const internalSize = computed(() => PODIUM_SIZES[props.rank]);
+const internalPosition = computed(() => PODIUM_POSITIONS[props.rank]);
+
 // 内部 rank 4/5/6 对外显示 1/2/3（颁奖台：TOP 1/2/3）
 const displayRank = computed(() => props.rank - 3);
 
@@ -55,10 +74,10 @@ const labelSizes = {
   6: { w: 78, h: 18, font: 11 },
 };
 
-const cardStyle = {
-  width: props.size.width + "rpx",
-  height: props.size.height + "rpx",
-};
+const cardStyle = computed(() => ({
+  width: internalSize.value.width + "rpx",
+  height: internalSize.value.height + "rpx",
+}));
 
 const labelStyle = {
   width: labelSizes[props.rank].w + "rpx",
diff --git a/frontend/pages/square/components/StarGalaxy/index.vue b/frontend/pages/square/components/StarGalaxy/index.vue
index e51fad1..74b9b9b 100644
--- a/frontend/pages/square/components/StarGalaxy/index.vue
+++ b/frontend/pages/square/components/StarGalaxy/index.vue
@@ -35,8 +35,6 @@
         :key="item.id || i"
         :item="item"
         :rank="i + 4"
-        :size="PODIUM_SIZES[i + 4]"
-        :style="PODIUM_POSITIONS[i + 4]"
         @cardClick="handleCardClick"
       />
       <!-- </view> -->
@@ -64,23 +62,6 @@ import { getAssetCoverRealUrl } from "@/utils/assetImageHelper.js";
 
 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
-};
-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" },
-};
-
 const items = ref([]);
 const loading = ref(true);
 const error = ref(false);
@@ -138,25 +119,32 @@ onUnmounted(() => {
   width: 750rpx;
   min-height: 1440rpx;
   padding-bottom: 200rpx;
-  overflow: hidden;
+  top: -128rpx;
   // [方案3] 伪元素承载 bj.png，对图片单独设 opacity
   &::before {
     content: "";
     position: absolute;
     inset: 0;
-    background: url("/static/square/galaxy/bj.png") center / cover no-repeat;
+    background: url("/static/square/galaxy/bj.png") center no-repeat;
+    background-size: 115% 100%;
     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%);
+    mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      transparent 0%,
+      #000 14%,
+      #000 100%
+    );
     -webkit-mask-image: linear-gradient(
       to bottom,
       transparent 0%,
-      transparent 20%,
-      #000 40%,
+      transparent 0%,
+      #000 14%,
       #000 100%
     );
   }