feat: 修改square星河组件的样式修改和bug

frontend/pages/square/components/ContentTabs.vue

@@ -25,7 +25,7 @@
 
 <script setup>
 const props = defineProps({
-  modelValue: { type: String, default: "hot" },
+  modelValue: { type: String, default: "xinghe" },
 });
 
 const emit = defineEmits(["update:modelValue"]);
@@ -80,8 +80,16 @@ const tabs = [
   height: 64rpx;
   border-radius: 16px;
   overflow: visible;
-  background: #d9d9d91c;
+  /* 玻璃光边：顶部白色高光渐变到底部半透明灰（对应 Figma GLASS 效果） */
-  box-shadow: 0px 4px 4px 0px #b3323240;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.55) 0%,
+    rgba(255, 255, 255, 0.2) 28%,
+    rgba(217, 217, 217, 0.11) 100%
+  );
+  box-shadow:
+    inset 0 1rpx 0 rgba(255, 255, 255, 0.6),
+    0px 4px 4px 0px #b3323240;
 }
 
 .tab-item {
@@ -140,20 +148,24 @@ const tabs = [
   z-index: 1;
   font-size: 24rpx;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.95);
+  color: #ffffff;
-  /* color: #ffffff; */
+  opacity: 0.8;
-  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.8);
+  text-shadow: 0 4rpx 5.6rpx rgba(0, 0, 0, 0.73);
   white-space: nowrap;
   margin-left: 14rpx;
 }
 
 .tab-item.active{
+  /* 渐变方向 135deg 对应 Figma GLASS lightAngle: -45（光从左上照入） */
   background: linear-gradient(
-    90deg,
+    135deg,
-    rgba(255, 222, 8, 0.2989) -17.54%,
+    rgba(255, 222, 8, 0.49) 0%,
-    rgba(252, 100, 102, 0.61) 64.4%,
+    rgba(252, 100, 102, 1) 61.1%,
-    rgba(244, 88, 104, 0.61) 116.67%
+    rgba(244, 88, 104, 1) 100%
   );
-  box-shadow: 2px 2px 4px 0px #f2151578;
+  box-shadow:
+    inset 0 1rpx 0 rgba(255, 255, 255, 0.45),
+    2px 2px 4px 0px #f2151578;
+  opacity: 0.84;
 }
 </style>

frontend/pages/square/components/StarGalaxy/PodiumCard.vue

@@ -45,10 +45,11 @@ function handleClick() {
 
 /* TOP 1: 中央大卡（最大） */
 .podium-1 {
-  top: 400rpx;
+  top: 360rpx;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translateX(-50%) ;
   animation: podium-float-center 3s ease-in-out infinite;
+  z-index: 3;
   &::before {
     content: "";
     position: absolute;
@@ -58,27 +59,27 @@ function handleClick() {
     background-position: center;
     background-repeat: no-repeat;
     opacity: 0.95;
-    transform: scale(1.15);
+    transform: scale(1.05);
   }
   .cover-wrap {
     width: 144rpx;
-    height: 240rpx;
+    height: 208rpx;
     bottom: 136rpx;
-    left: 32rpx;
+    left: 19.2rpx;
     .podium-frame {
       width: 100%;
       height: 100%;
     }
   }
-  .top-label{
+  .top-label {
-    left: 58%;
+    left: 55%;
   }
 }
 
 /* TOP 2: 左上 */
 .podium-2 {
-  top: 184rpx;
+  top: 128rpx;
-  left: -96rpx;
+  right: -120rpx;
   animation: podium-float 3.4s ease-in-out infinite;
   animation-delay: -1.2s;
   &::before {
@@ -90,12 +91,13 @@ function handleClick() {
     background-position: center;
     background-repeat: no-repeat;
     opacity: 0.95;
-    transform: rotate(-14deg) scale(0.85);
+    transform: rotate(-19deg) scale(0.75);
   }
   .cover-wrap {
-    width: 144rpx;
+    width: 121.6rpx;
-    height: 240rpx;
+    height: 160rpx;
-    bottom: 72rpx;
+    bottom: 88rpx;
+    left: -8rpx;
     .podium-frame {
       width: 100%;
       height: 100%;
@@ -105,8 +107,8 @@ function handleClick() {
 
 /* TOP 3: 右上 */
 .podium-3 {
-  top: 152rpx;
+  top: 160rpx;
-  right: -96rpx;
+  left: -96rpx;
   animation: podium-float 3.2s ease-in-out infinite;
   animation-delay: -2s;
   &::before {
@@ -118,12 +120,12 @@ function handleClick() {
     background-position: center;
     background-repeat: no-repeat;
     opacity: 0.95;
-    transform: scale(0.85);
+    transform: scale(0.9) rotate(30deg);
   }
   .cover-wrap {
-    width: 160rpx;
+    width: 96rpx;
-    height: 180rpx;
+    height: 152rpx;
-    bottom: 72rpx;
+    bottom: 104rpx;
     .podium-frame {
       width: 100%;
       height: 100%;
@@ -155,7 +157,7 @@ function handleClick() {
 .top-label {
   width: 64rpx;
   position: absolute;
-  bottom: 48rpx;
+  bottom: 96rpx;
   left: 50%;
   transform: translateX(-50%);
   color: #fffabd;

frontend/pages/square/components/StarGalaxy/ScatteredRanks.vue

@@ -32,6 +32,7 @@
       <image class="ring-frame" :src="ringFrameSrc(p.rank)" mode="aspectFit" />
       <image
         class="cover-image"
+        :class="{ [`cover-image-${i}`]: true }"
         :src="items[i]?.cover_url || items[i]?.cover_image || ''"
         mode="aspectFill"
       />
@@ -82,7 +83,7 @@ function ringItemStyle(p) {
   return {
     left: BASE_X + "rpx",
     top: BASE_Y + "rpx",
-    zIndex: p.zIndex,
+    //zIndex: p.zIndex,
     transform: SLOT_TRANSFORMS[p.rank - 4],
     animationDelay: RING_DELAYS[p.rank - 4] + "s",
   };
@@ -114,10 +115,10 @@ function handleClick(item) {
 <style scoped>
 .scattered-ranks {
   position: absolute;
-  top: 22%;
+  top: 18%;
   left: 22%;
-  width: 750rpx;
+  /* width: 750rpx; */
-  height: 720rpx;
+  /* height: 720rpx; */
   pointer-events: none;
 }
 
@@ -133,8 +134,8 @@ function handleClick(item) {
 
 .ring-item {
   position: absolute;
-  width: 84rpx;
+  width: 136rpx;
-  height: 104rpx; /* 14 label + 2 gap + 56 cover */
+  height: 168rpx; /* 14 label + 2 gap + 56 cover */
   transform-origin: center;
   pointer-events: auto;
   cursor: pointer;
@@ -151,6 +152,8 @@ function handleClick(item) {
   height: 100%;
   z-index: 2;
   pointer-events: none;
+  padding: 8rpx 0 16rpx;
+  box-sizing: border-box;
 }
 
 .top-label {
@@ -184,12 +187,18 @@ function handleClick(item) {
   z-index: 1; /* between frame and label */
   position: absolute;
   top: 0;
+  padding: 27.2rpx;
+  box-sizing: border-box;
+}
+
+.cover-image-0{
+  padding: 32rpx;
 }
 
 .base-image {
   position: absolute;
   bottom: -24rpx;
-  left: -8rpx;
+  left: 8rpx;
   width: 96rpx; /* 比 cover (84rpx) 略宽，呈现"承托"感 */
   height: 32rpx;
   z-index: 0; /* 位于 cover 之下 */
@@ -202,33 +211,43 @@ function handleClick(item) {
 @keyframes orbit {
   0% {
     transform: translate(0, 0) scale(1.15);
+    z-index: 9;
   }
   11.11% {
     transform: translate(84px, -13px) scale(1.05);
+    z-index: 8;
   }
   22.22% {
     transform: translate(157px, -43px) scale(0.95);
+    z-index: 7;
   }
   33.33% {
     transform: translate(113px, -83px) scale(0.85);
+    z-index: 5;
   }
   44.44% {
     transform: translate(45px, -107px) scale(0.75);
+    z-index: 3;
   }
   55.55% {
     transform: translate(-45px, -107px) scale(0.75);
+    z-index: 3;
   }
   66.66% {
     transform: translate(-113px, -83px) scale(0.85);
+    z-index: 5;
   }
   77.77% {
     transform: translate(-156px, -43px) scale(0.95);
+    z-index: 7;
   }
   88.88% {
     transform: translate(-84px, -13px) scale(1.05);
+    z-index: 8;
   }
   100% {
     transform: translate(0, 0) scale(1.15);
+    z-index: 9;
   }
 }
 
@@ -248,5 +267,5 @@ function handleClick(item) {
   .crown {
     animation: none !important;
   }
-} */
+}  */
 </style>