Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c95f2b6f 1 parent b537b32f

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

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Inline Side-by-side
Showing 5 changed files with 30 additions and 27 deletions
......@@ -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"
src="https://picsum.photos/seed/mat1/200/140" mode="aspectFill" />
<view class="w-[80rpx] h-[88rpx] flex-shrink-0 flex items-center justify-center bg-blue-50 rounded-[12rpx]">
<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"
src="https://picsum.photos/seed/mat2/200/140" mode="aspectFill" />
<view class="w-[80rpx] h-[88rpx] flex-shrink-0 flex items-center justify-center bg-blue-50 rounded-[12rpx]">
<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"
src="https://picsum.photos/seed/mat3/200/140" mode="aspectFill" />
<view class="w-[80rpx] h-[88rpx] flex-shrink-0 flex items-center justify-center bg-blue-50 rounded-[12rpx]">
<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">
......
/*
* @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'
})
......
<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]">
......
......@@ -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
v-model="searchValue"
type="text"
placeholder="搜索资料..."
<input 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
:name="item.collected ? 'StarFill' : 'Star'"
size="12"
:color="item.collected ? '#F59E0B' : '#9CA3AF'"
class="mr-[8rpx]"
/>
<IconFont :name="item.collected ? 'StarFill' : 'Star'" size="12"
:color="item.collected ? '#F59E0B' : '#9CA3AF'" class="mr-[8rpx]" />
<span :class="['text-[24rpx]', item.collected ? 'text-[#F59E0B]' : 'text-[#9CA3AF]']">
{{ item.collected ? '已收藏' : '收藏' }}
</span>
......
......@@ -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>
......