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