Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
cb3ebbaa 1 parent b4501805

feat: 新增我的模块相关页面并优化导航组件 

- 新增我的、我的计划书、我的收藏、修改头像、意见反馈和登录页面
- 优化导航组件，为NavHeader添加返回按钮逻辑
- 更新底部导航栏，将"我的"路径指向新页面
- 注册新页面路由至应用配置
- 更新主题色为蓝色并扩展组件类型声明
- 为IconFont组件新增图标支持
Inline Side-by-side
Showing 47 changed files with 3117 additions and 7 deletions
......@@ -10,7 +10,11 @@ declare module 'vue' {
IconFont: typeof import('./src/components/IconFont.vue')['default']
IndexNav: typeof import('./src/components/indexNav.vue')['default']
NavHeader: typeof import('./src/components/NavHeader.vue')['default']
NutAvatar: typeof import('@nutui/nutui-taro')['Avatar']
NutButton: typeof import('@nutui/nutui-taro')['Button']
NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
NutTextarea: typeof import('@nutui/nutui-taro')['Textarea']
NutUploader: typeof import('@nutui/nutui-taro')['Uploader']
Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
QrCode: typeof import('./src/components/qrCode.vue')['default']
......
......@@ -4,6 +4,53 @@ All notable changes to this project will be documented in this file.
## [Unreleased]
### Changed
- 优化 "我的" 页面 (`src/pages/mine`)：
- 重构页面布局，严格还原设计稿 (`docs/design/manulife-V1/我的`) 样式
- 引入用户卡片背景图，优化头像、姓名及工号展示布局
- 重构菜单列表样式，使用白色卡片容器 + 列表项分割线设计
- 保持 `NavHeader` 和 `TabBar` 组件集成，确保全站导航一致性
- 优化图标尺寸与配色，使用蓝色背景块衬托图标，提升视觉精致度
- 优化 "我的计划书" 页面 (`src/pages/plan`)：
- 引入 `NavHeader` 组件，保持页面头部风格统一
- 替换 `nut-tabs` 为自定义 Tailwind CSS Tabs，复用知识库页面样式与逻辑
- 优化列表筛选逻辑与样式
- 优化 "修改头像" 页面 (`src/pages/avatar`)：
- 替换头像为随机图片
- 调整编辑图标位置至头像正中心，并增加半透明背景增加辨识度
- 统一底部按钮配色为主色调（蓝色），提升视觉一致性
- 优化 "我的收藏" 页面 (`src/pages/favorites`)：
- 重构页面布局，还原 (`docs/design/manulife-V1/我的收藏`) 设计稿样式
- 引入设计稿同款 Tab 容器背景图，优化分类切换交互
- 重构列表项样式，引入"文件类型"图标概念（PDF/Word/PPT/TXT），通过不同配色区分文档类型
- 保持 `NavHeader` 和 `TabBar` 组件集成
- 优化空状态展示逻辑
- 调整列表日期显示样式：日期置于分类下方，采用灰色字体
- 增加删除功能：列表右侧增加删除按钮，点击弹出确认对话框
- 优化 "意见反馈" 页面 (`src/pages/feedback`)：
- 调整问题描述输入框样式，增加边框和内边距，优化视觉体验
- 优化 `NavHeader` 组件 (`src/components/NavHeader.vue`)：
- 新增返回按钮逻辑：当页面栈深度大于1时，自动显示左侧返回按钮
- 优化布局结构，确保标题在显示返回按钮时依然保持绝对居中
- 修复部分页面（我的计划书、修改头像、意见反馈）顶部导航栏及返回按钮缺失问题：
- 补充 `src/pages/plan/index.vue` 中 `NavHeader` 组件的引用
- 补充 `src/pages/avatar/index.vue` 中 `NavHeader` 组件的引用
- 补充 `src/pages/feedback/index.vue` 中 `NavHeader` 组件的引用
### Added
- 新增 "我的" 页面 (`src/pages/mine`)，包含用户信息展示、功能菜单列表
- 新增 "我的计划书" 页面 (`src/pages/plan`)，实现计划书列表展示、搜索过滤、状态切换功能
- 新增 "我的收藏" 页面 (`src/pages/favorites`)，实现文章/资料收藏列表及分类筛选功能
- 新增 "修改头像" 页面 (`src/pages/avatar`)，实现头像展示与修改交互
- 新增 "意见反馈" 页面 (`src/pages/feedback`)，实现反馈类型选择、问题描述及截图上传表单
- 新增 "登录" 页面 (`src/pages/login`)，实现账号密码登录界面（含欢迎语、表单、登录按钮及功能链接）
- 注册上述 6 个新页面路由至 `src/app.config.js`
### Changed
- 更新底部导航栏组件 (`src/components/TabBar.vue`)，将 "我的" 标签路径指向新的 `src/pages/mine/index`
- 优化页面样式实现，全面使用 Tailwind CSS 替代传统 CSS，提升开发效率与样式一致性
- 集成 NutUI 组件库 (`nut-avatar`, `nut-cell`, `nut-tabs`, `nut-searchbar`, `nut-uploader`, `nut-textarea`) 提升交互体验
### Fixed
- 修复 Vue 3 响应式组件警告：将包含 NutUI 图标组件的静态数据源从 `ref` 升级为 `shallowRef`，并结合 `markRaw` 使用。彻底消除了 "Component that was made a reactive object" 警告，避免了 Vue 对组件对象进行不必要的深度代理，显著提升了页面初始化和渲染性能。涉及首页、TabBar、入职相关、签单相关及家办相关所有页面。
- 优化 `NavHeader` 组件交互体验，将页面头部固定在顶部 (`fixed`)，并内置等高占位元素防止内容遮挡，提升滚动时的用户体验。
......
.page {
background-color: rgba(249, 250, 251, 1);
position: relative;
width: 393px;
height: 711px;
overflow: hidden;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 7px;
}
.box_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;
}
.box_2 {
padding-bottom: 33px;
}
.box_3 {
width: 393px;
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8b2d54a24b64b70feddcc9b0ace1ad4824ac8f04fdb3df9070626abcd200601b)
100% no-repeat;
background-size: 100% 100%;
padding: 16px 157px 16px 20px;
}
.label_1 {
width: 24px;
height: 24px;
margin: 2px 0 2px 0;
}
.text_2 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 28px;
}
.box_4 {
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng83f94bf29a401bd85eabe889d8c06a7dbf3a437bfe4c5027066af2715dccad0a)
0px 0px no-repeat;
background-size: 121px 120px;
align-self: center;
margin-top: 40px;
width: 120px;
}
.box_5 {
background-color: rgba(37, 99, 235, 0.5);
border-radius: 9999px;
padding: 32px 32px 32px 32px;
}
.image-text_1 {
}
.label_2 {
width: 32px;
height: 32px;
align-self: center;
}
.text-group_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;
margin-top: 4px;
}
.box_6 {
width: 345px;
margin: 330px 28px 0 20px;
}
.text-wrapper_1 {
background-color: rgba(255, 255, 255, 1);
border-radius: 6px;
border: 1px solid rgba(0, 122, 255, 1);
padding: 9px 67px 9px 67px;
}
.text_3 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 24px;
}
.text-wrapper_2 {
background-color: rgba(0, 122, 255, 1);
border-radius: 6px;
padding: 10px 67px 10px 67px;
}
.text_4 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 24px;
}
.image_2 {
width: 393px;
height: 34px;
margin-top: -1px;
}
<!--
* @Date: 2026-01-29 22:02:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 22:18:49
* @FilePath: /manulife-weapp/docs/design/manulife-V1/修改头像/code/index.vue
* @Description: 文件描述
-->
<template>
<div class="page flex-col">
<div class="box_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="box_2 flex-col">
<div class="box_3 flex-row justify-between">
<img
class="label_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8d9b1510cae8946e1251bb518347ad321d8ce71de7b15fe74d7322e00d291ac6"
/>
<span class="text_2">修改头像</span>
</div>
<div class="box_4 flex-col">
<div class="box_5 flex-row">
<div class="image-text_1 flex-col">
<img
class="label_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng10d0ebc33a9e3b543c2f2f5fcf4754aa8d07e8fee9c7ef7a1d8282acc5d8313d"
/>
<span class="text-group_1">更换头像</span>
</div>
</div>
</div>
<div class="box_6 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>
</div>
<img
class="image_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga10dae7cebe325c9065bce1655cc7c5c9e6d6a508b0aeac86e31a977746d29c7"
/>
</div>
</template>
<script>
export default {
data() {
return {
constants: {},
};
},
methods: {},
};
</script>
<style src="./common.css" />
<style src="./index.css" />
.page {
background-color: rgba(249, 250, 251, 1);
position: relative;
width: 393px;
height: 867px;
overflow: hidden;
}
.box_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;
}
.box_2 {
width: 393px;
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8b2d54a24b64b70feddcc9b0ace1ad4824ac8f04fdb3df9070626abcd200601b)
100% no-repeat;
background-size: 100% 100%;
padding: 16px 157px 16px 20px;
}
.label_1 {
width: 24px;
height: 24px;
margin: 2px 0 2px 0;
}
.text_2 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 28px;
}
.box_3 {
width: 353px;
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng0fe6d429d514dd15b7a6160a68ed140c5544f99d011568e5113df745dea401b3) -2px -1px
no-repeat;
background-size: 357px 629px;
align-self: center;
margin-top: 20px;
padding: 20px 20px 20px 20px;
}
.text_3 {
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-right: 249px;
}
.section_1 {
width: 313px;
margin-top: 12px;
}
.text-wrapper_1 {
background-color: rgba(0, 122, 255, 0.1);
border-radius: 8px;
border: 1px solid rgba(0, 122, 255, 0.3);
padding: 8px 20px 8px 19px;
}
.text_4 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 20px;
}
.text-wrapper_2 {
background-color: rgba(0, 122, 255, 1);
border-radius: 8px;
padding: 9px 20px 9px 19px;
}
.text_5 {
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: center;
white-space: nowrap;
line-height: 20px;
}
.text-wrapper_3 {
background-color: rgba(0, 122, 255, 0.1);
border-radius: 8px;
border: 1px solid rgba(0, 122, 255, 0.3);
padding: 8px 34px 8px 33px;
}
.text_6 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
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: 24px 249px 0 0;
}
.text-wrapper_4 {
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
border: 1px solid rgba(229, 231, 235, 1);
margin-top: 12px;
padding: 21px 89px 77px 15px;
}
.text_8 {
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;
}
.text_9 {
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: 29px 185px 0 0;
}
.section_2 {
width: 264px;
margin: 12px 49px 0 0;
}
.image-text_1 {
background-color: rgba(249, 250, 251, 1);
border-radius: 8px;
border: 2px 6, 4 rgba(229, 231, 235, 1);
padding: 16px 26px 16px 26px;
}
.label_2 {
width: 24px;
height: 24px;
}
.text-group_1 {
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;
margin-top: 4px;
}
.image_2 {
width: 80px;
height: 80px;
}
.image_3 {
width: 80px;
height: 80px;
}
.text-wrapper_5 {
background-color: rgba(0, 122, 255, 1);
border-radius: 8px;
margin-top: 138px;
padding: 12px 125px 12px 124px;
}
.text_10 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 24px;
}
.box_4 {
background-color: rgba(255, 255, 255, 1);
margin-top: 20px;
padding-bottom: 9px;
}
.image_4 {
width: 393px;
height: 1px;
}
.group_1 {
width: 269px;
align-self: center;
margin-top: 10px;
}
.image-text_2 {
}
.label_3 {
width: 24px;
height: 24px;
}
.text-group_2 {
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;
margin-top: 4px;
}
.image-text_3 {
}
.label_4 {
width: 24px;
height: 24px;
align-self: center;
}
.text-group_3 {
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;
margin-top: 4px;
}
.image-text_4 {
}
.label_5 {
width: 24px;
height: 24px;
}
.text-group_4 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin-top: 4px;
}
.image_5 {
width: 393px;
height: 34px;
}
<template>
<div class="page flex-col">
<div class="box_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="box_2 flex-row justify-between">
<img
class="label_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8d9b1510cae8946e1251bb518347ad321d8ce71de7b15fe74d7322e00d291ac6"
/>
<span class="text_2">意见反馈</span>
</div>
<div class="box_3 flex-col">
<span class="text_3">反馈类型</span>
<div class="section_1 flex-row justify-between">
<div class="text-wrapper_1 flex-col">
<span class="text_4">功能建议</span>
</div>
<div class="text-wrapper_2 flex-col">
<span class="text_5">问题反馈</span>
</div>
<div class="text-wrapper_3 flex-col">
<span class="text_6">其他</span>
</div>
</div>
<span class="text_7">问题描述</span>
<div class="text-wrapper_4 flex-col">
<span class="text_8">请详细描述您遇到的问题或建议...</span>
</div>
<span class="text_9">添加截图（可选）</span>
<div class="section_2 flex-row justify-between">
<div class="image-text_1 flex-col">
<img
class="label_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge5773c9fb44fd9defd9e91236f9c7886a0e0de20eea89ee30769a6712723e65d"
/>
<span class="text-group_1">上传</span>
</div>
<img
class="image_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng68a3d8f2097f26066cf3f1669c27d11e4b5a7c8081ebc6c1b981c50e0074b77d"
/>
<img
class="image_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngda9f664785a552242f37b83090bf845ce70e00e0b59e1a577ae45a22983b4fca"
/>
</div>
<div class="text-wrapper_5 flex-col">
<span class="text_10">提交反馈</span>
</div>
</div>
<div class="box_4 flex-col">
<img
class="image_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
/>
<div class="group_1 flex-row justify-between">
<div class="image-text_2 flex-col">
<img
class="label_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbd9205e4b62cd8bbf2ca836033731f8941362539da1b5092b7238c1d20a8b893"
/>
<span class="text-group_2">首页</span>
</div>
<div class="image-text_3 flex-col">
<img
class="label_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge3c905d9bf073c4382e089264cf3a9bbaa6d9f6e2b13ca001c973e0a0e99e546"
/>
<span class="text-group_3">AI答疑</span>
</div>
<div class="image-text_4 flex-col">
<img
class="label_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd682274e12d83204c6fe38541ed229be1287f4906b1649a2f43087e9a1663141"
/>
<span class="text-group_4">我的</span>
</div>
</div>
</div>
<img
class="image_5"
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" />
.page {
background-color: rgba(249, 250, 251, 1);
position: relative;
width: 393px;
height: 852px;
overflow: hidden;
}
.box_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;
}
.box_2 {
padding-bottom: 17px;
}
.group_1 {
width: 393px;
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8b2d54a24b64b70feddcc9b0ace1ad4824ac8f04fdb3df9070626abcd200601b)
100% no-repeat;
background-size: 100% 100%;
padding: 16px 20px 16px 20px;
}
.label_1 {
width: 24px;
height: 24px;
margin: 2px 0 2px 0;
}
.text_2 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 28px;
}
.label_2 {
width: 24px;
height: 24px;
margin: 2px 0 2px 0;
}
.group_2 {
width: 353px;
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng19a28c052635ccb70614c5be60713a4731e85f98029d396460b46bb31e6a529f) -2px -1px
no-repeat;
background-size: 357px 124px;
align-self: center;
margin-top: 20px;
justify-content: flex-center;
padding: 20px 20px 20px 20px;
}
.image_2 {
width: 80px;
height: 80px;
}
.text-group_1 {
margin: 2px 0 2px 16px;
}
.text_3 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 18px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 28px;
margin-right: 82px;
}
.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;
margin-top: 4px;
}
.text_5 {
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;
margin: 4px 34px 0 0;
}
.thumbnail_1 {
width: 20px;
height: 20px;
margin: 30px 0 30px 79px;
}
.box_3 {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 12px;
width: 353px;
align-self: center;
margin-top: -1px;
padding: 16px 16px 16px 16px;
}
.block_1 {
width: 321px;
}
.image-text_1 {
width: 132px;
}
.label_3 {
width: 40px;
height: 40px;
}
.text-group_2 {
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: center;
white-space: nowrap;
line-height: 24px;
margin-top: 8px;
}
.thumbnail_2 {
width: 20px;
height: 20px;
margin: 10px 0 10px 0;
}
.image_3 {
width: 321px;
height: 1px;
margin-top: 16px;
}
.block_2 {
width: 321px;
margin-top: 16px;
}
.image-text_2 {
width: 116px;
}
.label_4 {
width: 40px;
height: 40px;
}
.text-group_3 {
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: center;
white-space: nowrap;
line-height: 24px;
margin-top: 8px;
}
.thumbnail_3 {
width: 20px;
height: 20px;
margin: 10px 0 10px 0;
}
.image_4 {
width: 321px;
height: 1px;
margin-top: 16px;
}
.block_3 {
width: 321px;
margin-top: 16px;
}
.image-text_3 {
width: 116px;
}
.label_5 {
width: 40px;
height: 40px;
}
.text-group_4 {
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: center;
white-space: nowrap;
line-height: 24px;
margin-top: 8px;
}
.thumbnail_4 {
width: 20px;
height: 20px;
margin: 10px 0 10px 0;
}
.image_5 {
width: 321px;
height: 1px;
margin-top: 16px;
}
.block_4 {
width: 321px;
margin-top: 16px;
}
.image-text_4 {
width: 116px;
}
.label_6 {
width: 40px;
height: 40px;
}
.text-group_5 {
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: center;
white-space: nowrap;
line-height: 24px;
margin-top: 8px;
}
.thumbnail_5 {
width: 20px;
height: 20px;
margin: 10px 0 10px 0;
}
.box_4 {
background-color: rgba(255, 255, 255, 1);
margin-top: 203px;
padding-bottom: 10px;
}
.image_6 {
width: 393px;
height: 1px;
}
.group_3 {
width: 269px;
align-self: center;
margin-top: 9px;
}
.image-text_5 {
}
.label_7 {
width: 24px;
height: 24px;
}
.text-group_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;
margin-top: 4px;
}
.image-text_6 {
}
.label_8 {
width: 24px;
height: 24px;
align-self: center;
}
.text-group_7 {
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;
margin-top: 4px;
}
.image-text_7 {
}
.label_9 {
width: 24px;
height: 24px;
}
.text-group_8 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin-top: 4px;
}
.image_7 {
width: 393px;
height: 34px;
}
<template>
<div class="page flex-col">
<div class="box_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="box_2 flex-col">
<div class="group_1 flex-row justify-between">
<img
class="label_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8d9b1510cae8946e1251bb518347ad321d8ce71de7b15fe74d7322e00d291ac6"
/>
<span class="text_2">我的</span>
<img
class="label_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng18c84189e37bc6cadf64cbf211b12bc413e557fbf9e640b22bf3ad042dd85ec4"
/>
</div>
<div class="group_2 flex-row">
<img
class="image_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng2b7c83dcf5ae7b10cb2eb39fdfe6beed53f9886679c4a5b493cd7047f356e997"
/>
<div class="text-group_1 flex-col">
<span class="text_3">张三</span>
<span class="text_4">工号:&nbsp;EMP2026001</span>
<span class="text_5">点击修改头像</span>
</div>
<img
class="thumbnail_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b"
/>
</div>
</div>
<div class="box_3 flex-col">
<div class="block_1 flex-row justify-between">
<div class="image-text_1 flex-row justify-between">
<img
class="label_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf5e8e5151c7637a0ded8eee2b09a390f49b2f9f6e784202b1391b093a862603"
/>
<span class="text-group_2">我的计划书</span>
</div>
<img
class="thumbnail_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b"
/>
</div>
<img
class="image_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57c4639b8bfeac9627fb7aedb8a38f4441026309724d794e28b0e35d1b620544"
/>
<div class="block_2 flex-row justify-between">
<div class="image-text_2 flex-row justify-between">
<img
class="label_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc2ef91480e2c570b4efdd4fe5f9bcc6f4b87d320bda66594bb9ee453f1ca02e4"
/>
<span class="text-group_3">我的收藏</span>
</div>
<img
class="thumbnail_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b"
/>
</div>
<img
class="image_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57c4639b8bfeac9627fb7aedb8a38f4441026309724d794e28b0e35d1b620544"
/>
<div class="block_3 flex-row justify-between">
<div class="image-text_3 flex-row justify-between">
<img
class="label_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd07067fbda439a756b6e1a75c7d748a2b34521c2c7835eccafcc23645f0375f2"
/>
<span class="text-group_4">帮助中心</span>
</div>
<img
class="thumbnail_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b"
/>
</div>
<img
class="image_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57c4639b8bfeac9627fb7aedb8a38f4441026309724d794e28b0e35d1b620544"
/>
<div class="block_4 flex-row justify-between">
<div class="image-text_4 flex-row justify-between">
<img
class="label_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge2f7b8fa2bdccd402054dda5c031def0c6fdc76b0d591528d9bbab7effc2863d"
/>
<span class="text-group_5">意见反馈</span>
</div>
<img
class="thumbnail_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b"
/>
</div>
</div>
<div class="box_4 flex-col">
<img
class="image_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
/>
<div class="group_3 flex-row justify-between">
<div class="image-text_5 flex-col">
<img
class="label_7"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbd9205e4b62cd8bbf2ca836033731f8941362539da1b5092b7238c1d20a8b893"
/>
<span class="text-group_6">首页</span>
</div>
<div class="image-text_6 flex-col">
<img
class="label_8"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge3c905d9bf073c4382e089264cf3a9bbaa6d9f6e2b13ca001c973e0a0e99e546"
/>
<span class="text-group_7">AI答疑</span>
</div>
<div class="image-text_7 flex-col">
<img
class="label_9"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd682274e12d83204c6fe38541ed229be1287f4906b1649a2f43087e9a1663141"
/>
<span class="text-group_8">我的</span>
</div>
</div>
</div>
<img
class="image_7"
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" />
.page {
background-color: rgba(249, 250, 251, 1);
position: relative;
width: 393px;
height: 862px;
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: 16px;
margin: 2px 0 2px 0;
}
.group_2 {
padding-bottom: 1px;
}
.section_1 {
width: 393px;
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8b2d54a24b64b70feddcc9b0ace1ad4824ac8f04fdb3df9070626abcd200601b)
100% no-repeat;
background-size: 100% 100%;
padding: 16px 20px 16px 20px;
}
.label_1 {
width: 24px;
height: 24px;
margin: 2px 0 2px 0;
}
.text_2 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 28px;
}
.label_2 {
width: 24px;
height: 24px;
margin: 2px 0 2px 0;
}
.section_2 {
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga29210f2f5f94a789a5a08d5b75affd2f68da6108c1cf5328ce44da4ad92ee40) -2px -1px
no-repeat;
background-size: 357px 72px;
align-self: center;
margin-top: 20px;
width: 353px;
padding: 16px 16px 16px 16px;
}
.box_1 {
}
.section_3 {
width: 321px;
}
.text-wrapper_1 {
background-color: rgba(0, 122, 255, 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: center;
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: center;
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: center;
white-space: nowrap;
line-height: 20px;
}
.text-wrapper_4 {
background-color: rgba(243, 244, 246, 1);
border-radius: 9999px;
}
.text_6 {
width: 56px;
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: center;
white-space: nowrap;
line-height: 20px;
margin: 8px -11px 8px 16px;
}
.list_1 {
width: 353px;
height: 540px;
align-self: center;
margin-top: 16px;
}
.list-items_1 {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 12px;
width: 353px;
margin-bottom: 12px;
padding: 16px 16px 16px 16px;
}
.image-text_1 {
width: 249px;
}
.label_3 {
width: 40px;
height: 40px;
margin: 4px 0 4px 0;
}
.text-group_1 {
}
.text_7 {
width: 197px;
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;
}
.text-wrapper_5 {
width: 196px;
margin: 4px 1px 0 0;
}
.text_8 {
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;
}
.text_9 {
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;
}
.text_10 {
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;
}
.label_4 {
width: 24px;
height: 24px;
margin: 12px 0 12px 0;
}
.section_4 {
background-color: rgba(255, 255, 255, 1);
margin-top: 16px;
padding-bottom: 10px;
}
.image_2 {
width: 393px;
height: 1px;
}
.block_1 {
width: 269px;
align-self: center;
margin-top: 9px;
}
.image-text_2 {
}
.label_5 {
width: 24px;
height: 24px;
}
.text-group_2 {
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;
margin-top: 4px;
}
.image-text_3 {
}
.label_6 {
width: 24px;
height: 24px;
align-self: center;
}
.text-group_3 {
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;
margin-top: 4px;
}
.image-text_4 {
}
.label_7 {
width: 24px;
height: 24px;
}
.text-group_4 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin-top: 4px;
}
.image_3 {
width: 393px;
height: 34px;
margin-top: -1px;
}
<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/SketchPng413f9d678a24a9b746fdc981fa579b56b2cbd98eddd024ab1279ef48ae59291e"
/>
</div>
<div class="group_2 flex-col">
<div class="section_1 flex-row justify-between">
<img
class="label_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8d9b1510cae8946e1251bb518347ad321d8ce71de7b15fe74d7322e00d291ac6"
/>
<span class="text_2">我的收藏</span>
<img
class="label_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3dbc704029e33046856031680193358987467d6bf27d6a060b4df59c8e01b6e9"
/>
</div>
<div class="section_2 flex-col">
<div class="box_1 flex-col">
<div class="section_3 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>
</div>
<div class="list_1 flex-col">
<div
class="list-items_1 flex-row justify-between"
v-for="(item, index) in loopData0"
:key="index"
>
<div class="image-text_1 flex-row justify-between">
<img
class="label_3"
referrerpolicy="no-referrer"
:src="item.lanhuimage0"
/>
<div class="text-group_1 flex-col">
<span class="text_7" v-html="item.lanhutext0"></span>
<div class="text-wrapper_5 flex-row justify-between">
<span class="text_8" v-html="item.lanhutext1"></span>
<span class="text_9" v-html="item.lanhutext2"></span>
<span class="text_10" v-html="item.lanhutext3"></span>
</div>
</div>
</div>
<img
class="label_4"
referrerpolicy="no-referrer"
:src="item.lanhuimage1"
/>
</div>
</div>
<div class="section_4 flex-col">
<img
class="image_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
/>
<div class="block_1 flex-row justify-between">
<div class="image-text_2 flex-col">
<img
class="label_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbd9205e4b62cd8bbf2ca836033731f8941362539da1b5092b7238c1d20a8b893"
/>
<span class="text-group_2">首页</span>
</div>
<div class="image-text_3 flex-col">
<img
class="label_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge3c905d9bf073c4382e089264cf3a9bbaa6d9f6e2b13ca001c973e0a0e99e546"
/>
<span class="text-group_3">AI答疑</span>
</div>
<div class="image-text_4 flex-col">
<img
class="label_7"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd682274e12d83204c6fe38541ed229be1287f4906b1649a2f43087e9a1663141"
/>
<span class="text-group_4">我的</span>
</div>
</div>
</div>
</div>
<img
class="image_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng830c4568c4d0141e1fa97f7fad1e075e2178ab08e5613734b08eaf46dcdd4207"
/>
</div>
</template>
<script>
export default {
data() {
return {
loopData0: [
{
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng2a08d3305159fa0049921122f446f300f9f4084d0556481e5dc833cee575b5c4',
lanhutext0: '新员工入职培训手册2024版',
lanhutext1: '入职培训',
lanhutext2: '·',
lanhutext3: '2024-01-15&nbsp;10:30',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng847547b5cff3ab17c17ab5bdf47e4d17e4d69c76f64e3b4badaa69a62dec6714',
},
{
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd175db2c335f15d9794c5bd9fbd601fb65b42bfa6620ae87517aae3d595dc1f0',
lanhutext0: '保险产品销售话术技巧',
lanhutext1: '签单相关',
lanhutext2: '·',
lanhutext3: '2024-01-14&nbsp;15:20',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng847547b5cff3ab17c17ab5bdf47e4d17e4d69c76f64e3b4badaa69a62dec6714',
},
{
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb5f0c3808255a972e67887af592d3a803242224a5a7de8f833e7ddcbbe3461bd',
lanhutext0: '重疾险产品知识详解PPT',
lanhutext1: '产品知识',
lanhutext2: '·',
lanhutext3: '2024-01-13&nbsp;09:45',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng847547b5cff3ab17c17ab5bdf47e4d17e4d69c76f64e3b4badaa69a62dec6714',
},
{
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng2a08d3305159fa0049921122f446f300f9f4084d0556481e5dc833cee575b5c4',
lanhutext0: '2024年最新保险政策解读',
lanhutext1: '政策解读',
lanhutext2: '·',
lanhutext3: '2024-01-12&nbsp;14:00',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng847547b5cff3ab17c17ab5bdf47e4d17e4d69c76f64e3b4badaa69a62dec6714',
},
{
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng459b0e5c335abc02165a409622d5156522a0e92daa6e1cf322d620eb613bc239',
lanhutext0: '客户资料管理表格模板',
lanhutext1: '签单相关',
lanhutext2: '·',
lanhutext3: '2024-01-11&nbsp;11:30',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng847547b5cff3ab17c17ab5bdf47e4d17e4d69c76f64e3b4badaa69a62dec6714',
},
{
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng2a08d3305159fa0049921122f446f300f9f4084d0556481e5dc833cee575b5c4',
lanhutext0: '医疗险理赔流程指南',
lanhutext1: '产品知识',
lanhutext2: '·',
lanhutext3: '2024-01-10&nbsp;16:20',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng847547b5cff3ab17c17ab5bdf47e4d17e4d69c76f64e3b4badaa69a62dec6714',
},
],
constants: {},
};
},
methods: {},
};
</script>
<style src="./common.css" />
<style src="./index.css" />
.page {
background-color: rgba(249, 250, 251, 1);
position: relative;
width: 393px;
height: 1056px;
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 {
padding-bottom: 1px;
}
.box_1 {
width: 393px;
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8b2d54a24b64b70feddcc9b0ace1ad4824ac8f04fdb3df9070626abcd200601b)
100% no-repeat;
background-size: 100% 100%;
padding: 16px 20px 16px 20px;
}
.label_1 {
width: 24px;
height: 24px;
margin: 2px 0 2px 0;
}
.text_2 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 28px;
}
.label_2 {
width: 24px;
height: 24px;
margin: 2px 0 2px 0;
}
.box_2 {
width: 353px;
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng16f4252baaf5559f521cf16b2f33822f6d07dec1910652e2e7464b576a2c16c3) -2px -1px
no-repeat;
background-size: 357px 48px;
align-self: center;
margin-top: 20px;
padding: 12px 125px 12px 16px;
}
.image-text_1 {
width: 212px;
}
.thumbnail_1 {
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;
}
.box_3 {
width: 256px;
margin: 16px 117px 0 20px;
}
.text-wrapper_1 {
background-color: rgba(37, 99, 235, 1);
border-radius: 8px;
padding: 8px 20px 8px 20px;
}
.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: center;
white-space: nowrap;
line-height: 20px;
}
.text-wrapper_2 {
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
padding: 8px 20px 8px 20px;
}
.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: center;
white-space: nowrap;
line-height: 20px;
}
.text-wrapper_3 {
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
padding: 8px 20px 8px 20px;
}
.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: center;
white-space: nowrap;
line-height: 20px;
}
.list_1 {
width: 353px;
height: 684px;
align-self: center;
margin-top: 12px;
}
.list-items_1 {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 16px;
width: 353px;
height: 162px;
margin-bottom: 12px;
padding: 16px 16px 9px 16px;
}
.text_6 {
width: 288px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 18px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 28px;
margin-right: 69px;
}
.box_4 {
width: 165px;
height: 20px;
margin: 14px 156px 0 0;
}
.text_7 {
width: 77px;
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(219, 234, 254, 1);
border-radius: 9999px;
margin: 1px 0 1px 2px;
padding: 1px 12px 1px 12px;
}
.text_8 {
overflow-wrap: break-word;
color: rgba(37, 99, 235, 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-wrapper_5 {
background-color: rgba(219, 234, 254, 1);
border-radius: 9999px;
margin: 1px 0 1px 16px;
padding: 1px 12px 1px 12px;
}
.text_9 {
overflow-wrap: break-word;
color: rgba(37, 99, 235, 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_10 {
width: 95px;
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;
margin: 20px 226px 0 0;
}
.image_2 {
width: 321px;
height: 1px;
margin-top: 9px;
}
.box_5 {
margin: 9px 5px 0 198px;
}
.thumbnail_2 {
width: 16px;
height: 16px;
margin: 2px 0 2px 0;
}
.text_11 {
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: center;
white-space: nowrap;
line-height: 20px;
margin-left: 8px;
}
.thumbnail_3 {
width: 16px;
height: 16px;
margin: 2px 0 2px 14px;
}
.text_12 {
overflow-wrap: break-word;
color: rgba(239, 68, 68, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 20px;
margin-left: 8px;
}
.box_6 {
background-color: rgba(255, 255, 255, 1);
margin-top: 42px;
padding-bottom: 10px;
}
.image_3 {
width: 393px;
height: 1px;
}
.group_1 {
width: 269px;
align-self: center;
margin-top: 9px;
}
.image-text_2 {
}
.label_3 {
width: 24px;
height: 24px;
}
.text-group_2 {
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;
margin-top: 4px;
}
.image-text_3 {
}
.label_4 {
width: 24px;
height: 24px;
align-self: center;
}
.text-group_3 {
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;
margin-top: 4px;
}
.image-text_4 {
}
.label_5 {
width: 24px;
height: 24px;
}
.text-group_4 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin-top: 4px;
}
.image_4 {
width: 393px;
height: 34px;
margin-top: -1px;
}
<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-col">
<div class="box_1 flex-row justify-between">
<img
class="label_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8d9b1510cae8946e1251bb518347ad321d8ce71de7b15fe74d7322e00d291ac6"
/>
<span class="text_2">我的计划书</span>
<img
class="label_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng18c84189e37bc6cadf64cbf211b12bc413e557fbf9e640b22bf3ad042dd85ec4"
/>
</div>
<div class="box_2 flex-row">
<div class="image-text_1 flex-row justify-between">
<img
class="thumbnail_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbb008ef38dbea4061d893137cdb5d5e77bb053a7ec4082623fdb29b05872cd56"
/>
<span class="text-group_1">搜索计划书名称、客户姓名...</span>
</div>
</div>
<div class="box_3 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>
<div class="list_1 flex-col">
<div
class="list-items_1 flex-col"
v-for="(item, index) in loopData0"
:key="index"
>
<span class="text_6" v-html="item.lanhutext0"></span>
<div class="box_4 flex-row">
<span class="text_7" v-html="item.lanhutext1"></span>
<div v-if="item.slot2 === 2" class="text-wrapper_4 flex-col">
<span class="text_8">年金保险</span>
</div>
<div v-if="item.slot1 === 1" class="text-wrapper_5 flex-col">
<span class="text_9" v-html="item.specialSlot1.lanhutext0"></span>
</div>
</div>
<span class="text_10" v-html="item.lanhutext2"></span>
<img
class="image_2"
referrerpolicy="no-referrer"
:src="item.lanhuimage0"
/>
<div class="box_5 flex-row">
<img
class="thumbnail_2"
referrerpolicy="no-referrer"
:src="item.lanhuimage1"
/>
<span class="text_11" v-html="item.lanhutext3"></span>
<img
class="thumbnail_3"
referrerpolicy="no-referrer"
:src="item.lanhuimage2"
/>
<span class="text_12" v-html="item.lanhutext4"></span>
</div>
</div>
</div>
<div class="box_6 flex-col">
<img
class="image_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
/>
<div class="group_1 flex-row justify-between">
<div class="image-text_2 flex-col">
<img
class="label_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbd9205e4b62cd8bbf2ca836033731f8941362539da1b5092b7238c1d20a8b893"
/>
<span class="text-group_2">首页</span>
</div>
<div class="image-text_3 flex-col">
<img
class="label_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge3c905d9bf073c4382e089264cf3a9bbaa6d9f6e2b13ca001c973e0a0e99e546"
/>
<span class="text-group_3">AI答疑</span>
</div>
<div class="image-text_4 flex-col">
<img
class="label_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd682274e12d83204c6fe38541ed229be1287f4906b1649a2f43087e9a1663141"
/>
<span class="text-group_4">我的</span>
</div>
</div>
</div>
</div>
<img
class="image_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng830c4568c4d0141e1fa97f7fad1e075e2178ab08e5613734b08eaf46dcdd4207"
/>
</div>
</template>
<script>
export default {
data() {
return {
loopData0: [
{
lanhutext0: '家庭财富传承保障计划（分红）',
lanhutext1: '客户：李*生',
lanhutext2: '2024-03-15&nbsp;10:12',
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf546c69e1a7b33e53d1d0acd31c237f7b1c75a5bd856058be438277083ae4271',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb1045d06d33eade9ee01fe890c8c92fa7b58d8055a4e445ea358549bf67887a6',
lanhutext3: '查看',
lanhuimage2:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf99185314cb70d4f3b4aa60c2bd6be3938ac672fe6ed7e422916be0843954772',
lanhutext4: '删除',
specialSlot1: { lanhutext0: '年金保险' },
slot1: 1,
},
{
lanhutext0: '财富传承保障金融理财计划（分红）',
lanhutext1: '客户：孙*',
lanhutext2: '2024-03-14&nbsp;12:01',
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf546c69e1a7b33e53d1d0acd31c237f7b1c75a5bd856058be438277083ae4271',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb1045d06d33eade9ee01fe890c8c92fa7b58d8055a4e445ea358549bf67887a6',
lanhutext3: '查看',
lanhuimage2:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf99185314cb70d4f3b4aa60c2bd6be3938ac672fe6ed7e422916be0843954772',
lanhutext4: '删除',
slot2: 2,
},
{
lanhutext0: '企业高管年金计划',
lanhutext1: '客户：王*江',
lanhutext2: '2024-03-13&nbsp;9:23',
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf546c69e1a7b33e53d1d0acd31c237f7b1c75a5bd856058be438277083ae4271',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb1045d06d33eade9ee01fe890c8c92fa7b58d8055a4e445ea358549bf67887a6',
lanhutext3: '查看',
lanhuimage2:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf99185314cb70d4f3b4aa60c2bd6be3938ac672fe6ed7e422916be0843954772',
lanhutext4: '删除',
specialSlot1: { lanhutext0: '年金保险' },
slot1: 1,
},
{
lanhutext0: '家庭财富传承保障计划',
lanhutext1: '客户：李*生',
lanhutext2: '2024-03-12&nbsp;15:12',
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf546c69e1a7b33e53d1d0acd31c237f7b1c75a5bd856058be438277083ae4271',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb1045d06d33eade9ee01fe890c8c92fa7b58d8055a4e445ea358549bf67887a6',
lanhutext3: '查看',
lanhuimage2:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf99185314cb70d4f3b4aa60c2bd6be3938ac672fe6ed7e422916be0843954772',
lanhutext4: '删除',
specialSlot1: { lanhutext0: '年金保险' },
slot1: 1,
},
],
constants: {},
};
},
methods: {},
};
</script>
<style src="./common.css" />
<style src="./index.css" />
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 18:17:31
* @LastEditTime: 2026-01-29 22:47:02
* @FilePath: /manulife-weapp/src/app.config.js
* @Description: 小程序配置文件
*/
......@@ -12,6 +12,12 @@ const pages = [
'pages/family-office/index',
'pages/knowledge-base/index',
'pages/signing/index',
'pages/mine/index',
'pages/plan/index',
'pages/favorites/index',
'pages/avatar/index',
'pages/feedback/index',
'pages/login/index',
]
if (process.env.NODE_ENV === 'development') {
......
......@@ -11,5 +11,5 @@
@tailwind utilities;
:root {
--nut-primary-color: #A67939;
--nut-primary-color: #007AFF;
}
......
<!--
* @Date: 2026-01-29 21:30:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 23:14:24
* @FilePath: /manulife-weapp/src/components/IconFont.vue
* @Description: 图标字体组件
-->
<template>
<component :is="iconComponent" v-if="iconComponent" :size="size" :class="customClass" :color="color" />
</template>
......@@ -17,10 +24,13 @@ import {
Order,
PlayCircleFill,
RectRight,
RectLeft,
Search,
Service,
Star,
Top
Top,
Photograph,
Del
} from '@nutui/icons-vue-taro';
const props = defineProps({
......@@ -55,10 +65,13 @@ const icons = {
Order,
PlayCircleFill,
RectRight,
RectLeft,
Search,
Service,
Star,
Top
Top,
Photograph,
Del
};
const iconComponent = computed(() => {
......
......@@ -9,16 +9,36 @@
<!-- 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 class="fixed top-0 left-0 z-50 w-full h-[250rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] pt-[100rpx]">
<div class="relative w-full h-full flex items-center justify-center px-[32rpx]">
<div v-if="canGoBack" class="absolute left-[32rpx] flex items-center justify-center w-[60rpx] h-[60rpx]" @tap="goBack">
<IconFont name="RectLeft" size="18" color="#fff" />
</div>
<span class="text-white text-[35rpx] font-normal">{{ title }}</span>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import IconFont from '@/components/IconFont.vue'
defineProps({
title: {
type: String,
required: true
}
})
const canGoBack = ref(false)
onMounted(() => {
const pages = Taro.getCurrentPages()
canGoBack.value = pages.length > 1
})
const goBack = () => {
Taro.navigateBack()
}
</script>
......
......@@ -60,7 +60,7 @@ const tabs = shallowRef([
key: 'me',
label: '我的',
icon: 'My',
path: '/pages/me/index'
path: '/pages/mine/index'
}
])
......
/*
* @Date: 2026-01-29 22:24:28
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 22:54:30
* @FilePath: /manulife-weapp/src/pages/avatar/index.config.js
* @Description: 修改头像页面配置文件
*/
export default definePageConfig({
navigationBarTitleText: '修改头像',
navigationStyle: 'custom'
})
<!--
* @Date: 2026-01-29 22:25:57
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 22:54:41
* @FilePath: /manulife-weapp/src/pages/avatar/index.vue
* @Description: 修改头像页面
-->
<template>
<view class="min-h-screen bg-white flex flex-col">
<!-- NavHeader -->
<NavHeader title="修改头像" />
<!-- Main Content -->
<view class="flex-1 flex flex-col items-center pt-[120rpx]">
<view class="relative mb-[60rpx]" @tap="onChangeAvatar">
<nut-avatar size="large" class="!w-[240rpx] !h-[240rpx] shadow-lg border-4 border-gray-100">
<img :src="avatarUrl" />
</nut-avatar>
<view class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black/30 rounded-full p-[16rpx]">
<IconFont name="Photograph" color="#fff" size="24" />
</view>
</view>
<text class="text-gray-500 text-[32rpx] mb-[12rpx]">点击更换头像</text>
</view>
<!-- Footer Buttons -->
<view class="px-[40rpx] pb-[80rpx] w-full">
<view class="flex gap-[32rpx]">
<nut-button plain type="primary" block class="flex-1 !rounded-[48rpx]" @click="onCancel">取消</nut-button>
<nut-button type="primary" block class="flex-1 !rounded-[48rpx]" @click="onSave">保存</nut-button>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { useGo } from '@/hooks/useGo'
import IconFont from '@/components/IconFont.vue'
import NavHeader from '@/components/NavHeader.vue'
import Taro from '@tarojs/taro'
const go = useGo()
const avatarUrl = ref('https://picsum.photos/seed/user/200/200')
const onChangeAvatar = () => {
Taro.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
// tempFilePath can be used as image src
avatarUrl.value = res.tempFilePaths[0]
}
})
}
const onCancel = () => {
Taro.navigateBack()
}
const onSave = () => {
Taro.showLoading({ title: '保存中...' })
setTimeout(() => {
Taro.hideLoading()
Taro.showToast({ title: '保存成功', icon: 'success' })
setTimeout(() => {
Taro.navigateBack()
}, 1500)
}, 1000)
}
</script>
/*
* @Date: 2026-01-29 22:24:28
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 23:00:49
* @FilePath: /manulife-weapp/src/pages/favorites/index.config.js
* @Description: 我的收藏页面配置文件
*/
export default definePageConfig({
navigationBarTitleText: '我的收藏',
navigationStyle: 'custom'
})
<template>
<view class="min-h-screen bg-[#F9FAFB] pb-[200rpx] flex flex-col items-center">
<!-- Header -->
<NavHeader title="我的收藏" />
<!-- Tabs Section -->
<!-- Background image from design -->
<view
class="w-[706rpx] h-[144rpx] mt-[40rpx] bg-[url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga29210f2f5f94a789a5a08d5b75affd2f68da6108c1cf5328ce44da4ad92ee40')] bg-[length:100%_100%] bg-no-repeat flex items-center px-[32rpx]">
<div class="flex overflow-x-auto no-scrollbar space-x-[24rpx] w-full items-center">
<div v-for="(tab, index) in tabs" :key="index"
class="px-[32rpx] py-[16rpx] rounded-full text-[28rpx] whitespace-nowrap transition-colors"
:class="activeTab === tab.key ? 'bg-[#007AFF] text-white' : 'bg-transparent text-[#6B7280]'"
@click="activeTab = tab.key">
{{ tab.title }}
</div>
</div>
</view>
<!-- List Section -->
<view class="w-[706rpx] mt-[32rpx] flex flex-col gap-[24rpx]">
<view v-for="(item, index) in filteredList" :key="index"
class="bg-white rounded-[24rpx] p-[32rpx] shadow-sm flex items-center justify-between" @tap="onView(item)">
<view class="flex items-center flex-1 mr-[24rpx]">
<!-- Icon (Text Type Icons as requested) -->
<view class="w-[80rpx] h-[80rpx] rounded-[16rpx] flex items-center justify-center mr-[24rpx]"
:class="item.iconBgClass">
<IconFont :name="item.icon" size="24" :color="item.iconColor" />
</view>
<!-- Text Content -->
<view class="flex flex-col flex-1">
<view class="text-[32rpx] text-[#1F2937] font-bold mb-[8rpx] line-clamp-1">{{ item.title }}</view>
<view class="flex flex-col items-start gap-[8rpx]">
<view class="bg-gray-100 px-[12rpx] py-[4rpx] rounded-[8rpx] text-[24rpx] text-[#9CA3AF] mt-1">{{ item.category
}}</view>
<view class="text-[24rpx] text-gray-400 mt-2">{{ item.date }}</view>
</view>
</view>
</view>
<!-- Delete Button -->
<view class="p-[10rpx]" @tap.stop="onDelete(item)">
<IconFont name="Del" size="18" color="#999" />
</view>
</view>
<!-- Empty State -->
<view v-if="filteredList.length === 0"
class="flex flex-col items-center justify-center py-[100rpx] text-gray-400">
<IconFont name="Star" size="48" class="mb-[24rpx] opacity-50" />
<text class="text-[28rpx]">暂无收藏内容</text>
</view>
</view>
<!-- TabBar -->
<TabBar current="me" />
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useGo } from '@/hooks/useGo'
import IconFont from '@/components/IconFont.vue'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import Taro from '@tarojs/taro'
const go = useGo()
const activeTab = ref('all')
const tabs = [
{ title: '全部', key: 'all' },
{ title: '入职培训', key: 'onboarding' },
{ title: '签单相关', key: 'signing' },
{ title: '产品知识', key: 'product' }
]
const list = ref([
{
id: 1,
title: '新员工入职培训手册.pdf',
category: '入职培训',
date: '2024-01-15',
type: 'onboarding',
icon: 'Order', // Represents a document
iconColor: '#EF4444', // Red for PDF
iconBgClass: 'bg-red-50'
},
{
id: 2,
title: '保险产品销售话术.docx',
category: '签单相关',
date: '2024-01-14',
type: 'signing',
icon: 'Order', // Represents a document
iconColor: '#2563EB', // Blue for Word
iconBgClass: 'bg-blue-50'
},
{
id: 3,
title: '重疾险产品知识详解.pptx',
category: '产品知识',
date: '2024-01-13',
type: 'product',
icon: 'Order', // Represents a document
iconColor: '#F59E0B', // Orange for PPT
iconBgClass: 'bg-orange-50'
},
{
id: 4,
title: '2024年最新保险政策解读.txt',
category: '政策解读',
date: '2024-01-12',
type: 'other',
icon: 'Edit', // Represents text
iconColor: '#10B981', // Green for TXT
iconBgClass: 'bg-green-50'
}
])
const filteredList = computed(() => {
if (activeTab.value === 'all') return list.value
return list.value.filter(item => item.type === activeTab.value)
})
const onView = (item) => {
Taro.showToast({ title: `打开: ${item.title}`, icon: 'none' })
}
const onDelete = (item) => {
Taro.showModal({
title: '提示',
content: '确定要删除该收藏吗？',
success: (res) => {
if (res.confirm) {
list.value = list.value.filter(i => i.id !== item.id)
Taro.showToast({ title: '已删除', icon: 'success' })
}
}
})
}
</script>
<style lang="less">
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
/*
* @Date: 2026-01-29 22:24:28
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 22:24:29
* @FilePath: /manulife-weapp/src/pages/feedback/index.config.js
* @Description: 意见反馈页面配置文件
*/
export default definePageConfig({
navigationBarTitleText: '意见反馈',
navigationStyle: 'custom'
})
<!--
* @Date: 2026-01-29 22:26:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 23:09:44
* @FilePath: /manulife-weapp/src/pages/feedback/index.vue
* @Description: 文件描述
-->
<template>
<view class="min-h-screen bg-gray-50 pb-[200rpx]">
<NavHeader title="反馈问题" />
<view class="p-[32rpx]">
<!-- Feedback Type -->
<view class="bg-white rounded-[24rpx] p-[32rpx] mb-[24rpx] shadow-sm">
<view class="text-[30rpx] font-bold text-gray-900 mb-[24rpx]">反馈类型</view>
<view class="flex flex-wrap gap-[24rpx]">
<view
v-for="type in types"
:key="type.value"
class="px-[32rpx] py-[16rpx] rounded-full text-[26rpx] transition-colors"
:class="selectedType === type.value ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600'"
@tap="selectedType = type.value"
>
{{ type.label }}
</view>
</view>
</view>
<!-- Description -->
<view class="bg-white rounded-[24rpx] p-[32rpx] mb-[24rpx] shadow-sm">
<view class="text-[30rpx] font-bold text-gray-900 mb-[24rpx]">问题描述</view>
<view class="border border-[#E5E7EB] rounded-[16rpx] overflow-hidden">
<nut-textarea
v-model="description"
placeholder="请详细描述您遇到的问题或建议..."
:rows="4"
limit-show
max-length="200"
class="!p-[24rpx] !text-[28rpx] !border-none w-full"
/>
</view>
</view>
<!-- Screenshots -->
<view class="bg-white rounded-[24rpx] p-[32rpx] mb-[40rpx] shadow-sm">
<view class="text-[30rpx] font-bold text-gray-900 mb-[24rpx]">添加截图（可选）</view>
<nut-uploader
url="https://xxx"
v-model:file-list="fileList"
maximum="3"
>
</nut-uploader>
</view>
<!-- Submit Button -->
<nut-button type="primary" block class="!h-[88rpx] !rounded-[44rpx] !text-[32rpx]" @click="onSubmit">提交反馈</nut-button>
</view>
<!-- TabBar -->
<TabBar current="me" />
</view>
</template>
<script setup>
import { ref } from 'vue'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import Taro from '@tarojs/taro'
const selectedType = ref('suggestion')
const description = ref('')
const fileList = ref([])
const types = [
{ label: '功能建议', value: 'suggestion' },
{ label: '问题反馈', value: 'issue' },
{ label: '其他', value: 'other' }
]
const onSubmit = () => {
if (!description.value) {
Taro.showToast({ title: '请输入问题描述', icon: 'none' })
return
}
Taro.showLoading({ title: '提交中...' })
// Simulate API call
setTimeout(() => {
Taro.hideLoading()
Taro.showToast({ title: '提交成功', icon: 'success' })
// Reset form
description.value = ''
fileList.value = []
selectedType.value = 'suggestion'
// Navigate back or stay
setTimeout(() => {
Taro.navigateBack()
}, 1500)
}, 1000)
}
</script>
<template>
<view class="min-h-screen bg-white flex flex-col">
<!-- Header -->
<NavHeader title="登录" :show-back="true" />
<view class="flex-1 flex flex-col px-[48rpx] pt-[80rpx]">
<!-- Logo/Title -->
<view class="mb-[80rpx]">
<view class="text-[48rpx] font-bold text-gray-900 mb-[16rpx]">欢迎登录</view>
<view class="text-[28rpx] text-gray-500">Manulife 宏利</view>
</view>
<!-- Form -->
<view class="space-y-[48rpx]">
<!-- Username -->
<view class="border-b border-gray-200 pb-[16rpx]">
<view class="text-[28rpx] text-gray-900 font-medium mb-[16rpx]">账号</view>
<input
v-model="form.username"
type="text"
placeholder="请输入账号"
placeholder-class="text-gray-300"
class="w-full text-[32rpx] text-gray-900 h-[80rpx]"
/>
</view>
<!-- Password -->
<view class="border-b border-gray-200 pb-[16rpx]">
<view class="text-[28rpx] text-gray-900 font-medium mb-[16rpx]">密码</view>
<input
v-model="form.password"
type="password"
placeholder="请输入密码"
placeholder-class="text-gray-300"
class="w-full text-[32rpx] text-gray-900 h-[80rpx]"
/>
</view>
</view>
<!-- Actions -->
<view class="mt-[80rpx]">
<button
class="w-full h-[96rpx] bg-[#2563EB] rounded-[48rpx] flex items-center justify-center text-white text-[32rpx] font-bold active:opacity-90 after:border-none"
@tap="handleLogin"
>
登录
</button>
</view>
<!-- Links -->
<view class="mt-[48rpx] flex justify-between text-[28rpx]">
<view class="text-gray-500" @tap="handleForgotPassword">忘记密码</view>
<view class="text-[#2563EB]" @tap="handleRegister">立即注册</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive } from 'vue'
import Taro from '@tarojs/taro'
import { useGo } from '@/hooks/useGo'
import NavHeader from '@/components/NavHeader.vue'
const go = useGo()
const form = reactive({
username: '',
password: ''
})
/**
* Handle login action
*/
const handleLogin = () => {
if (!form.username) {
Taro.showToast({ title: '请输入账号', icon: 'none' })
return
}
if (!form.password) {
Taro.showToast({ title: '请输入密码', icon: 'none' })
return
}
// Mock login success
Taro.showLoading({ title: '登录中...' })
setTimeout(() => {
Taro.hideLoading()
Taro.showToast({ title: '登录成功', icon: 'success' })
setTimeout(() => {
// Redirect to home or previous page
Taro.reLaunch({ url: '/pages/index/index' })
}, 1500)
}, 1000)
}
const handleForgotPassword = () => {
Taro.showToast({ title: '功能开发中', icon: 'none' })
}
const handleRegister = () => {
Taro.showToast({ title: '功能开发中', icon: 'none' })
}
</script>
<style lang="less">
/* Reset button default styles if needed */
button::after {
border: none;
}
</style>
/*
* @Date: 2026-01-29 22:24:28
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 22:53:14
* @FilePath: /manulife-weapp/src/pages/mine/index.config.js
* @Description: 我的页面配置文件
*/
export default definePageConfig({
navigationBarTitleText: '我的',
navigationStyle: 'custom'
})
<template>
<view class="min-h-screen bg-[#F9FAFB] pb-[200rpx] flex flex-col items-center">
<!-- Header -->
<NavHeader title="我的" />
<!-- User Info Card -->
<!-- Width: 353px -> 706rpx, Height: 124px -> 248rpx -->
<!-- Background image from design -->
<view
class="w-[706rpx] h-[248rpx] mt-[40rpx] bg-[url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPng19a28c052635ccb70614c5be60713a4731e85f98029d396460b46bb31e6a529f')] bg-[length:100%_100%] bg-no-repeat flex items-center px-[40rpx]"
@tap="go('/pages/avatar/index')"
>
<!-- Avatar -->
<view class="w-[160rpx] h-[160rpx] rounded-full overflow-hidden border-2 border-white shadow-sm shrink-0">
<img class="w-full h-full object-cover" src="https://picsum.photos/seed/user/200/200" />
</view>
<!-- Info -->
<view class="ml-[32rpx] flex-1 flex flex-col justify-center">
<text class="text-[36rpx] font-bold text-gray-800 mb-[8rpx]">张三</text>
<text class="text-[28rpx] text-gray-500 mb-[4rpx]">工号: EMP2026001</text>
<text class="text-[24rpx] text-gray-400">点击修改头像</text>
</view>
<!-- Arrow -->
<IconFont name="RectRight" size="20" color="#9CA3AF" />
</view>
<!-- Menu List -->
<!-- Width: 353px -> 706rpx, Radius: 12px -> 24rpx, Padding: 16px -> 32rpx -->
<view class="w-[706rpx] bg-white rounded-[24rpx] p-[32rpx] mt-[32rpx]">
<view
v-for="(item, index) in menuItems"
:key="index"
class="flex flex-col"
@tap="handleMenuClick(item)"
>
<view class="flex items-center justify-between py-[24rpx]">
<view class="flex items-center">
<!-- Icon Size: 40px -> 80rpx. Using IconFont to match request, centered in a box if needed, or just large icon -->
<!-- Design had 40px images. I'll use 32px (64rpx) IconFont for balance or 40px if needed. -->
<view class="w-[80rpx] h-[80rpx] bg-blue-50 rounded-[16rpx] flex items-center justify-center mr-[24rpx]">
<IconFont :name="item.icon" size="24" color="#2563EB" />
</view>
<text class="text-[32rpx] text-gray-800">{{ item.title }}</text>
</view>
<IconFont name="RectRight" size="16" color="#9CA3AF" />
</view>
<!-- Separator -->
<view v-if="index < menuItems.length - 1" class="h-[2rpx] bg-gray-100 w-full"></view>
</view>
</view>
<!-- TabBar -->
<TabBar current="me" />
</view>
</template>
<script setup>
import { useGo } from '@/hooks/useGo'
import IconFont from '@/components/IconFont.vue'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import Taro from '@tarojs/taro'
const go = useGo()
const menuItems = [
{ title: '我的计划书', icon: 'Order', path: '/pages/plan/index' },
{ title: '我的收藏', icon: 'Star', path: '/pages/favorites/index' },
{ title: '帮助中心', icon: 'Service', action: 'toast' },
{ title: '意见反馈', icon: 'Edit', path: '/pages/feedback/index' }
]
const handleMenuClick = (item) => {
if (item.path) {
go(item.path)
} else if (item.action === 'toast') {
Taro.showToast({
title: '功能开发中',
icon: 'none'
})
}
}
</script>
<style lang="less">
/* No custom CSS needed, all Tailwind */
</style>
/*
* @Date: 2026-01-29 22:24:28
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 22:54:03
* @FilePath: /manulife-weapp/src/pages/plan/index.config.js
* @Description: 我的计划书页面配置文件
*/
export default definePageConfig({
navigationBarTitleText: '我的计划书',
navigationStyle: 'custom'
})
<template>
<view class="min-h-screen bg-gray-50 pb-[200rpx]">
<!-- Navigation Header -->
<NavHeader title="我的计划书" />
<!-- Search Bar -->
<view class="bg-white px-[24rpx] py-[16rpx]">
<nut-searchbar v-model="searchValue" placeholder="搜索计划书名称、客户姓名..." @search="onSearch" clearable>
<template #left-in>
<IconFont name="Search" size="14" />
</template>
</nut-searchbar>
</view>
<!-- Tabs -->
<view class="bg-white mt-[2rpx] px-[24rpx] py-[20rpx]">
<div class="flex overflow-x-auto no-scrollbar space-x-[24rpx]">
<div v-for="(tab, index) in tabs" :key="index"
class="px-[32rpx] py-[16rpx] rounded-full text-[28rpx] whitespace-nowrap transition-colors"
:class="activeTab === index ? 'bg-[#2563EB] text-white' : 'bg-[#F3F4F6] text-[#6B7280]'"
@click="activeTab = index">
{{ tab.title }}
</div>
</div>
</view>
<!-- Plan List -->
<view class="px-[24rpx] py-[24rpx]">
<view v-for="(item, index) in filteredList" :key="index"
class="bg-white rounded-[24rpx] p-[24rpx] mb-[24rpx] shadow-sm">
<!-- Header -->
<view class="flex justify-between items-start mb-[16rpx]">
<view class="flex-1">
<view class="text-[30rpx] font-bold text-gray-900 leading-normal mb-[8rpx]">{{ item.title }}</view>
<view class="flex items-center gap-[12rpx]">
<view class="bg-blue-50 text-blue-600 text-[22rpx] px-[12rpx] py-[4rpx] rounded-[8rpx]" v-if="item.tag">
{{ item.tag }}
</view>
</view>
</view>
<view class="ml-[24rpx]">
<!-- Status Badge or Icon could go here -->
</view>
</view>
<!-- Info -->
<view class="flex justify-between items-center text-gray-500 text-[24rpx] mb-[24rpx]">
<text>{{ item.client }}</text>
<text>{{ item.date }}</text>
</view>
<!-- Divider -->
<view class="h-[1rpx] bg-gray-100 my-[20rpx]"></view>
<!-- Actions -->
<view class="flex justify-end gap-[24rpx]">
<view class="flex items-center text-gray-500" @tap="onDelete(item)">
<IconFont name="Del" size="14" class="mr-[8rpx]" />
<text class="text-[24rpx]">删除</text>
</view>
<view class="flex items-center text-blue-600" @tap="onView(item)">
<IconFont name="Order" size="14" class="mr-[8rpx]" />
<text class="text-[24rpx]">查看</text>
</view>
</view>
</view>
<!-- Empty State -->
<view v-if="filteredList.length === 0"
class="flex flex-col items-center justify-center py-[100rpx] text-gray-400">
<IconFont name="Order" size="48" class="mb-[24rpx] opacity-50" />
<text class="text-[28rpx]">暂无相关计划书</text>
</view>
</view>
<!-- TabBar -->
<TabBar current="" />
<!-- Note: Design shows Home/AI/Mine. It doesn't highlight 'Plan'.
Since Plan is a feature, maybe it shouldn't show TabBar or should show 'Mine' as active if accessed from Mine.
I'll set current to 'me' if it's considered part of Mine module, or just leave it.
The design code footer has "首页, AI答疑, 我的".
I will use 'me' as active since it was accessed from 'Mine'. -->
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useGo } from '@/hooks/useGo'
import IconFont from '@/components/IconFont.vue'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import Taro from '@tarojs/taro'
const go = useGo()
const searchValue = ref('')
const activeTab = ref(0)
const tabs = [
{ title: '全部', key: 'all' },
{ title: '生成中', key: 'processing' },
{ title: '已生成', key: 'generated' }
]
const list = ref([
{
id: 1,
title: '家庭财富传承保障计划（分红）',
client: '客户：李*生',
date: '2024-03-15 10:12',
tag: '年金保险',
status: 'generated'
},
{
id: 2,
title: '财富传承保障金融理财计划（分红）',
client: '客户：孙*',
date: '2024-03-14 12:01',
tag: '',
status: 'processing'
},
{
id: 3,
title: '企业高管年金计划',
client: '客户：王*江',
date: '2024-03-13 09:23',
tag: '年金保险',
status: 'generated'
},
{
id: 4,
title: '家庭财富传承保障计划',
client: '客户：李*生',
date: '2024-03-12 15:12',
tag: '年金保险',
status: 'generated'
}
])
const filteredList = computed(() => {
let result = list.value
// Filter by Tab
const currentKey = tabs[activeTab.value].key
if (currentKey !== 'all') {
result = result.filter(item => item.status === currentKey)
}
// Filter by Search
if (searchValue.value) {
const key = searchValue.value.toLowerCase()
result = result.filter(item =>
item.title.toLowerCase().includes(key) ||
item.client.toLowerCase().includes(key)
)
}
return result
})
const onSearch = (val) => {
console.log('Search:', val)
}
const onView = (item) => {
Taro.showToast({ title: `查看: ${item.title}`, icon: 'none' })
}
const onDelete = (item) => {
Taro.showModal({
title: '提示',
content: '确定要删除该计划书吗？',
success: (res) => {
if (res.confirm) {
list.value = list.value.filter(i => i.id !== item.id)
Taro.showToast({ title: '已删除', icon: 'success' })
}
}
})
}
</script>