style(ui): 深度优化首页分类导航HOT热门角标，精简标签滥用并强化电竞流光质感

pwuniapp/common/icons.js

@@ -15,6 +15,12 @@ export const ICONS = {
       <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
     </svg>
   `),
+
+  flame: svgToUri(`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFFFFF">
+      <path d="M12 2c-.6 2.7-2.6 4.7-3.9 6.2C6.5 10 5 12.3 5 15c0 3.9 3.1 7 7 7s7-3.1 7-7c0-2.3-1.2-4.4-2.8-6-1.5-1.5-3.6-3.7-4.2-7zM12 19c-2.2 0-4-1.8-4-4 0-1.5.8-2.8 1.9-3.8.3-.3.8-.1.8.3.1 1.2.9 2.2 2.1 2.5.4.1.7.5.7.9 0 2.3-1.5 4.1-1.5 4.1z"/>
+    </svg>
+  `),
   
   // 游戏分类
   gameAll: svgToUri(`

pwuniapp/common/mock.js

@@ -1,11 +1,11 @@
 import { ICONS } from './icons.js';
 
 export const GAMES_LIST = [
-  { id: 'all', name: '全部', icon: ICONS.gameAll, hot: true },
+  { id: 'all', name: '全部', icon: ICONS.gameAll, hot: false },
   { id: 'wzry', name: '王者荣耀', icon: ICONS.gameCrown, hot: true },
-  { id: 'hpjy', name: '和平精英', icon: ICONS.gameCrosshair, hot: true },
-  { id: 'lol', name: '英雄联盟', icon: ICONS.gameSwords, hot: true },
-  { id: 'val', name: '无畏契约', icon: ICONS.gameTarget, hot: true },
+  { id: 'hpjy', name: '和平精英', icon: ICONS.gameCrosshair, hot: false },
+  { id: 'lol', name: '英雄联盟', icon: ICONS.gameSwords, hot: false },
+  { id: 'val', name: '无畏契约', icon: ICONS.gameTarget, hot: false },
   { id: 'yjjw', name: '永劫无间', icon: ICONS.gameBlade, hot: false },
   { id: 'pubg', name: '绝地求生', icon: ICONS.gameTrophy, hot: false },
 ];

pwuniapp/pages/index/index.vue

@@ -20,7 +20,9 @@
         >
           <image class="cat-icon-svg" :src="item.icon" mode="aspectFit" />
           <text class="cat-name">{{ item.name }}</text>
-          <view v-if="item.hot" class="cat-badge">HOT</view>
+          <view v-if="item.hot" class="cat-badge">
+            <text class="badge-text">HOT</text>
+          </view>
         </view>
       </view>
     </scroll-view>
@@ -241,7 +243,7 @@ const navTo = (url) => {
 
 .category-scroll {
   white-space: nowrap;
-  padding: 10rpx 32rpx 20rpx;
+  padding: 16rpx 32rpx 20rpx;
   width: 100%;
   box-sizing: border-box;
 
@@ -277,15 +279,28 @@ const navTo = (url) => {
     }
     .cat-badge {
       position: absolute;
-      top: -8rpx;
+      top: -10rpx;
       right: -8rpx;
-      background: #EF4444;
-      color: #FFF;
-      font-size: 16rpx;
-      padding: 2rpx 8rpx;
-      border-radius: 12rpx;
-      font-weight: 700;
-      box-shadow: 0 2rpx 6rpx rgba(239, 68, 68, 0.4);
+      height: 26rpx;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, #FF3B30 0%, #FF2D55 100%);
+      border: 2rpx solid #0A0F1D;
+      padding: 0 10rpx;
+      border-radius: 14rpx;
+      box-shadow: 0 4rpx 12rpx rgba(255, 45, 85, 0.5);
+      z-index: 3;
+      pointer-events: none;
+
+      .badge-text {
+        color: #FFFFFF;
+        font-size: 16rpx;
+        font-weight: 800;
+        font-style: italic;
+        line-height: 1;
+        letter-spacing: 1rpx;
+      }
     }
 
     &.active {