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

- 新增 "资料列表" 页面 (`src/pages/material-list/index.vue`)，包含搜索栏、资料列表展示及收藏功能
- 注册页面路由至 `src/app.config.js` 并添加页面配置文件
- 扩展 `IconFont` 组件，新增 `StarFill` 图标以支持收藏状态切换
- 更新 CHANGELOG.md 文档，记录新增功能与优化项

@@ -5,6 +5,9 @@ All notable changes to this project will be documented in this file.
 ## [Unreleased]
 ## [Unreleased]
 
 
 ### Changed
 ### Changed
+- 优化 "资料列表" 页面 (`src/pages/material-list`)：
+  - 替换页面内所有静态图片资源为 NutUI 图标组件 (`IconFont`)，提升加载性能与视觉一致性
+  - 扩展 `IconFont` 组件，新增 `StarFill` 图标支持
 - 优化 "我的" 页面 (`src/pages/mine`)：
 - 优化 "我的" 页面 (`src/pages/mine`)：
   - 重构页面布局，严格还原设计稿 (`docs/design/manulife-V1/我的`) 样式
   - 重构页面布局，严格还原设计稿 (`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` 组件的引用
   - 补充 `src/pages/feedback/index.vue` 中 `NavHeader` 组件的引用
 
 
 ### Added
 ### 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/mine`)，包含用户信息展示、功能菜单列表
 - 新增 "我的计划书" 页面 (`src/pages/plan`)，实现计划书列表展示、搜索过滤、状态切换功能
 - 新增 "我的计划书" 页面 (`src/pages/plan`)，实现计划书列表展示、搜索过滤、状态切换功能
 - 新增 "我的收藏" 页面 (`src/pages/favorites`)，实现文章/资料收藏列表及分类筛选功能
 - 新增 "我的收藏" 页面 (`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/onboarding/index',
   'pages/family-office/index',
   'pages/family-office/index',
   'pages/knowledge-base/index',
   'pages/knowledge-base/index',
+  'pages/material-list/index',
   'pages/signing/index',
   'pages/signing/index',
   'pages/mine/index',
   'pages/mine/index',
   'pages/plan/index',
   'pages/plan/index',

 <!--
 <!--
  * @Date: 2026-01-29 21:30:20
  * @Date: 2026-01-29 21:30:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @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
  * @FilePath: /manulife-weapp/src/components/IconFont.vue
  * @Description: 图标字体组件
  * @Description: 图标字体组件
 -->
 -->
@@ -35,6 +35,7 @@ import {
   Search,
   Search,
   Service,
   Service,
   Star,
   Star,
+  StarFill,
   Top,
   Top,
   Photograph,
   Photograph,
   Del
   Del
@@ -83,6 +84,7 @@ const icons = {
   Search,
   Search,
   Service,
   Service,
   Star,
   Star,
+  StarFill,
   Top,
   Top,
   Photograph,
   Photograph,
   Del
   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>