feat: 优化首页资料列表显示样式

- 将首页"本周热门资料"列表左边的图片替换为图标样式 - 使用 80rpx × 88rpx 圆角蓝色背景容器 - 图标尺寸 32，与资料列表页面保持一致 - 不同资料项使用不同颜色图标（红/蓝/绿） - 优化文案："热卖产品：" → "热卖产品" - 修正产品按钮文案："产品资料" → "产品详情" Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

feat: 优化首页资料列表显示样式
- 将首页"本周热门资料"列表左边的图片替换为图标样式 - 使用 80rpx × 88rpx 圆角蓝色背景容器 - 图标尺寸 32，与资料列表页面保持一致 - 不同资料项使用不同颜色图标（红/蓝/绿） - 优化文案："热卖产品：" → "热卖产品" - 修正产品按钮文案："产品资料" → "产品详情" Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
hookehuyr
Commit c95f2b6f7f957cd9afbb06429af500d01757e576 c95f2b6f 1 parent b537b32f
Showing 5 changed files with 30 additions and 27 deletions
src/pages/index/index.vue
src/pages/knowledge-base/index.config.js
src/pages/knowledge-base/index.vue
src/pages/material-list/index.vue
src/pages/plan/index.vue
--- a/src/pages/index/index.vue
View file @c95f2b6
+++ b/src/pages/index/index.vue
View file @c95f2b6
@@ -41,7 +41,7 @@
       <!-- 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>
+          <text class="text-gray-900 text-[32rpx] font-bold">热卖产品</text>
           <view class="flex items-center text-blue-600" @tap="go('/pages/knowledge-base/index')">
             <text class="text-[26rpx] mr-[4rpx]">查看更多</text>
             <IconFont name="rectRight" size="12" />
@@ -69,7 +69,7 @@
               class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600"
               @tap="goToProductDetail(1)"
             >
-              产品资料
+              产品详情
             </nut-button>
             <nut-button
               color="#2563EB"
@@ -129,8 +129,9 @@
         <view class="flex flex-col gap-[32rpx]">
           <!-- Item 1 -->
           <view class="flex gap-[24rpx]">
-            <image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200"
+            <view class="w-[80rpx] h-[88rpx] flex-shrink-0 flex items-center justify-center bg-blue-50 rounded-[12rpx]">
-              src="https://picsum.photos/seed/mat1/200/140" mode="aspectFill" />
+              <IconFont name="order" size="32" color="#EF4444" />
+            </view>
             <view class="flex-1 flex flex-col justify-between py-[4rpx]">
               <text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">2024年保险市场趋势分析报告</text>
               <view class="flex justify-between items-end">
@@ -142,8 +143,9 @@
           <view class="h-[2rpx] bg-gray-100"></view>
           <!-- Item 2 -->
           <view class="flex gap-[24rpx]">
-            <image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200"
+            <view class="w-[80rpx] h-[88rpx] flex-shrink-0 flex items-center justify-center bg-blue-50 rounded-[12rpx]">
-              src="https://picsum.photos/seed/mat2/200/140" mode="aspectFill" />
+              <IconFont name="order" size="32" color="#3B82F6" />
+            </view>
             <view class="flex-1 flex flex-col justify-between py-[4rpx]">
               <text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">高净值客户需求分析与产品匹配</text>
               <view class="flex justify-between items-end">
@@ -155,8 +157,9 @@
           <view class="h-[2rpx] bg-gray-100"></view>
           <!-- Item 3 -->
           <view class="flex gap-[24rpx]">
-            <image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200"
+            <view class="w-[80rpx] h-[88rpx] flex-shrink-0 flex items-center justify-center bg-blue-50 rounded-[12rpx]">
-              src="https://picsum.photos/seed/mat3/200/140" mode="aspectFill" />
+              <IconFont name="order" size="32" color="#10B981" />
+            </view>
             <view class="flex-1 flex flex-col justify-between py-[4rpx]">
               <text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">保险合同条款解读与风险提示</text>
               <view class="flex justify-between items-end">
--- a/src/pages/knowledge-base/index.config.js
View file @c95f2b6
+++ b/src/pages/knowledge-base/index.config.js
View file @c95f2b6
+/*
+ * @Date: 2026-01-29 21:53:42
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2026-01-31 10:53:44
+ * @FilePath: /manulife-weapp/src/pages/knowledge-base/index.config.js
+ * @Description: 产品知识库页面配置文件
+ */
 export default definePageConfig({
-  navigationBarTitleText: '资料知识库',
+  navigationBarTitleText: '产品知识库',
   navigationStyle: 'custom'
 })
--- a/src/pages/knowledge-base/index.vue
View file @c95f2b6
+++ b/src/pages/knowledge-base/index.vue
View file @c95f2b6
 <template>
   <div class="min-h-screen bg-[#F9FAFB] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
     <!-- Navigation Header -->
-    <NavHeader title="资料知识库" />
+    <NavHeader title="产品知识库" />
     <!-- Content Area -->
     <div class="px-[40rpx] mt-[40rpx]">
--- a/src/pages/material-list/index.vue
View file @c95f2b6
+++ b/src/pages/material-list/index.vue
View file @c95f2b6
@@ -11,13 +11,9 @@
     <div class="px-[32rpx] mt-[32rpx]">
       <div class="bg-white rounded-[12rpx] flex items-center px-[32rpx] py-[24rpx]">
         <IconFont name="search" size="20" color="#9CA3AF" class="mr-[16rpx]" />
-        <input
+        <input v-model="searchValue" type="text" placeholder="搜索资料..."
-          v-model="searchValue"
-          type="text"
-          placeholder="搜索资料..."
           class="flex-1 text-[28rpx] text-[#1F2937] placeholder-gray-400 bg-transparent outline-none"
-          @confirm="onSearch"
+          @confirm="onSearch" />
-        />
       </div>
     </div>
@@ -27,7 +23,8 @@
         <div v-for="(item, index) in list" :key="index">
           <div class="flex justify-between items-start pt-[32rpx] first:pt-0">
             <div class="flex items-start flex-1 mr-[20rpx]" @tap="onView(item)">
-                <div class="w-[80rpx] h-[88rpx] mr-[24rpx] flex-shrink-0 flex items-center justify-center bg-blue-50 rounded-[12rpx]">
+              <div
+                class="w-[80rpx] h-[88rpx] mr-[24rpx] flex-shrink-0 flex items-center justify-center bg-blue-50 rounded-[12rpx]">
                 <IconFont :name="item.iconName || 'order'" size="32" :color="item.iconColor || '#2563EB'" />
               </div>
               <div class="flex flex-col">
@@ -44,12 +41,8 @@
           <div class="flex items-center mt-[16rpx] ml-[104rpx] pb-[32rpx]">
             <span class="text-[#9CA3AF] text-[24rpx] mr-[40rpx]">{{ item.size }}</span>
             <div class="flex items-center" @click="toggleCollect(item)">
-                <IconFont
+              <IconFont :name="item.collected ? 'StarFill' : 'Star'" size="12"
-                  :name="item.collected ? 'StarFill' : 'Star'"
+                :color="item.collected ? '#F59E0B' : '#9CA3AF'" class="mr-[8rpx]" />
-                  size="12"
-                  :color="item.collected ? '#F59E0B' : '#9CA3AF'"
-                  class="mr-[8rpx]"
-                />
               <span :class="['text-[24rpx]', item.collected ? 'text-[#F59E0B]' : 'text-[#9CA3AF]']">
                 {{ item.collected ? '已收藏' : '收藏' }}
               </span>
--- a/src/pages/plan/index.vue
View file @c95f2b6
+++ b/src/pages/plan/index.vue
View file @c95f2b6
@@ -54,14 +54,14 @@
         <!-- Actions -->
         <view class="flex justify-end gap-[24rpx]">
-          <view class="flex items-center text-gray-500" @tap="onDelete(item)">
-            <IconFont name="del" size="14" class="mr-[8rpx]" />
-            <text class="text-[24rpx]">删除</text>
-          </view>
           <view class="flex items-center text-blue-600" @tap="onView(item)">
             <IconFont name="order" size="14" class="mr-[8rpx]" />
             <text class="text-[24rpx]">查看</text>
           </view>
+          <view class="flex items-center text-red-500" @tap="onDelete(item)">
+            <IconFont name="del" size="14" class="mr-[8rpx]" />
+            <text class="text-[24rpx]">删除</text>
+          </view>
         </view>
       </view>