Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fec72bee 1 parent be90316e

feat: 新增家办相关页面并重构通用导航组件 

- 新增 `pages/family-office/index` 页面，实现家庭成员、健康档案、资产管理、生活服务四大功能板块
- 创建通用导航头组件 `NavHeader`，统一页面顶部样式并优化滚动体验
- 封装图标组件 `IconFont`，简化 NutUI 图标使用并消除 Vue 3 响应式警告
- 重构入职相关、签单相关、首页页面，使用新组件替代硬编码头部结构
- 将静态数据源从 `ref` 升级为 `shallowRef` 以提升性能
- 更新路由配置和组件类型声明
Inline Side-by-side
Showing 15 changed files with 1201 additions and 206 deletions
......@@ -7,7 +7,9 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
IconFont: typeof import('./src/components/IconFont.vue')['default']
IndexNav: typeof import('./src/components/indexNav.vue')['default']
NavHeader: typeof import('./src/components/NavHeader.vue')['default']
NutButton: typeof import('@nutui/nutui-taro')['Button']
Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
......
......@@ -4,7 +4,17 @@ All notable changes to this project will be documented in this file.
## [Unreleased]
### Fixed
- 修复 Vue 3 响应式组件警告：将包含 NutUI 图标组件的静态数据源从 `ref` 升级为 `shallowRef`，并结合 `markRaw` 使用。彻底消除了 "Component that was made a reactive object" 警告，避免了 Vue 对组件对象进行不必要的深度代理，显著提升了页面初始化和渲染性能。涉及首页、TabBar、入职相关、签单相关及家办相关所有页面。
- 优化 `NavHeader` 组件交互体验，将页面头部固定在顶部 (`fixed`)，并内置等高占位元素防止内容遮挡，提升滚动时的用户体验。
- 重构图标使用方式：创建 `src/components/IconFont.vue` 组件封装 NutUI 图标库，支持通过字符串 `name` 属性配置图标，彻底移除 `markRaw` 逻辑，简化代码结构并符合用户偏好，同时保留了 SVG 图标的高清与高性能特性。
### Added
- 创建通用导航头组件 `src/components/NavHeader.vue`，统一页面头部样式
- 重构 "入职相关"、"签单相关"、"家办相关" 页面，使用 `NavHeader` 组件替代硬编码的头部结构
- 新增 "家办相关" 页面 (`src/pages/family-office`)，复用 "入职相关" 页面布局与样式
- 规划并实现家庭成员、健康档案、资产管理、生活服务四大功能板块
- 注册新页面路由至 `src/app.config.js`
- 初始化项目 Git 仓库
- 创建 .gitignore 配置文件
- 创建并切换到 develop 分支
......
.page {
background-color: rgba(255, 255, 255, 1);
position: relative;
width: 393px;
height: 1095px;
overflow: hidden;
}
.group_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: 20px;
}
.group_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;
}
.group_3 {
background-color: rgba(249, 250, 251, 1);
}
.group_4 {
background-color: rgba(255, 255, 255, 1);
padding: 16px 0 16px 20px;
}
.group_5 {
width: 373px;
}
.text-wrapper_1 {
background-color: rgba(37, 99, 235, 1);
border-radius: 9999px;
padding: 8px 16px 8px 16px;
}
.text_3 {
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;
}
.text-wrapper_2 {
background-color: rgba(243, 244, 246, 1);
border-radius: 9999px;
padding: 8px 16px 8px 16px;
}
.text_4 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text-wrapper_3 {
background-color: rgba(243, 244, 246, 1);
border-radius: 9999px;
padding: 8px 16px 8px 16px;
}
.text_5 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text-wrapper_4 {
background-color: rgba(243, 244, 246, 1);
border-radius: 9999px;
padding: 8px 1px 8px 16px;
}
.text_6 {
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text_7 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin: 20px 309px 0 20px;
}
.grid_1 {
width: 352px;
height: 588px;
flex-wrap: wrap;
margin: 12px 21px 0 20px;
}
.box_1 {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
background-color: rgba(255, 255, 255, 1);
border-radius: 12px;
width: 170px;
height: 188px;
padding-bottom: 9px;
margin: 0 12px 12px 0;
}
.box_1:nth-child(2n) {
margin-right: 0;
}
.box_1:nth-last-child(-n + 2) {
margin-bottom: 0;
}
.image-text_1 {
}
.box_2 {
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd07aa626fa67c2e61c16fa94a014fdbb0e20a2febdbd78fb0e488e7c846003f2)
0px 0px no-repeat;
background-size: 171px 120px;
padding: 8px 8px 92px 122px;
}
.text-wrapper_5 {
background-color: rgba(239, 68, 68, 1);
border-radius: 9999px;
padding: 2px 8px 2px 8px;
}
.text_8 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.text-group_1 {
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: 20px;
margin: 12px 60px 0 12px;
}
.text-wrapper_6 {
background-color: rgba(254, 215, 170, 1);
border-radius: 4px;
margin: 5px 102px 0 12px;
padding: 3px 8px 6px 8px;
}
.text_9 {
overflow-wrap: break-word;
color: rgba(234, 88, 12, 1);
font-size: 11px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 13px;
}
.box_3 {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
border-radius: 12px;
background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/18d82db9fb8a475c983f0ddcd678a1bc_mergeImage.png);
width: 170px;
height: 188px;
margin-bottom: 12px;
padding: 132px 46px 12px 12px;
}
.text_10 {
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: 20px;
}
.block_1 {
width: 91px;
margin: 8px 21px 0 0;
}
.thumbnail_2 {
width: 12px;
height: 11px;
margin: 3px 0 2px 0;
}
.group_6 {
}
.text-wrapper_7 {
background-color: rgba(254, 226, 226, 1);
border-radius: 4px;
height: 22px;
margin: -3px 0 -3px 0;
padding: 3px 8px 3px 8px;
}
.text_11 {
height: 16px;
overflow-wrap: break-word;
color: rgba(220, 38, 38, 1);
font-size: 11px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 13px;
}
.box_4 {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
border-radius: 12px;
background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/280fe0a821364cef80b424fef89b48f3_mergeImage.png);
width: 170px;
height: 188px;
margin: 0 12px 12px 0;
padding: 132px 46px 12px 12px;
}
.text_12 {
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: 20px;
}
.box_5 {
width: 98px;
margin: 8px 14px 0 0;
}
.thumbnail_3 {
width: 12px;
height: 11px;
margin: 3px 0 2px 0;
}
.box_6 {
}
.text-wrapper_8 {
background-color: rgba(209, 250, 229, 1);
border-radius: 4px;
padding: 0 8px 3px 8px;
}
.text_13 {
overflow-wrap: break-word;
color: rgba(5, 150, 105, 1);
font-size: 11px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 13px;
}
.box_7 {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
background-color: rgba(255, 255, 255, 1);
border-radius: 12px;
width: 170px;
height: 188px;
margin-bottom: 12px;
padding-bottom: 12px;
}
.image-text_2 {
}
.box_8 {
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPngfa51ba266ee7b2cd5418dd11fdb68714e5373b6a77ee09e54067b0d2be401f70)
0px 0px no-repeat;
background-size: 171px 120px;
padding: 8px 7px 92px 123px;
}
.text-wrapper_9 {
background-color: rgba(239, 68, 68, 1);
border-radius: 9999px;
padding: 2px 8px 2px 8px;
}
.text_14 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.text-group_2 {
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: 20px;
margin: 12px 60px 0 12px;
}
.box_9 {
width: 98px;
margin: 8px 60px 0 12px;
}
.thumbnail_4 {
width: 12px;
height: 11px;
margin: 3px 0 2px 0;
}
.block_2 {
}
.text-wrapper_10 {
background-color: rgba(209, 250, 229, 1);
border-radius: 4px;
height: 22px;
margin: -3px 0 -3px 0;
padding: 3px 8px 6px 8px;
}
.text_15 {
overflow-wrap: break-word;
color: rgba(5, 150, 105, 1);
font-size: 11px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 13px;
}
.box_10 {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
border-radius: 12px;
background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/42d39ba34e294a4ea49ea709b7ba52f2_mergeImage.png);
width: 170px;
height: 188px;
margin: 0 12px 12px 0;
padding: 132px 67px 12px 12px;
}
.text_16 {
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: 20px;
margin-right: 7px;
}
.group_7 {
width: 91px;
margin-top: 8px;
}
.thumbnail_5 {
width: 12px;
height: 11px;
margin: 3px 0 2px 0;
}
.group_8 {
}
.text-wrapper_11 {
background-color: rgba(254, 226, 226, 1);
border-radius: 4px;
padding: 0 8px 0 8px;
}
.text_17 {
height: 16px;
overflow-wrap: break-word;
color: rgba(220, 38, 38, 1);
font-size: 11px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 13px;
}
.box_11 {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
background-color: rgba(255, 255, 255, 1);
border-radius: 12px;
width: 170px;
height: 188px;
margin-bottom: 12px;
padding-bottom: 12px;
}
.image-text_3 {
}
.box_12 {
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9be3d8532fd60ac0aaf127c5bed835ee6566cfc3febc15bbdc4abdb73a532cd3)
0px 0px no-repeat;
background-size: 171px 120px;
padding: 8px 7px 92px 123px;
}
.text-wrapper_12 {
background-color: rgba(239, 68, 68, 1);
border-radius: 9999px;
padding: 2px 8px 2px 8px;
}
.text_18 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.text-group_3 {
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: 20px;
margin: 12px 60px 0 12px;
}
.group_9 {
width: 76px;
margin: 8px 82px 0 12px;
}
.thumbnail_6 {
width: 12px;
height: 11px;
margin: 3px 0 2px 0;
}
.group_10 {
}
.text-wrapper_13 {
background-color: rgba(209, 250, 229, 1);
border-radius: 4px;
height: 22px;
margin: -3px 0 -3px 0;
padding: 3px 8px 6px 8px;
}
.text_19 {
overflow-wrap: break-word;
color: rgba(5, 150, 105, 1);
font-size: 11px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 13px;
}
.group_11 {
background-color: rgba(255, 255, 255, 1);
margin-top: 193px;
padding-bottom: 9px;
}
.image_2 {
width: 393px;
height: 1px;
}
.list_1 {
width: 289px;
height: 45px;
align-self: center;
margin-top: 9px;
justify-content: space-between;
}
.image-text_4 {
margin-right: 103px;
}
.label_1 {
width: 24px;
height: 24px;
}
.text-group_4 {
width: 35px;
overflow-wrap: break-word;
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 17px;
margin-top: 4px;
}
.image_3 {
width: 134px;
height: 5px;
align-self: center;
margin-top: 4px;
}
<template>
<div class="page flex-col">
<div class="group_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/SketchPng41ebf05313566695702fdc28688b6ed52dbbba555ddd1f6c423593ff63b3f65e"
/>
</div>
<div class="group_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="group_3 flex-col">
<div class="group_4 flex-col">
<div class="group_5 flex-row justify-between">
<div class="text-wrapper_1 flex-col">
<span class="text_3">全部产品</span>
</div>
<div class="text-wrapper_2 flex-col">
<span class="text_4">人寿保险</span>
</div>
<div class="text-wrapper_3 flex-col">
<span class="text_5">医疗保险</span>
</div>
<div class="text-wrapper_4 flex-col">
<span class="text_6">意外保险</span>
</div>
</div>
</div>
<span class="text_7">全部产品</span>
<div class="grid_1 flex-row">
<div class="box_1 flex-col">
<div class="image-text_1 flex-col">
<div class="box_2 flex-col">
<div class="text-wrapper_5 flex-col">
<span class="text_8">热卖</span>
</div>
</div>
<span class="text-group_1">终身寿险尊享版</span>
</div>
<div class="text-wrapper_6 flex-col">
<span class="text_9">5年超值</span>
</div>
</div>
<div class="box_3 flex-col">
<span class="text_10">百万医疗保险计划</span>
<div class="block_1 flex-row justify-between">
<img
class="thumbnail_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga1fc927b8312af6aec1a5da5cbcba571a10640194d44885876793d4472bcffe2"
/>
<div class="group_6 flex-col">
<div class="text-wrapper_7 flex-col">
<span class="text_11">收益率3.5%</span>
</div>
</div>
</div>
</div>
<div class="box_4 flex-col">
<span class="text_12">意外伤害保障计划</span>
<div class="box_5 flex-row justify-between">
<img
class="thumbnail_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4c86d1d1b122075e3c3268fd63f98594b586778c6dc6b611dc372913490d2807"
/>
<div class="box_6 flex-col">
<div class="text-wrapper_8 flex-col">
<span class="text_13">保证收益万能</span>
</div>
</div>
</div>
</div>
<div class="box_7 flex-col">
<div class="image-text_2 flex-col">
<div class="box_8 flex-col">
<div class="text-wrapper_9 flex-col">
<span class="text_14">热卖</span>
</div>
</div>
<span class="text-group_2">分红型年金保险</span>
</div>
<div class="box_9 flex-row justify-between">
<img
class="thumbnail_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga1fc927b8312af6aec1a5da5cbcba571a10640194d44885876793d4472bcffe2"
/>
<div class="block_2 flex-col">
<div class="text-wrapper_10 flex-col">
<span class="text_15">保证收益万能</span>
</div>
</div>
</div>
</div>
<div class="box_10 flex-col">
<span class="text_16">重大疾病保险</span>
<div class="group_7 flex-row justify-between">
<img
class="thumbnail_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4c86d1d1b122075e3c3268fd63f98594b586778c6dc6b611dc372913490d2807"
/>
<div class="group_8 flex-col">
<div class="text-wrapper_11 flex-col">
<span class="text_17">收益率4.2%</span>
</div>
</div>
</div>
</div>
<div class="box_11 flex-col">
<div class="image-text_3 flex-col">
<div class="box_12 flex-col">
<div class="text-wrapper_12 flex-col">
<span class="text_18">热卖</span>
</div>
</div>
<span class="text-group_3">少儿教育金保险</span>
</div>
<div class="group_9 flex-row justify-between">
<img
class="thumbnail_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga1fc927b8312af6aec1a5da5cbcba571a10640194d44885876793d4472bcffe2"
/>
<div class="group_10 flex-col">
<div class="text-wrapper_13 flex-col">
<span class="text_19">教育专属</span>
</div>
</div>
</div>
</div>
</div>
<div class="group_11 flex-col">
<img
class="image_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
/>
<div class="list_1 flex-row">
<div
class="image-text_4 flex-col"
v-for="(item, index) in loopData0"
:key="index"
>
<img
class="label_1"
referrerpolicy="no-referrer"
:src="item.lanhuimage0"
/>
<span
class="text-group_4"
:style="{ color: item.lanhufontColor0 }"
v-html="item.lanhutext0"
></span>
</div>
</div>
<img
class="image_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd87bce34194e46404c7ac21a64bed8e9f8454451baaf336c5201241680a20c9d"
/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loopData0: [
{
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga613c67a645a5984586afecdb62939c0f7a50579c221b1918780e7886dfe9c43',
lanhutext0: '首页',
lanhufontColor0: 'rgba(37,99,235,1.000000)',
},
{
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng355fd7cd6d5c986d30655db577fe8e511f878d37c9506e77dc53be60228d6453',
lanhutext0: 'AI答疑',
lanhufontColor0: 'rgba(156,163,175,1.000000)',
},
{
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng13ceb19b113cdc23fbf47e15ccf14d27aec044ad2c13f88539fc8459993ade6f',
lanhutext0: '我的',
lanhufontColor0: 'rgba(156,163,175,1.000000)',
},
],
constants: {},
};
},
methods: {},
};
</script>
<style src="./common.css" />
<style src="./index.css" />
......@@ -9,6 +9,7 @@ const pages = [
'pages/index/index',
'pages/auth/index',
'pages/onboarding/index',
'pages/family-office/index',
'pages/signing/index',
]
......
<template>
<component :is="iconComponent" v-if="iconComponent" :size="size" :class="customClass" :color="color" />
</template>
<script setup>
import { computed } from 'vue';
import {
Cart,
Category,
Check,
Checklist,
Clock,
Edit,
Find,
Home,
My,
Order,
PlayCircleFill,
RectRight,
Search,
Service,
Star,
Top
} from '@nutui/icons-vue-taro';
const props = defineProps({
name: {
type: String,
required: true
},
size: {
type: [String, Number],
default: ''
},
color: {
type: String,
default: ''
},
customClass: {
type: String,
default: ''
}
});
const icons = {
Cart,
Category,
Check,
Checklist,
Clock,
Edit,
Find,
Home,
My,
Order,
PlayCircleFill,
RectRight,
Search,
Service,
Star,
Top
};
const iconComponent = computed(() => {
return icons[props.name] || null;
});
</script>
<!--
* @Date: 2026-01-29 21:09:28
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 21:18:14
* @FilePath: /manulife-weapp/src/components/NavHeader.vue
* @Description: 通用导航头组件，用于页面顶部固定导航栏，展示页面标题。
-->
<template>
<!-- Placeholder to prevent content from being hidden behind fixed header -->
<div class="w-full h-[250rpx]"></div>
<!-- Fixed Header -->
<div class="fixed top-0 left-0 z-50 w-full h-[250rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] flex items-center justify-center pt-[100rpx]">
<span class="text-white text-[35rpx] font-normal">{{ title }}</span>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
required: true
}
})
</script>
<!--
* @Date: 2026-01-29 20:33:23
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 20:42:52
* @LastEditTime: 2026-01-29 21:18:33
* @FilePath: /manulife-weapp/src/components/TabBar.vue
* @Description: 文件描述
* @Description: 通用底部导航栏组件，用于页面底部固定导航栏，展示页面标题。
-->
<template>
<view class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-[env(safe-area-inset-bottom)] z-50">
......@@ -14,8 +14,8 @@
:key="index"
@tap="handleTabClick(item)"
>
<component
:is="item.icon"
<IconFont
:name="item.icon"
:class="[current === item.key ? 'text-blue-600' : 'text-gray-400']"
size="24"
/>
......@@ -29,8 +29,8 @@
</template>
<script setup>
import { ref } from 'vue'
import { Home, Service, My } from '@nutui/icons-vue-taro'
import { ref, shallowRef } from 'vue'
import IconFont from '@/components/IconFont.vue'
import { useGo } from '@/hooks/useGo'
import Taro from '@tarojs/taro'
......@@ -43,24 +43,24 @@ const props = defineProps({
const go = useGo()
const tabs = ref([
const tabs = shallowRef([
{
key: 'home',
label: '首页',
icon: Home,
icon: 'Home',
path: '/pages/index/index'
},
{
key: 'ai',
label: 'AI答疑',
icon: Service,
path: '/pages/ai/index' // Placeholder path
icon: 'Service',
path: '/pages/ai/index'
},
{
key: 'me',
label: '我的',
icon: My,
path: '/pages/me/index' // Placeholder path
icon: 'My',
path: '/pages/me/index'
}
])
......
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 17:51:21
* @FilePath: /manulife-weapp/src/pages/index/index.config.js
* @Description: 首页配置
*/
export default definePageConfig({
navigationBarTitleText: '入职相关',
navigationStyle: 'custom'
})
<template>
<div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<!-- Navigation Header -->
<NavHeader title="家办相关" />
<!-- Content List -->
<div class="px-[40rpx] mt-[40rpx] relative z-10">
<div v-for="(section, index) in sections" :key="index"
class="bg-white rounded-[32rpx] mb-[32rpx] pb-[56rpx] overflow-hidden shadow-sm">
<!-- Section Header -->
<div class="px-[40rpx] py-[32rpx]" :style="{ background: section.bgGradient }">
<span class="text-[#1f2937] text-[32rpx] font-normal">{{ section.title }}</span>
</div>
<!-- Section Items -->
<div class="flex flex-col">
<div v-for="(item, itemIndex) in section.items" :key="itemIndex" class="flex flex-col">
<div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer"
@tap="handleItemClick(item)">
<div class="flex items-center">
<div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
<IconFont :name="item.icon" class="text-blue-600" size="32" />
</div>
<div class="flex flex-col">
<span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
<span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
</div>
</div>
<IconFont name="RectRight" class="text-gray-400" size="16" />
</div>
<!-- Divider -->
<div v-if="itemIndex < section.items.length - 1"
class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
</div>
</div>
</div>
</div>
<!-- Tab Bar -->
<TabBar current="" />
</div>
</template>
<script setup>
import { shallowRef } from 'vue'
import { useGo } from '@/hooks/useGo'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import IconFont from '@/components/IconFont.vue'
const go = useGo()
const sections = shallowRef([
{
title: '家庭成员',
bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
items: [
{
title: '成员列表',
subtitle: '管理家庭成员信息',
icon: 'My'
},
{
title: '新增成员',
subtitle: '添加家庭成员',
icon: 'Edit'
}
]
},
{
title: '健康档案',
bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
items: [
{
title: '体检报告',
subtitle: '查看家庭成员体检记录',
icon: 'Order'
},
{
title: '就医记录',
subtitle: '家庭成员就医历史',
icon: 'Clock'
}
]
},
{
title: '资产管理',
bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
items: [
{
title: '保单管理',
subtitle: '家庭保单汇总',
icon: 'Star'
},
{
title: '资产总览',
subtitle: '家庭资产分布',
icon: 'Find'
}
]
},
{
title: '生活服务',
bgGradient: 'linear-gradient(90deg, #E0F2FE 0%, #BAE6FD 100%)',
items: [
{
title: '高端医疗',
subtitle: '预约高端医疗服务',
icon: 'Service'
},
{
title: '康养服务',
subtitle: '健康养生服务',
icon: 'PlayCircleFill'
}
]
}
])
/**
* Handle item click
* @param {Object} item - Clicked item data
*/
const handleItemClick = (item) => {
console.log('Clicked:', item.title)
// TODO: Navigate to respective page
}
</script>
<script>
export default {
name: 'FamilyOfficeIndex'
}
</script>
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 17:51:21
* @LastEditTime: 2026-01-29 21:07:21
* @FilePath: /manulife-weapp/src/pages/index/index.config.js
* @Description: 首页配置
*/
export default {
navigationBarTitleText: '臻奇智荟圈'
}
export default definePageConfig({
navigationBarTitleText: '臻奇智荟圈',
navigationStyle: 'custom'
})
......
......@@ -2,18 +2,19 @@
<view class="relative w-full min-h-screen overflow-y-auto overflow-x-hidden bg-[#F9FAFB] pb-[200rpx]">
<!-- Header Section -->
<view class="absolute left-0 top-0 w-full h-[544rpx] z-0">
<image class="w-full h-full" src="https://picsum.photos/seed/header/750/544" mode="aspectFill" />
<view class="absolute inset-0 bg-gradient-to-b from-blue-600/80 to-transparent"></view>
<image class="w-full h-full" src="https://picsum.photos/seed/header/750/544" mode="aspectFill" />
<view class="absolute inset-0 bg-gradient-to-b from-blue-600/80 to-transparent"></view>
</view>
<view class="relative z-10 px-[32rpx] pt-[180rpx]">
<text class="block text-white text-[44rpx] font-bold mb-[40rpx]">臻奇智荟圈</text>
<text class="block text-white text-[44rpx] font-bold mb-[40rpx] text-center">臻奇智荟圈</text>
<!-- Search Bar -->
<view class="flex items-center w-full h-[88rpx] bg-white/20 backdrop-blur-md rounded-full px-[32rpx] border border-white/30">
<Search class="text-white/80 mr-[16rpx]" size="18" />
<text class="text-white/80 text-[28rpx]">搜索培训资料、案例...</text>
</view>
<!-- Search Bar -->
<view
class="flex items-center w-full h-[88rpx] bg-white/20 backdrop-blur-md rounded-full px-[32rpx] border border-white/30">
<IconFont name="Search" class="text-white/80 mr-[16rpx]" size="18" />
<text class="text-white/80 text-[28rpx]">搜索培训资料、案例...</text>
</view>
</view>
<!-- Main Content -->
......@@ -21,13 +22,9 @@
<!-- Grid Icons -->
<view class="bg-white rounded-[32rpx] shadow-sm p-[40rpx] mb-[24rpx]">
<view class="flex flex-wrap">
<view
class="flex flex-col items-center w-1/3 mb-[40rpx]"
v-for="(item, index) in loopData0"
:key="index"
>
<view class="flex flex-col items-center w-1/3 mb-[40rpx]" v-for="(item, index) in loopData0" :key="index">
<view class="w-[88rpx] h-[88rpx] rounded-[24rpx] bg-blue-50 flex items-center justify-center mb-[16rpx]">
<component :is="item.icon" class="text-blue-600" size="24" />
<IconFont :name="item.icon" class="text-blue-600" size="24" />
</view>
<text class="text-gray-800 text-[26rpx]">{{ item.lanhutext0 }}</text>
</view>
......@@ -39,8 +36,8 @@
<view class="flex justify-between items-center mb-[24rpx]">
<text class="text-gray-900 text-[32rpx] font-bold">热卖产品：</text>
<view class="flex items-center text-blue-600">
<text class="text-[26rpx] mr-[4rpx]">查看更多</text>
<RectRight size="12" />
<text class="text-[26rpx] mr-[4rpx]">查看更多</text>
<IconFont name="RectRight" size="12" />
</view>
</view>
......@@ -49,17 +46,18 @@
<text class="block text-gray-800 text-[28rpx] font-medium mb-[20rpx]">家庭财富传承保障计划（分红）</text>
<view class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
<view class="bg-red-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-red-600 text-[22rpx]">收益率3.5%</text>
<text class="text-red-600 text-[22rpx]">收益率3.5%</text>
</view>
<view class="bg-orange-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-orange-600 text-[22rpx]">5年超值</text>
<text class="text-orange-600 text-[22rpx]">5年超值</text>
</view>
<view class="bg-green-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-green-600 text-[22rpx]">保证收益万能</text>
<text class="text-green-600 text-[22rpx]">保证收益万能</text>
</view>
</view>
<view class="flex justify-between gap-[24rpx]">
<nut-button plain color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600">产品资料</nut-button>
<nut-button plain color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600">产品资料</nut-button>
<nut-button color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0">计划书</nut-button>
</view>
</view>
......@@ -69,17 +67,18 @@
<text class="block text-gray-800 text-[28rpx] font-medium mb-[20rpx]">儿童教育金储备方案（分红）</text>
<view class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
<view class="bg-red-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-red-600 text-[22rpx]">收益率4.2%</text>
<text class="text-red-600 text-[22rpx]">收益率4.2%</text>
</view>
<view class="bg-orange-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-orange-600 text-[22rpx]">10年期</text>
<text class="text-orange-600 text-[22rpx]">10年期</text>
</view>
<view class="bg-green-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-green-600 text-[22rpx]">教育专属</text>
<text class="text-green-600 text-[22rpx]">教育专属</text>
</view>
</view>
<view class="flex justify-between gap-[24rpx]">
<nut-button plain color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600">产品资料</nut-button>
<nut-button plain color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600">产品资料</nut-button>
<nut-button color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0">计划书</nut-button>
</view>
</view>
......@@ -90,48 +89,51 @@
<view class="flex justify-between items-center mb-[24rpx]">
<text class="text-gray-900 text-[32rpx] font-bold">本周热门资料</text>
<view class="flex items-center text-blue-600">
<text class="text-[26rpx] mr-[4rpx]">查看更多</text>
<RectRight size="12" />
<text class="text-[26rpx] mr-[4rpx]">查看更多</text>
<IconFont name="RectRight" size="12" />
</view>
</view>
<!-- Material List -->
<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="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">
<text class="text-gray-400 text-[24rpx]">256人学习</text>
<text class="text-blue-600 text-[26rpx]">78%</text>
</view>
</view>
<!-- 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="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">
<text class="text-gray-400 text-[24rpx]">256人学习</text>
<text class="text-blue-600 text-[26rpx]">78%</text>
</view>
</view>
<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="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">
<text class="text-gray-400 text-[24rpx]">189人学习</text>
<text class="text-blue-600 text-[26rpx]">65%</text>
</view>
</view>
</view>
<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="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">
<text class="text-gray-400 text-[24rpx]">189人学习</text>
<text class="text-blue-600 text-[26rpx]">65%</text>
</view>
</view>
<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="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">
<text class="text-gray-400 text-[24rpx]">142人学习</text>
<text class="text-blue-600 text-[26rpx]">52%</text>
</view>
</view>
</view>
<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="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">
<text class="text-gray-400 text-[24rpx]">142人学习</text>
<text class="text-blue-600 text-[26rpx]">52%</text>
</view>
</view>
</view>
</view>
</view>
</view>
......@@ -142,48 +144,20 @@
</template>
<script setup>
import { ref } from 'vue';
import { ref, shallowRef } from 'vue';
import Taro, { useShareAppMessage } from '@tarojs/taro';
import { useGo } from '@/hooks/useGo';
import TabBar from '@/components/TabBar.vue';
import {
Search,
RectRight,
Order,
My,
Cart,
Home,
Category,
Star,
Service
} from '@nutui/icons-vue-taro';
import IconFont from '@/components/IconFont.vue';
// Data
const loopData0 = ref([
{
icon: Order,
lanhutext0: '计划书',
},
{
icon: My,
lanhutext0: '入职相关',
},
{
icon: Cart,
lanhutext0: '签单相关',
},
{
icon: Home,
lanhutext0: '家办相关',
},
{
icon: Category,
lanhutext0: '产品知识库',
},
{
icon: Star,
lanhutext0: '工具箱',
},
const loopData0 = shallowRef([
{ icon: 'Order', lanhutext0: '计划书' },
{ icon: 'My', lanhutext0: '入职相关' },
{ icon: 'Cart', lanhutext0: '签单相关' },
{ icon: 'Home', lanhutext0: '家办相关' },
{ icon: 'Category', lanhutext0: '产品知识库' },
{ icon: 'Star', lanhutext0: '工具箱' },
]);
// Navigation
......
<template>
<div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<!-- Navigation Header -->
<div class="relative w-full h-[300rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] flex items-center justify-center pt-[40rpx]">
<span class="text-white text-[44rpx] font-normal">入职相关</span>
</div>
<NavHeader title="入职相关" />
<!-- Content List -->
<div class="px-[40rpx] mt-[40rpx] relative z-10">
......@@ -19,14 +17,14 @@
<div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)">
<div class="flex items-center">
<div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
<component :is="item.icon" class="text-blue-600" size="32" />
<IconFont :name="item.icon" class="text-blue-600" size="32" />
</div>
<div class="flex flex-col">
<span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
<span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
</div>
</div>
<RectRight class="text-gray-400" size="16" />
<IconFont name="RectRight" class="text-gray-400" size="16" />
</div>
<!-- Divider -->
<div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
......@@ -41,85 +39,72 @@
</template>
<script setup>
import { ref } from 'vue'
import { shallowRef } from 'vue'
import { useGo } from '@/hooks/useGo'
import TabBar from '@/components/TabBar.vue'
import {
Edit,
Find,
Order,
Clock,
Checklist,
Check,
Star,
Top,
PlayCircleFill,
RectRight
} from '@nutui/icons-vue-taro'
import NavHeader from '@/components/NavHeader.vue'
import IconFont from '@/components/IconFont.vue'
const go = useGo()
const sections = ref([
const sections = shallowRef([
{
title: '入职前',
bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
items: [
{
icon: 'Edit',
title: '考试报名',
subtitle: '资格考试报名入口',
icon: Edit
subtitle: '报名参加代理人资格考试'
},
{
title: '考试资料及刷题',
subtitle: '历年真题及模拟题库',
icon: Find
icon: 'Find',
title: '面试结果查询',
subtitle: '查看面试状态和结果'
},
{
title: '签合约锁人规则',
subtitle: '合约条款详解',
icon: Order
icon: 'Order',
title: '入职材料提交',
subtitle: '上传入职所需证件和资料'
}
]
},
{
title: '入职中',
bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
items: [
{
icon: 'Clock',
title: '各个进度时间线表格',
subtitle: '入职进度跟踪表',
icon: Clock
subtitle: '查看入职流程关键节点'
},
{
title: '各个财务计划盘及对数',
subtitle: '财务计划配置指南',
icon: Checklist
icon: 'Checklist',
title: '待办事项清单',
subtitle: '你需要完成的任务列表'
},
{
title: '基本法对比',
subtitle: '公司制度对比分析',
icon: Check
icon: 'Check',
title: '签署合同',
subtitle: '电子合同在线签署'
}
]
},
{
title: '入职后',
bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
items: [
{
title: '公司拿钱必修课',
subtitle: '薪酬体系培训',
icon: Star
icon: 'Star',
title: '新人培训',
subtitle: '参加新人岗前培训课程'
},
{
title: '升职流程条件',
subtitle: '晋升通道说明',
icon: Top
icon: 'Top',
title: '业绩目标设定',
subtitle: '制定首月业绩目标'
},
{
title: '必修课程',
subtitle: '岗位技能课程',
icon: PlayCircleFill
icon: 'PlayCircleFill',
title: '团队介绍',
subtitle: '了解你的团队和主管'
}
]
}
......
<template>
<div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<!-- Navigation Header -->
<div class="relative w-full h-[300rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] flex items-center justify-center pt-[40rpx]">
<span class="text-white text-[44rpx] font-normal">签单相关</span>
</div>
<NavHeader title="签单相关" />
<!-- Content List -->
<div class="px-[40rpx] mt-[40rpx] relative z-10">
......@@ -19,14 +17,14 @@
<div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)">
<div class="flex items-center">
<div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
<component :is="item.icon" class="text-blue-600" size="32" />
<IconFont :name="item.icon" class="text-blue-600" size="32" />
</div>
<div class="flex flex-col">
<span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
<span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
</div>
</div>
<RectRight class="text-gray-400" size="16" />
<IconFont name="RectRight" class="text-gray-400" size="16" />
</div>
<!-- Divider -->
<div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
......@@ -41,109 +39,92 @@
</template>
<script setup>
import { ref } from 'vue'
import { shallowRef } from 'vue'
import { useGo } from '@/hooks/useGo'
import TabBar from '@/components/TabBar.vue'
import {
Shop,
Category,
Check,
Edit,
Checklist,
Cart,
People,
Order,
Clock,
Refresh,
Location,
RectRight
} from '@nutui/icons-vue-taro'
import NavHeader from '@/components/NavHeader.vue'
import IconFont from '@/components/IconFont.vue'
const go = useGo()
const sections = ref([
const sections = shallowRef([
{
title: '培训板块',
bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
items: [
{
icon: 'Shop',
title: '公司介绍',
subtitle: '企业背景及发展历程',
icon: Shop
subtitle: '企业背景及发展历程'
},
{
icon: 'Category',
title: '产品介绍及更新',
subtitle: '最新产品资料库',
icon: Category
subtitle: '最新产品资料库'
}
]
},
{
title: '签单前',
bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
items: [
{
icon: 'Check',
title: '预核保',
subtitle: '核保流程指引',
icon: Check
subtitle: '核保流程指引'
},
{
icon: 'Edit',
title: '做计划书',
subtitle: '方案设计工具',
icon: Edit
subtitle: '方案设计工具'
}
]
},
{
title: '签单中',
bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
items: [
{
icon: 'Checklist',
title: '信息收集及健康告知模板',
subtitle: '标准表格及注意事项',
icon: Checklist
subtitle: '标准表格及注意事项'
},
{
icon: 'Cart',
title: '缴费方式银行开户',
subtitle: '支付渠道办理指南',
icon: Cart
subtitle: '支付渠道办理指南'
},
{
icon: 'People',
title: '体检经验',
subtitle: '体检流程及常见问题',
icon: People
subtitle: '体检流程及常见问题'
}
]
},
{
title: '签单后',
bgGradient: 'linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%)',
items: [
{
icon: 'Order',
title: '批单跟进',
subtitle: '保单变更处理流程',
icon: Order
subtitle: '保单变更处理流程'
},
{
icon: 'Clock',
title: '核保/pending',
subtitle: '核保进度查询',
icon: Clock
subtitle: '核保进度查询'
},
{
icon: 'Refresh',
title: '续保',
subtitle: '续期服务指引',
icon: Refresh
subtitle: '续期服务指引'
}
]
},
{
title: '售后',
bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
items: [
{
icon: 'Location',
title: '香港医生资源',
subtitle: '专业医疗机构名录',
icon: Location
subtitle: '专业医疗机构名录'
}
]
}
......