feat:修改星榜

frontend/pages/square/components/HotCategoryBlock.vue

@@ -169,7 +169,7 @@ const tabs = [
     fetch: () => getHotRankingApi("displaying", null, 1, 11),
   },
   {
-    key: "trending",
+    key: "tongcheng",
     label: "同城榜",
     icon: "/static/square/galaxy/tongchengbang.png",
     iconWidth: 64,
@@ -310,26 +310,37 @@ onUnmounted(() => {
   position: relative;
 }
 
-/* Tab 栏 */
+/* Tab 栏 —— 与 Figma Rectangle 90 (83:268) 一一对应 */
 .ranking-tabs {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 16rpx;
   position: relative;
-  left: 50%;
+  /* 关键：去掉 left:50% + transform:translate(-50%) 这套组合
+     —— transform 会创建独立 stacking context，把子元素（active tab）锁在父级层级里，
+        导致即使给 .active 加 z-index:999 也浮不到 .items-grid 之上。
+     改用 margin:0 auto 水平居中，父级就不再创建 stacking context。 */
   top: 16rpx;
-  transform: translate(-50%);
-  opacity: 0.8;
-  border-top-left-radius: 14px;
-  border-top-right-radius: 13px;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 7px;
-  z-index: 1; /* 在内容网格之下 */
+  margin: 0 auto;
+
+  /* 父级不设 z-index（也不设 transform/opacity），让 inactive tab 默认层级
+     低于 .items-grid（grid 是 2）—— 这样 grid 就能遮住 top 栏被覆盖的部分。 */
   width: 480rpx;
   height: 96rpx;
-  background: linear-gradient(183.58deg, #ff5a5d -36.55%, #c2ebff 121.2%);
-  backdrop-filter: blur(11.699999809265137px);
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(184deg, #ff5a5d -36.55%, #c2ebff 121.2%);
+
+    opacity: 0.8;
+    backdrop-filter: blur(5.85px);
+    border-top-left-radius: 14px;
+    border-top-right-radius: 13px;
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 7px;
+  }
 }
 
 .ranking-tab-item {
@@ -346,14 +357,25 @@ onUnmounted(() => {
 }
 
 .ranking-tab-item.active {
-  background: linear-gradient(
-    185.9deg,
-    rgba(255, 90, 140, 0.98) 5.54%,
-    rgba(194, 235, 255, 0.98) 184.09%
-  );
-  backdrop-filter: blur(1.7999999523162842px);
-  height: 144rpx;
+  /* Figma active tab 尺寸 48x85px → 96x170rpx */
+  width: 96rpx;
+  height: 170rpx;
   top: 40rpx;
+  /* 显式加 z-index:3 + position:relative，让红色渐变能浮到 .items-grid（z-index:2）之上。
+     前提是 .ranking-tabs 不能创建 stacking context（已通过去掉 transform 保证）。 */
+  z-index: 1;
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      190.37deg,
+      rgba(255, 90, 140, 0.98) 5.5378%,
+      rgba(194, 235, 255, 0.98) 184.09%
+    );
+    opacity: 0.5;
+    backdrop-filter: blur(0.9px);
+  }
 }
 
 .ranking-tab-item.active .ranking-tab-icon {
@@ -443,16 +465,21 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column; /* 改为纵向排列，每张卡片独占一行 */
   position: relative;
-  z-index: 2; /* 在 tab 栏之上 */
-  /* 背景与父容器一致，看上去与 tab 栏融成一体 */
+  z-index: 2; /* 比 top 栏高（top 栏无 z-index），所以 grid 会盖住 inactive tab；
+                 但比 .ranking-tab-item.active 的 z-index:3 低，所以选中的红色渐变仍能浮出来。 */
+  /* 背景与 Figma node 80-259 一致 */
   background: linear-gradient(
-    161.28deg,
+    145.83deg,
     rgba(255, 90, 93, 0.2) 16.63%,
     rgba(76, 237, 255, 0.2) 48.19%,
     rgba(255, 122, 124, 0.2) 83.71%
   );
-  backdrop-filter: blur(9.300000190734863px);
-  border-radius: 12px;
+  backdrop-filter: blur(4.65px); /* Figma 是 4.65px，不是 9.3px */
+  border-top-left-radius: 13px; /* Figma: 左上 13px，其余 12px */
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+  border-bottom-left-radius: 12px;
+  opacity: 0.8; /* 与 Figma 一致 */
   padding: 40rpx 20rpx 0;
   overflow: hidden;
 }