From c441388fd0d21c7d38131488f271a7054670b073 Mon Sep 17 00:00:00 2001
From: zheng020 <zheng02007@163.com>
Date: Thu, 11 Jun 2026 13:31:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E6=98=9F=E6=A6=9C?=
 =?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../square/components/HotCategoryBlock.vue    | 42 +++++--------------
 1 file changed, 11 insertions(+), 31 deletions(-)

diff --git a/frontend/pages/square/components/HotCategoryBlock.vue b/frontend/pages/square/components/HotCategoryBlock.vue
index e2c8331..20e1bfe 100644
--- a/frontend/pages/square/components/HotCategoryBlock.vue
+++ b/frontend/pages/square/components/HotCategoryBlock.vue
@@ -413,34 +413,26 @@ onUnmounted(() => {
 
 .content-scroll {
   flex: 1;
-  min-height: 0; /* flex 子项需要 min-height: 0 才能正确伸缩 */
+  min-height: 0; 
   overflow: hidden;
 }
 
-/* Tab 栏 —— 与 Figma Rectangle 90 (83:268) 一一对应 */
 .ranking-tabs {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 16rpx;
   position: relative;
-  /* 关键：去掉 left:50% + transform:translate(-50%) 这套组合
-     —— transform 会创建独立 stacking context，把子元素（active tab）锁在父级层级里，
-        导致即使给 .active 加 z-index:999 也浮不到 .items-grid 之上。
-     改用 margin:0 auto 水平居中，父级就不再创建 stacking context。 */
   top: 16rpx;
   margin: 0 auto;
-
-  /* 父级不设 z-index（也不设 transform/opacity），让 inactive tab 默认层级
-     低于 .items-grid（grid 是 2）—— 这样 grid 就能遮住 top 栏被覆盖的部分。 */
   width: 480rpx;
   height: 96rpx;
+  clip-path: inset(-200rpx 0 16rpx 0);
   &::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;
@@ -453,23 +445,17 @@ onUnmounted(() => {
 .ranking-tab-item {
   height: 80rpx;
   width: 88rpx;
-  border-radius: 20rpx;
   display: flex;
   align-items: center;
   flex-direction: column;
   transition: all 0.25s ease;
-  /* 保持 position: relative，让 .ranking-tab-icon 的 position: absolute 能以本元素为定位基准。
-     注意：不能写 position: absolute，否则 4 个 tab 会从 flex 流中抽离并全部堆在 left:0 重叠。 */
   position: relative;
 }
 
 .ranking-tab-item.active {
-  /* Figma active tab 尺寸 48x85px → 96x170rpx */
   width: 96rpx;
-  height: 170rpx;
+  height: 160rpx;
   top: 40rpx;
-  /* 显式加 z-index:3 + position:relative，让红色渐变能浮到 .items-grid（z-index:2）之上。
-     前提是 .ranking-tabs 不能创建 stacking context（已通过去掉 transform 保证）。 */
   z-index: 1;
   &::before {
     content: "";
@@ -482,6 +468,7 @@ onUnmounted(() => {
     );
     opacity: 0.5;
     backdrop-filter: blur(0.9px);
+    border-radius: 20rpx;
   }
 }
 
@@ -510,7 +497,7 @@ onUnmounted(() => {
 /* 骨架屏 */
 .grid-skeleton {
   display: flex;
-  flex-direction: column; /* 与 items-grid 保持一致：纵向 */
+  flex-direction: column;
   position: relative;
   z-index: 2;
   border-radius: 12px;
@@ -570,27 +557,21 @@ onUnmounted(() => {
 /* 内容网格 */
 .items-grid {
   display: flex;
-  flex-direction: column; /* 改为纵向排列，每张卡片独占一行 */
+  flex-direction: column; 
   position: relative;
-  z-index: 2; /* 比 top 栏高（top 栏无 z-index），所以 grid 会盖住 inactive tab；
-                 但比 .ranking-tab-item.active 的 z-index:3 低，所以选中的红色渐变仍能浮出来。 */
-  /* 背景与 Figma node 80-259 一致 */
+  z-index: 2; 
   background: linear-gradient(
     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(4.65px); /* Figma 是 4.65px，不是 9.3px */
-  border-top-left-radius: 13px; /* Figma: 左上 13px，其余 12px */
+  backdrop-filter: blur(4.65px); 
+  border-top-left-radius: 13px; 
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
   border-bottom-left-radius: 12px;
-  opacity: 0.8; /* 与 Figma 一致 */
-  /* padding: 40rpx 20rpx 0; */
-  /* 修复：原 80rpx 底部安全距离在 Task 2 被 .hot-category-wrapper 固定 height 替代,
-     重新加上 32rpx 底部 padding 保证最后一行卡片不会紧贴 scroll-view 底边
-     （避免与 BottomNav 的 fixed 区域视觉重叠）。 */
+  opacity: 0.8; 
   padding: 40rpx 20rpx 32rpx;
   overflow: hidden;
 }
@@ -672,14 +653,13 @@ onUnmounted(() => {
 .grid-card-top-5 {
   position: relative;
   overflow: hidden;
-  // [方案3] 伪元素承载 bj.png，对图片单独设 opacity
   &::before {
     content: "";
     position: absolute;
     inset: 0;
     background: url("/static/square/galaxy/TOP4.png") center no-repeat;
     background-size: 100% 100%;
-    opacity: 0.8; // ⬅ 调这个数控制图片透明度（0=完全透明，1=完全不透明）
+    opacity: 0.8; 
     pointer-events: none;
     z-index: 0;
   }