Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
28e54fd9 1 parent ac36ddd6

feat: 新增资料列表页面并优化图标组件 

- 新增 "资料列表" 页面 (`src/pages/material-list/index.vue`)，包含搜索栏、资料列表展示及收藏功能
- 注册页面路由至 `src/app.config.js` 并添加页面配置文件
- 扩展 `IconFont` 组件，新增 `StarFill` 图标以支持收藏状态切换
- 更新 CHANGELOG.md 文档，记录新增功能与优化项
Inline Side-by-side
Showing 8 changed files with 1631 additions and 1 deletions
......@@ -5,6 +5,9 @@ All notable changes to this project will be documented in this file.
## [Unreleased]
### Changed
- 优化 "资料列表" 页面 (`src/pages/material-list`)：
- 替换页面内所有静态图片资源为 NutUI 图标组件 (`IconFont`)，提升加载性能与视觉一致性
- 扩展 `IconFont` 组件，新增 `StarFill` 图标支持
- 优化 "我的" 页面 (`src/pages/mine`)：
- 重构页面布局，严格还原设计稿 (`docs/design/manulife-V1/我的`) 样式
- 引入用户卡片背景图，优化头像、姓名及工号展示布局
......@@ -38,6 +41,11 @@ All notable changes to this project will be documented in this file.
- 补充 `src/pages/feedback/index.vue` 中 `NavHeader` 组件的引用
### Added
- 新增 "资料列表" 页面 (`src/pages/material-list/index`)：
- 实现基于 Design 的列表 UI，精确还原设计稿 (`docs/design/manulife-V1/资料列表`)
- 集成 `NavHeader` 和 `TabBar` 组件，保持全站导航一致性
- 使用 Tailwind CSS 进行样式开发，替代原有 CSS
- 注册路由至 `src/app.config.js`
- 新增 "我的" 页面 (`src/pages/mine`)，包含用户信息展示、功能菜单列表
- 新增 "我的计划书" 页面 (`src/pages/plan`)，实现计划书列表展示、搜索过滤、状态切换功能
- 新增 "我的收藏" 页面 (`src/pages/favorites`)，实现文章/资料收藏列表及分类筛选功能
......
.page {
background-color: rgba(255, 255, 255, 1);
position: relative;
width: 393px;
height: 1327px;
overflow: hidden;
}
.section_1 {
background-color: rgba(30, 58, 138, 1);
width: 393px;
padding: 12px 20px 12px 20px;
}
.text_1 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.image_1 {
width: 64px;
height: 16px;
margin: 2px 0 2px 0;
}
.section_2 {
width: 393px;
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5ae87c5e9a86a0d640e93f4a87e612d1c4e6c25e22d3f2600417bdc2e27b7b31)
100% no-repeat;
background-size: 100% 100%;
padding: 20px 153px 20px 20px;
}
.thumbnail_1 {
width: 20px;
height: 20px;
margin: 6px 0 7px 0;
}
.text_2 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 22px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 33px;
}
.section_3 {
background-color: rgba(249, 250, 251, 1);
padding: 24px 20px 80px 20px;
}
.group_1 {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 12px;
padding: 12px 237px 12px 16px;
}
.image-text_1 {
width: 100px;
}
.thumbnail_2 {
width: 20px;
height: 20px;
}
.text-group_1 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.group_2 {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 16px;
margin-top: 20px;
padding: 16px 0 16px 0;
}
.section_4 {
width: 313px;
align-self: center;
}
.image-text_2 {
width: 255px;
}
.label_1 {
width: 40px;
height: 44px;
}
.text-group_2 {
margin-bottom: 7px;
}
.text_3 {
height: 18px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 17px;
}
.text_4 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 3px 67px 0 0;
}
.image_2 {
width: 20px;
height: 28px;
margin-bottom: 16px;
}
.section_5 {
margin: 1px 193px 0 76px;
}
.text_5 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.thumbnail_3 {
width: 10px;
height: 10px;
margin: 4px 0 2px 12px;
}
.text_6 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
}
.image_3 {
width: 353px;
height: 1px;
margin-top: 16px;
}
.section_6 {
width: 313px;
align-self: center;
margin-top: 16px;
}
.image-text_3 {
width: 209px;
}
.label_2 {
width: 40px;
height: 44px;
margin-top: 1px;
}
.text-group_3 {
margin-bottom: 7px;
}
.text_7 {
height: 18px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 17px;
}
.text_8 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 4px 23px 0 0;
}
.image_4 {
width: 20px;
height: 28px;
margin: 1px 0 16px 0;
}
.section_7 {
margin: 1px 193px 0 76px;
}
.text_9 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.thumbnail_4 {
width: 10px;
height: 10px;
margin: 3px 0 3px 12px;
}
.text_10 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
}
.image_5 {
width: 353px;
height: 1px;
margin-top: 16px;
}
.section_8 {
width: 313px;
align-self: center;
margin-top: 16px;
}
.image-text_4 {
width: 209px;
}
.label_3 {
width: 40px;
height: 44px;
}
.text-group_4 {
margin-bottom: 6px;
}
.text_11 {
height: 18px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 17px;
}
.text_12 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 4px 57px 0 0;
}
.image_6 {
width: 20px;
height: 28px;
margin-bottom: 16px;
}
.section_9 {
margin: 2px 193px 0 76px;
}
.text_13 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.thumbnail_5 {
width: 10px;
height: 10px;
margin: 3px 0 3px 12px;
}
.text_14 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
}
.image_7 {
width: 353px;
height: 1px;
margin-top: 16px;
}
.section_10 {
width: 313px;
align-self: center;
margin-top: 15px;
}
.image-text_5 {
width: 223px;
}
.label_4 {
width: 40px;
height: 44px;
}
.text-group_5 {
margin-bottom: 6px;
}
.text_15 {
height: 18px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 17px;
}
.text_16 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 4px 59px 0 0;
}
.image_8 {
width: 20px;
height: 28px;
margin-bottom: 16px;
}
.section_11 {
margin: 2px 193px 0 76px;
}
.text_17 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.thumbnail_6 {
width: 10px;
height: 10px;
margin: 3px 0 3px 12px;
}
.text_18 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
}
.image_9 {
width: 353px;
height: 1px;
margin-top: 16px;
}
.section_12 {
width: 313px;
align-self: center;
margin-top: 16px;
}
.image-text_6 {
width: 211px;
}
.label_5 {
width: 40px;
height: 44px;
}
.text-group_6 {
margin-bottom: 7px;
}
.text_19 {
height: 18px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 17px;
}
.text_20 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 3px 59px 0 0;
}
.image_10 {
width: 20px;
height: 28px;
margin-bottom: 16px;
}
.section_13 {
margin: 1px 193px 0 76px;
}
.text_21 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.thumbnail_7 {
width: 10px;
height: 10px;
margin: 4px 0 2px 12px;
}
.text_22 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
}
.image_11 {
width: 353px;
height: 1px;
margin-top: 16px;
}
.section_14 {
width: 313px;
align-self: center;
margin-top: 16px;
}
.image-text_7 {
width: 223px;
}
.label_6 {
width: 40px;
height: 44px;
margin-top: 1px;
}
.text-group_7 {
margin-bottom: 7px;
}
.text_23 {
height: 18px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 17px;
}
.text_24 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 4px 71px 0 0;
}
.image_12 {
width: 20px;
height: 28px;
margin: 1px 0 16px 0;
}
.section_15 {
margin: 1px 193px 0 76px;
}
.text_25 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.thumbnail_8 {
width: 10px;
height: 10px;
margin: 3px 0 3px 12px;
}
.text_26 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
}
.image_13 {
width: 353px;
height: 1px;
margin-top: 16px;
}
.section_16 {
width: 313px;
align-self: center;
margin-top: 16px;
}
.image-text_8 {
width: 209px;
}
.label_7 {
width: 40px;
height: 44px;
}
.text-group_8 {
margin-bottom: 6px;
}
.text_27 {
height: 18px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 17px;
}
.text_28 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 4px 57px 0 0;
}
.image_14 {
width: 20px;
height: 28px;
margin-bottom: 16px;
}
.section_17 {
margin: 2px 193px 0 76px;
}
.text_29 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.thumbnail_9 {
width: 10px;
height: 10px;
margin: 3px 0 3px 12px;
}
.text_30 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
}
.image_15 {
width: 353px;
height: 1px;
margin-top: 16px;
}
.section_18 {
width: 313px;
align-self: center;
margin-top: 15px;
}
.image-text_9 {
width: 209px;
}
.label_8 {
width: 40px;
height: 44px;
}
.text-group_9 {
margin-bottom: 6px;
}
.text_31 {
height: 18px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 17px;
}
.text_32 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 4px 57px 0 0;
}
.image_16 {
width: 20px;
height: 28px;
margin-bottom: 16px;
}
.section_19 {
margin: 2px 193px 0 76px;
}
.text_33 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.thumbnail_10 {
width: 10px;
height: 10px;
margin: 3px 0 3px 12px;
}
.text_34 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
}
.image_17 {
width: 353px;
height: 1px;
margin-top: 16px;
}
.section_20 {
width: 313px;
align-self: center;
margin-top: 16px;
}
.image-text_10 {
width: 195px;
}
.label_9 {
width: 40px;
height: 44px;
}
.text-group_10 {
margin-bottom: 7px;
}
.text_35 {
height: 18px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 17px;
}
.text_36 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 3px 43px 0 0;
}
.image_18 {
width: 20px;
height: 28px;
margin-bottom: 16px;
}
.section_21 {
margin: 1px 193px 0 76px;
}
.text_37 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.thumbnail_11 {
width: 10px;
height: 10px;
margin: 4px 0 2px 12px;
}
.text_38 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
}
.image_19 {
width: 353px;
height: 1px;
margin-top: 16px;
}
.section_22 {
width: 313px;
align-self: center;
margin-top: 16px;
}
.image-text_11 {
width: 237px;
}
.label_10 {
width: 40px;
height: 44px;
margin-top: 1px;
}
.text-group_11 {
margin-bottom: 7px;
}
.text_39 {
height: 18px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 17px;
}
.text_40 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 4px 73px 0 0;
}
.image_20 {
width: 20px;
height: 28px;
margin: 1px 0 16px 0;
}
.section_23 {
margin: 1px 193px 0 76px;
}
.text_41 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.thumbnail_12 {
width: 10px;
height: 10px;
margin: 3px 0 3px 12px;
}
.text_42 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
}
.section_24 {
background-color: rgba(255, 255, 255, 1);
padding-bottom: 9px;
}
.image_21 {
width: 393px;
height: 1px;
}
.image-wrapper_1 {
width: 267px;
align-self: center;
margin-top: 9px;
}
.label_11 {
width: 24px;
height: 21px;
margin-bottom: 3px;
}
.label_12 {
width: 24px;
height: 24px;
}
.label_13 {
width: 24px;
height: 24px;
}
.text-wrapper_1 {
width: 265px;
align-self: center;
margin-top: 2px;
}
.text_43 {
height: 16px;
overflow-wrap: break-word;
color: rgba(189, 189, 189, 1);
font-size: 11px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
}
.text_44 {
height: 16px;
overflow-wrap: break-word;
color: rgba(189, 189, 189, 1);
font-size: 11px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin-top: 3px;
}
.text_45 {
height: 16px;
overflow-wrap: break-word;
color: rgba(189, 189, 189, 1);
font-size: 11px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin-top: 3px;
}
.image_22 {
width: 393px;
height: 34px;
}
<template>
<div class="page flex-col">
<div class="section_1 flex-row justify-between">
<span class="text_1">9:41</span>
<img
class="image_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng413f9d678a24a9b746fdc981fa579b56b2cbd98eddd024ab1279ef48ae59291e"
/>
</div>
<div class="section_2 flex-row justify-between">
<img
class="thumbnail_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng66b8991933f35bccdd7664c63b4a7cba9b2c3554be75da299d9c33e4b9efda22"
/>
<span class="text_2">考试报名</span>
</div>
<div class="section_3 flex-col">
<div class="group_1 flex-row">
<div class="image-text_1 flex-row justify-between">
<img
class="thumbnail_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng0912775855f01ec9b22d2a3995b4882cea8b6d92dcb8bd9bbeb508e60e25c81a"
/>
<span class="text-group_1">搜索资料...</span>
</div>
</div>
<div class="group_2 flex-col">
<div class="section_4 flex-row justify-between">
<div class="image-text_2 flex-row justify-between">
<img
class="label_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng580eca33fa7e9ba5d8a95a50ffe036ff0ee9f77edc55f74f777c8bae69d86775"
/>
<div class="text-group_2 flex-col">
<span class="text_3">2024年保险代理人考试大纲.pdf</span>
<span class="text_4">最新考试范围与重点解析</span>
</div>
</div>
<img
class="image_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng698ffa49f422c9d5fd02f077f5c56459d2b2d7293783262ce61d1d357acc93bc"
/>
</div>
<div class="section_5 flex-row">
<span class="text_5">2.1MB</span>
<img
class="thumbnail_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5171992876fb4f384136f1adb38fddf29eb773fc7ff44e7cccebf28d4212a4be"
/>
<span class="text_6">&nbsp;收藏</span>
</div>
<img
class="image_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78b010a52b14f5dc4085d837b95b98b98dc71952ca5d971fd74f146c0d6dbdfd"
/>
<div class="section_6 flex-row justify-between">
<div class="image-text_3 flex-row justify-between">
<img
class="label_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8d56663e0c0f447c56927cc416bcb3d555b8a98ebee41fbc747d6464a62ae813"
/>
<div class="text-group_3 flex-col">
<span class="text_7">历年真题汇总及解析.pdf</span>
<span class="text_8">2019-2023年真题完整版</span>
</div>
</div>
<img
class="image_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5f9744e4d1ab7427d0240a2d67be55eebc77816472a6825079d6b47499e45b60"
/>
</div>
<div class="section_7 flex-row">
<span class="text_9">5.3MB</span>
<img
class="thumbnail_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng61b02f6dd3437e69aaf3306e5a55229f109a9781422ecf78533c2754c44bf891"
/>
<span class="text_10">&nbsp;收藏</span>
</div>
<img
class="image_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng7706341894c39a3fe139ba19077166c3d84f6a06c3f9f315e06e165940c112d7"
/>
<div class="section_8 flex-row justify-between">
<div class="image-text_4 flex-row justify-between">
<img
class="label_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng580eca33fa7e9ba5d8a95a50ffe036ff0ee9f77edc55f74f777c8bae69d86775"
/>
<div class="text-group_4 flex-col">
<span class="text_11">考试技巧与经验分享.pdf</span>
<span class="text_12">高分学员备考心得</span>
</div>
</div>
<img
class="image_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng698ffa49f422c9d5fd02f077f5c56459d2b2d7293783262ce61d1d357acc93bc"
/>
</div>
<div class="section_9 flex-row">
<span class="text_13">1.8MB</span>
<img
class="thumbnail_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng775734d905caa71f78ddd654d3599bc7a748ca513a49934492af7525512c49c6"
/>
<span class="text_14">&nbsp;收藏</span>
</div>
<img
class="image_7"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78b010a52b14f5dc4085d837b95b98b98dc71952ca5d971fd74f146c0d6dbdfd"
/>
<div class="section_10 flex-row justify-between">
<div class="image-text_5 flex-row justify-between">
<img
class="label_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8d56663e0c0f447c56927cc416bcb3d555b8a98ebee41fbc747d6464a62ae813"
/>
<div class="text-group_5 flex-col">
<span class="text_15">保险基础知识速记手册.pdf</span>
<span class="text_16">核心知识点快速记忆</span>
</div>
</div>
<img
class="image_8"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5f9744e4d1ab7427d0240a2d67be55eebc77816472a6825079d6b47499e45b60"
/>
</div>
<div class="section_11 flex-row">
<span class="text_17">3.2MB</span>
<img
class="thumbnail_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng61b02f6dd3437e69aaf3306e5a55229f109a9781422ecf78533c2754c44bf891"
/>
<span class="text_18">&nbsp;收藏</span>
</div>
<img
class="image_9"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng7706341894c39a3fe139ba19077166c3d84f6a06c3f9f315e06e165940c112d7"
/>
<div class="section_12 flex-row justify-between">
<div class="image-text_6 flex-row justify-between">
<img
class="label_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng580eca33fa7e9ba5d8a95a50ffe036ff0ee9f77edc55f74f777c8bae69d86775"
/>
<div class="text-group_6 flex-col">
<span class="text_19">模拟试卷10套及答案.pdf</span>
<span class="text_20">考前冲刺模拟练习</span>
</div>
</div>
<img
class="image_10"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng698ffa49f422c9d5fd02f077f5c56459d2b2d7293783262ce61d1d357acc93bc"
/>
</div>
<div class="section_13 flex-row">
<span class="text_21">4.5MB</span>
<img
class="thumbnail_7"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5171992876fb4f384136f1adb38fddf29eb773fc7ff44e7cccebf28d4212a4be"
/>
<span class="text_22">&nbsp;收藏</span>
</div>
<img
class="image_11"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78b010a52b14f5dc4085d837b95b98b98dc71952ca5d971fd74f146c0d6dbdfd"
/>
<div class="section_14 flex-row justify-between">
<div class="image-text_7 flex-row justify-between">
<img
class="label_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8d56663e0c0f447c56927cc416bcb3d555b8a98ebee41fbc747d6464a62ae813"
/>
<div class="text-group_7 flex-col">
<span class="text_23">法律法规重点条款解读.pdf</span>
<span class="text_24">保险相关法规详解</span>
</div>
</div>
<img
class="image_12"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5f9744e4d1ab7427d0240a2d67be55eebc77816472a6825079d6b47499e45b60"
/>
</div>
<div class="section_15 flex-row">
<span class="text_25">2.8MB</span>
<img
class="thumbnail_8"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng61b02f6dd3437e69aaf3306e5a55229f109a9781422ecf78533c2754c44bf891"
/>
<span class="text_26">&nbsp;收藏</span>
</div>
<img
class="image_13"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng7706341894c39a3fe139ba19077166c3d84f6a06c3f9f315e06e165940c112d7"
/>
<div class="section_16 flex-row justify-between">
<div class="image-text_8 flex-row justify-between">
<img
class="label_7"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng580eca33fa7e9ba5d8a95a50ffe036ff0ee9f77edc55f74f777c8bae69d86775"
/>
<div class="text-group_8 flex-col">
<span class="text_27">考试常见易错题分析.pdf</span>
<span class="text_28">高频错题归纳总结</span>
</div>
</div>
<img
class="image_14"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng698ffa49f422c9d5fd02f077f5c56459d2b2d7293783262ce61d1d357acc93bc"
/>
</div>
<div class="section_17 flex-row">
<span class="text_29">1.5MB</span>
<img
class="thumbnail_9"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng775734d905caa71f78ddd654d3599bc7a748ca513a49934492af7525512c49c6"
/>
<span class="text_30">&nbsp;收藏</span>
</div>
<img
class="image_15"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78b010a52b14f5dc4085d837b95b98b98dc71952ca5d971fd74f146c0d6dbdfd"
/>
<div class="section_18 flex-row justify-between">
<div class="image-text_9 flex-row justify-between">
<img
class="label_8"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8d56663e0c0f447c56927cc416bcb3d555b8a98ebee41fbc747d6464a62ae813"
/>
<div class="text-group_9 flex-col">
<span class="text_31">案例分析题库及解答.pdf</span>
<span class="text_32">实务案例精选练习</span>
</div>
</div>
<img
class="image_16"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5f9744e4d1ab7427d0240a2d67be55eebc77816472a6825079d6b47499e45b60"
/>
</div>
<div class="section_19 flex-row">
<span class="text_33">3.9MB</span>
<img
class="thumbnail_10"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng61b02f6dd3437e69aaf3306e5a55229f109a9781422ecf78533c2754c44bf891"
/>
<span class="text_34">&nbsp;收藏</span>
</div>
<img
class="image_17"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng7706341894c39a3fe139ba19077166c3d84f6a06c3f9f315e06e165940c112d7"
/>
<div class="section_20 flex-row justify-between">
<div class="image-text_10 flex-row justify-between">
<img
class="label_9"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng580eca33fa7e9ba5d8a95a50ffe036ff0ee9f77edc55f74f777c8bae69d86775"
/>
<div class="text-group_10 flex-col">
<span class="text_35">考前冲刺复习资料.pdf</span>
<span class="text_36">最后一周复习要点</span>
</div>
</div>
<img
class="image_18"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng698ffa49f422c9d5fd02f077f5c56459d2b2d7293783262ce61d1d357acc93bc"
/>
</div>
<div class="section_21 flex-row">
<span class="text_37">2.3MB</span>
<img
class="thumbnail_11"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng775734d905caa71f78ddd654d3599bc7a748ca513a49934492af7525512c49c6"
/>
<span class="text_38">&nbsp;收藏</span>
</div>
<img
class="image_19"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78b010a52b14f5dc4085d837b95b98b98dc71952ca5d971fd74f146c0d6dbdfd"
/>
<div class="section_22 flex-row justify-between">
<div class="image-text_11 flex-row justify-between">
<img
class="label_10"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8d56663e0c0f447c56927cc416bcb3d555b8a98ebee41fbc747d6464a62ae813"
/>
<div class="text-group_11 flex-col">
<span class="text_39">考场注意事项及答题技巧.pdf</span>
<span class="text_40">应试策略与时间分配</span>
</div>
</div>
<img
class="image_20"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5f9744e4d1ab7427d0240a2d67be55eebc77816472a6825079d6b47499e45b60"
/>
</div>
<div class="section_23 flex-row">
<span class="text_41">1.2MB</span>
<img
class="thumbnail_12"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80a250c7f46c73f3066df3b6d74fcc88d33036245f222137f3245e301870ac01"
/>
<span class="text_42">&nbsp;收藏</span>
</div>
</div>
</div>
<div class="section_24 flex-col">
<img
class="image_21"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
/>
<div class="image-wrapper_1 flex-row justify-between">
<img
class="label_11"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng2a1ca026d03db040136740ea094d2564546a1aed314cf62646a59848fc674f9d"
/>
<img
class="label_12"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng171642576622ac35d63258f99d548a951f433fc4a82d5bb5c8b67360279b4493"
/>
<img
class="label_13"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngee4f913a5aa5f5b9d1d51e32e7b41e31540e61d3dba91a9763b4375d11761278"
/>
</div>
<div class="text-wrapper_1 flex-row justify-between">
<span class="text_43">首页</span> <span class="text_44">AI答疑</span>
<span class="text_45">我的</span>
</div>
</div>
<img
class="image_22"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng830c4568c4d0141e1fa97f7fad1e075e2178ab08e5613734b08eaf46dcdd4207"
/>
</div>
</template>
<script>
export default {
data() {
return {
constants: {},
};
},
methods: {},
};
</script>
<style src="./common.css" />
<style src="./index.css" />
......@@ -15,6 +15,7 @@ const pages = [
'pages/onboarding/index',
'pages/family-office/index',
'pages/knowledge-base/index',
'pages/material-list/index',
'pages/signing/index',
'pages/mine/index',
'pages/plan/index',
......
<!--
* @Date: 2026-01-29 21:30:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 23:14:24
* @LastEditTime: 2026-01-30 15:29:14
* @FilePath: /manulife-weapp/src/components/IconFont.vue
* @Description: 图标字体组件
-->
......@@ -35,6 +35,7 @@ import {
Search,
Service,
Star,
StarFill,
Top,
Photograph,
Del
......@@ -83,6 +84,7 @@ const icons = {
Search,
Service,
Star,
StarFill,
Top,
Photograph,
Del
......
export default {
navigationBarTitleText: '资料列表',
enablePullDownRefresh: true,
backgroundColor: '#F9FAFB',
navigationStyle: 'custom'
}
<!--
* @Date: 2026-01-30
* @Description: 资料列表页
-->
<template>
<div class="min-h-screen bg-[#F9FAFB] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<!-- Navigation Header -->
<NavHeader title="资料列表" />
<!-- Search Bar -->
<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" customClass="mr-[16rpx]" />
<input
v-model="searchValue"
type="text"
placeholder="搜索资料..."
class="flex-1 text-[28rpx] text-[#1F2937] placeholder-gray-400 bg-transparent outline-none"
@confirm="onSearch"
/>
</div>
</div>
<!-- Material List -->
<div class="px-[32rpx] mt-[40rpx]">
<div class="bg-white rounded-[32rpx] p-[32rpx] shadow-sm">
<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]">
<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">
<span class="text-[#1F2937] text-[28rpx] font-normal leading-[1.2] mb-[14rpx] line-clamp-2">
{{ item.title }}
</span>
<span class="text-[#6B7280] text-[24rpx] leading-[1.3] line-clamp-1">
{{ item.desc }}
</span>
</div>
</div>
<!-- Action Icon (Download/Detail) -->
<IconFont name="Download" size="20" color="#9CA3AF" />
</div>
<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'"
customClass="mr-[8rpx]"
/>
<span :class="['text-[24rpx]', item.collected ? 'text-[#F59E0B]' : 'text-[#9CA3AF]']">
{{ item.collected ? '已收藏' : '收藏' }}
</span>
</div>
</div>
<!-- Divider -->
<div v-if="index < list.length - 1" class="h-[1px] bg-[#E5E7EB] w-full mb-[32rpx]"></div>
</div>
</div>
</div>
<!-- Tab Bar -->
<TabBar />
</div>
</template>
<script setup>
import { ref } from 'vue'
import NavHeader from '@/components/NavHeader.vue'
import TabBar from '@/components/TabBar.vue'
import IconFont from '@/components/IconFont.vue'
const searchValue = ref('')
const list = ref([
{
title: '2024年保险代理人考试大纲.pdf',
desc: '最新考试范围与重点解析',
size: '2.1MB',
iconName: 'Order',
iconColor: '#EF4444',
collected: true
},
{
title: '历年真题汇总及解析.pdf',
desc: '2019-2023年真题完整版',
size: '5.3MB',
iconName: 'Order',
iconColor: '#EF4444',
collected: false
},
{
title: '考试技巧与经验分享.pdf',
desc: '高分学员备考心得',
size: '1.8MB',
iconName: 'Order',
iconColor: '#EF4444',
collected: false
},
{
title: '保险基础知识速记手册.pdf',
desc: '核心知识点快速记忆',
size: '3.2MB',
iconName: 'Order',
iconColor: '#EF4444',
collected: false
},
{
title: '模拟试卷10套及答案.pdf',
desc: '考前冲刺模拟练习',
size: '4.5MB',
iconName: 'Order',
iconColor: '#EF4444',
collected: true
},
{
title: '法律法规重点条款解读.pdf',
desc: '保险相关法规详解',
size: '2.8MB',
iconName: 'Order',
iconColor: '#EF4444',
collected: false
},
{
title: '考试常见易错题分析.pdf',
desc: '高频错题归纳总结',
size: '1.5MB',
iconName: 'Order',
iconColor: '#EF4444',
collected: false
},
{
title: '案例分析题库及解答.pdf',
desc: '实务案例精选练习',
size: '3.9MB',
iconName: 'Order',
iconColor: '#EF4444',
collected: false
},
{
title: '考前冲刺复习资料.pdf',
desc: '最后一周复习要点',
size: '2.3MB',
iconName: 'Order',
iconColor: '#EF4444',
collected: false
},
{
title: '考场注意事项及答题技巧.pdf',
desc: '应试策略与时间分配',
size: '1.2MB',
iconName: 'Order',
iconColor: '#EF4444',
collected: false
}
])
/**
* Search handler
*/
const onSearch = () => {
console.log('Searching for:', searchValue.value)
}
/**
* Toggle collect status
* @param {Object} item
*/
const toggleCollect = (item) => {
item.collected = !item.collected
}
</script>