docs:增加文档

frontend/pages/square/components/HotCategoryBlock.vue

@@ -469,14 +469,20 @@ onUnmounted(() => {
   margin: 0 auto;
   width: 480rpx;
   height: 96rpx;
-  clip-path: inset(-200rpx 0 16rpx 0);
+  // clip-path: inset(-200rpx 0 16rpx 0);
   &::before {
     content: "";
     position: absolute;
     inset: 0;
-    background: linear-gradient(184deg, #ff5a5d -36.55%, #c2ebff 121.2%);
+    background: linear-gradient(
+      183deg,
+      #FF5A5D -36.55%, #C2EBFF 121.2%
+
+    );
     opacity: 0.8;
-    // backdrop-filter: blur(5.85px);
+    // Figma 用的就是 filter: blur(图形模糊),不是 backdrop-filter(背景模糊)
+    filter: blur(3.7px);
+    -webkit-filter: blur(3.7px);
     border-top-left-radius: 14px;
     border-top-right-radius: 13px;
     border-bottom-right-radius: 8px;
@@ -515,7 +521,7 @@ onUnmounted(() => {
 }
 
 .ranking-tab-item.active .ranking-tab-icon {
-  top: -24rpx;
+  top: -16rpx;
 }
 
 .ranking-tab-label {
@@ -530,6 +536,7 @@ onUnmounted(() => {
 .ranking-tab-icon {
   display: block;
   position: absolute;
+  
 }
 
 .ranking-tab-item.active .ranking-tab-label {
@@ -602,18 +609,21 @@ onUnmounted(() => {
   flex-direction: column; 
   position: relative;
   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%
-  );
+  // 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%
+  // );
+  background: url("/static/square/galaxy/xbbj.png") center no-repeat;
+    background-size: 100% 100%;
+    // pointer-events: none;
   // 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; 
+  // opacity: 0.8; 
   padding: 40rpx 20rpx 32rpx;
   overflow: hidden;
 }
@@ -787,6 +797,7 @@ onUnmounted(() => {
 /* Top 排名标签（顶到右边） */
 .top-badge {
   margin-left: auto; /* 推到右侧 */
+  margin-right:8rpx;
   min-width: 100rpx;
   height: 36rpx;
   border-radius: 18rpx;
@@ -809,6 +820,7 @@ onUnmounted(() => {
 }
 
 .badge-rank-number {
+  font-family: "Abyssinica SIL";
   font-size: 84rpx;
   font-weight: 600;
   /* 渐变填充到文字 */