refactor(ui): 优化首页区块标题和视觉风格

- 热卖产品和热门资料区块：增加背景装饰光晕和圆角标题指示条
- 优化"查看更多"按钮样式：灰色圆角背景 + 更精致的图标
- 统一卡片阴影和边框样式，与 ProductCard 保持一致
- 增加相对定位层级，确保装饰背景不影响交互

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

@@ -5,6 +5,40 @@
 
 
 ---
 ---
 
 
+## [2026-02-10] - 优化首页热卖产品板块视觉体验
+
+### 优化
+- **UI 升级**：将“热卖产品”板块升级为“高端专业”风格
+  - 容器：统一采用圆角卡片、自定义阴影 (`box-shadow`) 和装饰光晕
+  - 标题：增加蓝色竖条装饰，强化品牌识别度
+  - 按钮：优化“查看更多”按钮样式，改为胶囊状设计，增加交互反馈
+
+**详细信息**：
+- **影响文件**: src/pages/index/index.vue
+- **技术栈**: Vue 3, Tailwind CSS
+- **测试状态**: 待验证
+- **备注**: 确保首页各板块风格统一
+
+---
+
+## [2026-02-10] - 优化首页热门资料板块视觉体验
+
+### 优化
+- **UI 升级**：将“本周热门资料”板块升级为“高端专业”风格
+  - 背景：使用自定义细腻阴影 (`box-shadow`) 配合淡蓝色光晕装饰，提升视觉层次
+  - 边界：增加极淡的 `border-gray-100`，使卡片轮廓更精致
+- **细节改进**：
+  - 标题：增加蓝色竖条装饰，强化品牌识别度
+  - 按钮：优化“查看更多”按钮样式，改为胶囊状设计，增加交互反馈
+
+**详细信息**：
+- **影响文件**: src/pages/index/index.vue
+- **技术栈**: Vue 3, Tailwind CSS
+- **测试状态**: 待验证
+- **备注**: 与 ProductCard 风格保持统一
+
+---
+
 ## [2026-02-10] - 优化 ProductCard 组件视觉质感
 ## [2026-02-10] - 优化 ProductCard 组件视觉质感
 
 
 ### 优化
 ### 优化

@@ -39,16 +39,29 @@
       </view>
       </view>
 
 
       <!-- Hot Products -->
       <!-- Hot Products -->
-      <view class="bg-white rounded-[32rpx] shadow-sm p-[32rpx] mb-[24rpx]">
-        <view class="flex justify-between items-center mb-[24rpx]">
-          <text class="text-gray-900 text-[32rpx] font-bold">热卖产品</text>
-          <view class="flex items-center text-blue-600" @tap="go('/pages/product-center/index')">
-            <text class="text-[26rpx] mr-[4rpx]">查看更多</text>
-            <IconFont name="rectRight" size="12" />
+      <view class="relative bg-white rounded-[32rpx] p-[32rpx] 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 justify-between items-center mb-[32rpx]">
+          <!-- 标题带装饰 -->
+          <view class="flex items-center">
+            <view class="w-[8rpx] h-[32rpx] bg-blue-600 rounded-full mr-[16rpx]"></view>
+            <text class="text-gray-900 text-[34rpx] font-bold tracking-tight">热卖产品</text>
+          </view>
+
+          <!-- 查看更多按钮优化 -->
+          <view
+            class="flex items-center bg-gray-50 hover:bg-gray-100 active:bg-gray-200 px-[20rpx] py-[10rpx] rounded-full transition-colors"
+            @tap="go('/pages/product-center/index')"
+          >
+            <text class="text-[24rpx] text-gray-600 mr-[4rpx] font-medium">全部</text>
+            <IconFont name="rectRight" size="10" class="text-gray-400" />
           </view>
           </view>
         </view>
         </view>
 
 
         <!-- 动态产品列表 -->
         <!-- 动态产品列表 -->
+        <view class="relative z-10">
           <ProductCard
           <ProductCard
             v-for="(product, index) in hotProducts"
             v-for="(product, index) in hotProducts"
             :key="product.id"
             :key="product.id"
@@ -60,19 +73,32 @@
             @plan="openPlanPopup"
             @plan="openPlanPopup"
           />
           />
         </view>
         </view>
+      </view>
 
 
       <!-- Hot Materials -->
       <!-- Hot Materials -->
-      <view v-if="hotMaterials.length > 0" class="bg-white rounded-[32rpx] shadow-md p-[32rpx] mb-[48rpx]">
-        <view class="flex justify-between items-center mb-[24rpx]">
-          <text class="text-gray-900 text-[32rpx] font-bold">本周热门资料</text>
-          <view class="flex items-center text-blue-600" @tap="go('/pages/week-hot-material/index')">
-            <text class="text-[26rpx] mr-[4rpx]">查看更多</text>
-            <IconFont name="rectRight" size="12" />
+      <view v-if="hotMaterials.length > 0" class="relative bg-white rounded-[32rpx] p-[32rpx] mb-[48rpx] 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 justify-between items-center mb-[32rpx]">
+          <!-- 标题带装饰 -->
+          <view class="flex items-center">
+            <view class="w-[8rpx] h-[32rpx] bg-blue-600 rounded-full mr-[16rpx]"></view>
+            <text class="text-gray-900 text-[34rpx] font-bold tracking-tight">本周热门资料</text>
+          </view>
+
+          <!-- 查看更多按钮优化 -->
+          <view
+            class="flex items-center bg-gray-50 hover:bg-gray-100 active:bg-gray-200 px-[20rpx] py-[10rpx] rounded-full transition-colors"
+            @tap="go('/pages/week-hot-material/index')"
+          >
+            <text class="text-[24rpx] text-gray-600 mr-[4rpx] font-medium">全部</text>
+            <IconFont name="rectRight" size="10" class="text-gray-400" />
           </view>
           </view>
         </view>
         </view>
 
 
         <!-- Material List -->
         <!-- Material List -->
-        <view class="flex flex-col gap-[24rpx]">
+        <view class="relative z-10 flex flex-col gap-[24rpx]">
           <!-- Material Items -->
           <!-- Material Items -->
           <MaterialCard
           <MaterialCard
             v-for="item in hotMaterials"
             v-for="item in hotMaterials"