From 021782d42f42b62d36bbcac2f8ad968928b8274f Mon Sep 17 00:00:00 2001
From: zheng020 <zheng02007@163.com>
Date: Wed, 10 Jun 2026 18:01:39 +0800
Subject: [PATCH] style(stargalaxy): add topbj3.png background-image to
 .podium-card (shared, not rank-specific)

---
 .../components/StarGalaxy/PodiumCard.vue      | 82 +++++++++----------
 1 file changed, 40 insertions(+), 42 deletions(-)

diff --git a/frontend/pages/square/components/StarGalaxy/PodiumCard.vue b/frontend/pages/square/components/StarGalaxy/PodiumCard.vue
index 563309d..0a6c3fc 100644
--- a/frontend/pages/square/components/StarGalaxy/PodiumCard.vue
+++ b/frontend/pages/square/components/StarGalaxy/PodiumCard.vue
@@ -33,12 +33,18 @@ function handleClick() {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .podium-card {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
+  // 公共背景图（不随 rank 变化，所有 podium 卡片都显示）
+  // 放在 .podium-N 之前以确保不被任何具体 rank 的样式覆盖
+  background-image: url("/static/square/galaxy/topbj3.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 /* TOP 1: 中央大卡（最大） */
@@ -46,44 +52,28 @@ function handleClick() {
   top: 400rpx;
   left: 50%;
   transform: translateX(-50%);
-  width: 240rpx;
-  height: 260rpx;
+  width: 96rpx;
+  height: 128rpx;
 }
 
-/* TOP 2: 左上 */
+/* TOP 2: 右上 */
 .podium-2 {
-  top: 120rpx;
-  left: 60rpx;
-  width: 200rpx;
-  height: 200rpx;
-}
-
-/* TOP 3: 右上 */
-.podium-3 {
   top: 150rpx;
   right: 60rpx;
-  width: 192rpx;
-  height: 192rpx;
+  width: 96rpx;
+  height: 128rpx;
 }
 
-/* TOP N 标签（按 rank 区分样式） */
-.podium-1 .top-label {
-  width: 96rpx;
-  height: 22rpx;
-  font-size: 13rpx;
-  background: radial-gradient(ellipse, #ffd700, #fff6a8 30%, #daa520 100%);
-}
-.podium-2 .top-label,
-.podium-3 .top-label {
-  width: 78rpx;
-  height: 18rpx;
-  font-size: 11rpx;
-}
-.podium-2 .top-label {
-  background: radial-gradient(ellipse, #c0c0c0, #e8e8e8 50%, #7a7a7a);
-}
-.podium-3 .top-label {
-  background: radial-gradient(ellipse, #cd7f32, #e8a45c 50%, #a0522d);
+/* TOP 3: 左上 */
+.podium-3 {
+  top: 152rpx;
+  left: 96rpx;
+  width: 160rpx;
+  height: 208rpx;
+  .podium-frame {
+    width: 160rpx;
+    height: 208rpx;
+  }
 }
 
 .podium-frame {
@@ -91,14 +81,14 @@ function handleClick() {
   inset: 0;
   width: 100%;
   height: 100%;
-  z-index: 0;
+  z-index: 2;
   pointer-events: none;
+  transform: scale(1.5);
 }
 
 .cover-wrap {
   position: absolute;
-  inset: 10rpx;
-  overflow: hidden;
+  inset: 0;
   z-index: 2;
 }
 
@@ -110,19 +100,27 @@ function handleClick() {
 }
 
 .top-label {
+  width: 64rpx;
   position: absolute;
-  bottom: -4rpx;
+  bottom: -64rpx;
   left: 50%;
   transform: translateX(-50%);
-  border-radius: 11rpx;
+  color: #fffabd;
+  font-size: 20rpx;
+  font-weight: 800;
+  border-radius: 16rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 900;
-  color: #fff;
-  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.5);
-  box-shadow: 0 6rpx 16rpx rgba(255, 140, 0, 0.5);
+  text-shadow: -1px 1px 4px #ce0909d6;
+  background: linear-gradient(
+    93.1deg,
+    rgba(224, 180, 247, 0.71) -12.06%,
+    rgba(178, 246, 204, 0.71) 52.09%,
+    rgba(98, 178, 244, 0.71) 163.5%
+  );
+  backdrop-filter: blur(11.699999809265137px);
   z-index: 7;
-  letter-spacing: 1rpx;
+  padding: 0 16rpx;
 }
 </style>