refactor(ui): 优化首页网格导航视觉体验

- 容器升级：统一圆角卡片、自定义阴影和装饰光晕
- 图标优化：增大尺寸，增加渐变背景和微边框
- 交互增强：添加点击微缩放效果 (active:scale-95)
- 排版优化：调整文字字重，提升精致感
- 保持首页三个核心板块视觉统一性

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

@@ -5,6 +5,23 @@
 
 
 ---
 ---
 
 
+## [2026-02-10] - 优化首页网格导航视觉体验
+
+### 优化
+- **UI 升级**：将“网格导航”板块升级为“高端专业”风格，与整体页面保持一致
+  - 容器：统一采用圆角卡片、自定义阴影 (`box-shadow`) 和装饰光晕
+  - 图标：增大尺寸，增加渐变背景 (`bg-gradient-to-br`) 和微边框
+  - 交互：增加点击时的微缩放效果 (`active:scale-95`)
+  - 排版：调整文字字重，提升精致感
+
+**详细信息**：
+- **影响文件**: src/pages/index/index.vue
+- **技术栈**: Vue 3, Tailwind CSS
+- **测试状态**: 待验证
+- **备注**: 保持了首页三个核心板块（网格导航、热卖产品、热门资料）的视觉统一性
+
+---
+
 ## [2026-02-10] - 优化首页热卖产品板块视觉体验
 ## [2026-02-10] - 优化首页热卖产品板块视觉体验
 
 
 ### 优化
 ### 优化

@@ -22,18 +22,24 @@
     <!-- Main Content -->
     <!-- Main Content -->
     <view class="relative z-10 mt-[40rpx] px-[24rpx]">
     <view class="relative z-10 mt-[40rpx] px-[24rpx]">
       <!-- Grid Icons -->
       <!-- Grid Icons -->
-      <view class="bg-white rounded-[32rpx] shadow-sm p-[40rpx] mb-[24rpx]">
-        <view class="flex flex-wrap">
+      <view class="relative bg-white rounded-[32rpx] p-[40rpx] mb-[24rpx] border border-gray-100 overflow-hidden" style="box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.04);">
+        <!-- 背景装饰 -->
+        <view class="absolute -right-[60rpx] -top-[60rpx] w-[200rpx] h-[200rpx] bg-blue-50 rounded-full opacity-40 blur-[40rpx] pointer-events-none"></view>
+
+        <view class="relative z-10 flex flex-wrap">
           <view
           <view
-            class="flex flex-col items-center w-1/3 mb-[40rpx]"
+            class="flex flex-col items-center w-1/3 mb-[40rpx] group"
             v-for="(item, index) in loopNav"
             v-for="(item, index) in loopNav"
             :key="index"
             :key="index"
             @tap="handleGridNav(item)"
             @tap="handleGridNav(item)"
           >
           >
-            <view class="w-[100rpx] h-[100rpx] rounded-[24rpx] bg-blue-50 flex items-center justify-center mb-[16rpx]">
-              <IconFont :name="item.icon" class="text-blue-600" size="28" />
+            <!-- 图标容器优化: 增加渐变背景和点击效果 -->
+            <view
+              class="w-[110rpx] h-[110rpx] rounded-[30rpx] bg-gradient-to-br from-blue-50 to-white flex items-center justify-center mb-[20rpx] shadow-sm transition-all duration-200 active:scale-95 border border-blue-50"
+            >
+              <IconFont :name="item.icon" class="text-blue-600 drop-shadow-sm" size="32" />
             </view>
             </view>
-            <text class="text-gray-800 text-[28rpx]">{{ item.name }}</text>
+            <text class="text-gray-800 text-[28rpx] font-medium">{{ item.name }}</text>
           </view>
           </view>
         </view>
         </view>
       </view>
       </view>