Hooke / manulife-weapp

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

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

- 新增 `pages/family-office/index` 页面，实现家庭成员、健康档案、资产管理、生活服务四大功能板块
- 创建通用导航头组件 `NavHeader`，统一页面顶部样式并优化滚动体验
- 封装图标组件 `IconFont`，简化 NutUI 图标使用并消除 Vue 3 响应式警告
- 重构入职相关、签单相关、首页页面，使用新组件替代硬编码头部结构
- 将静态数据源从 `ref` 升级为 `shallowRef` 以提升性能
- 更新路由配置和组件类型声明
Inline Side-by-side
Showing 15 changed files with 1159 additions and 164 deletions
...@@ -7,7 +7,9 @@ export {} ...@@ -7,7 +7,9 @@ export {}
7 7
8 declare module 'vue' { 8 declare module 'vue' {
9 export interface GlobalComponents { 9 export interface GlobalComponents {
10 + IconFont: typeof import('./src/components/IconFont.vue')['default']
10 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']
11 NutButton: typeof import('@nutui/nutui-taro')['Button'] 13 NutButton: typeof import('@nutui/nutui-taro')['Button']
12 Picker: typeof import('./src/components/time-picker-data/picker.vue')['default'] 14 Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
13 PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default'] 15 PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
......
...@@ -4,7 +4,17 @@ All notable changes to this project will be documented in this file. ...@@ -4,7 +4,17 @@ All notable changes to this project will be documented in this file.
4 4
5 ## [Unreleased] 5 ## [Unreleased]
6 6
7 +### Fixed
8 +- 修复 Vue 3 响应式组件警告：将包含 NutUI 图标组件的静态数据源从 `ref` 升级为 `shallowRef`，并结合 `markRaw` 使用。彻底消除了 "Component that was made a reactive object" 警告，避免了 Vue 对组件对象进行不必要的深度代理，显著提升了页面初始化和渲染性能。涉及首页、TabBar、入职相关、签单相关及家办相关所有页面。
9 +- 优化 `NavHeader` 组件交互体验，将页面头部固定在顶部 (`fixed`)，并内置等高占位元素防止内容遮挡，提升滚动时的用户体验。
10 +- 重构图标使用方式：创建 `src/components/IconFont.vue` 组件封装 NutUI 图标库，支持通过字符串 `name` 属性配置图标，彻底移除 `markRaw` 逻辑，简化代码结构并符合用户偏好，同时保留了 SVG 图标的高清与高性能特性。
11 +
7 ### Added 12 ### Added
13 +- 创建通用导航头组件 `src/components/NavHeader.vue`，统一页面头部样式
14 +- 重构 "入职相关"、"签单相关"、"家办相关" 页面，使用 `NavHeader` 组件替代硬编码的头部结构
15 +- 新增 "家办相关" 页面 (`src/pages/family-office`)，复用 "入职相关" 页面布局与样式
16 +- 规划并实现家庭成员、健康档案、资产管理、生活服务四大功能板块
17 +- 注册新页面路由至 `src/app.config.js`
8 - 初始化项目 Git 仓库 18 - 初始化项目 Git 仓库
9 - 创建 .gitignore 配置文件 19 - 创建 .gitignore 配置文件
10 - 创建并切换到 develop 分支 20 - 创建并切换到 develop 分支
......
1 +.page {
2 + background-color: rgba(255, 255, 255, 1);
3 + position: relative;
4 + width: 393px;
5 + height: 1095px;
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: 20px;
29 +}
30 +
31 +.group_2 {
32 + width: 393px;
33 + background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5ae87c5e9a86a0d640e93f4a87e612d1c4e6c25e22d3f2600417bdc2e27b7b31)
34 + 100% no-repeat;
35 + background-size: 100% 100%;
36 + padding: 20px 153px 20px 20px;
37 +}
38 +
39 +.thumbnail_1 {
40 + width: 20px;
41 + height: 20px;
42 + margin: 6px 0 7px 0;
43 +}
44 +
45 +.text_2 {
46 + overflow-wrap: break-word;
47 + color: rgba(255, 255, 255, 1);
48 + font-size: 22px;
49 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
50 + font-weight: normal;
51 + text-align: center;
52 + white-space: nowrap;
53 + line-height: 33px;
54 +}
55 +
56 +.group_3 {
57 + background-color: rgba(249, 250, 251, 1);
58 +}
59 +
60 +.group_4 {
61 + background-color: rgba(255, 255, 255, 1);
62 + padding: 16px 0 16px 20px;
63 +}
64 +
65 +.group_5 {
66 + width: 373px;
67 +}
68 +
69 +.text-wrapper_1 {
70 + background-color: rgba(37, 99, 235, 1);
71 + border-radius: 9999px;
72 + padding: 8px 16px 8px 16px;
73 +}
74 +
75 +.text_3 {
76 + overflow-wrap: break-word;
77 + color: rgba(255, 255, 255, 1);
78 + font-size: 14px;
79 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
80 + font-weight: normal;
81 + text-align: left;
82 + white-space: nowrap;
83 + line-height: 20px;
84 +}
85 +
86 +.text-wrapper_2 {
87 + background-color: rgba(243, 244, 246, 1);
88 + border-radius: 9999px;
89 + padding: 8px 16px 8px 16px;
90 +}
91 +
92 +.text_4 {
93 + overflow-wrap: break-word;
94 + color: rgba(107, 114, 128, 1);
95 + font-size: 14px;
96 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
97 + font-weight: normal;
98 + text-align: left;
99 + white-space: nowrap;
100 + line-height: 20px;
101 +}
102 +
103 +.text-wrapper_3 {
104 + background-color: rgba(243, 244, 246, 1);
105 + border-radius: 9999px;
106 + padding: 8px 16px 8px 16px;
107 +}
108 +
109 +.text_5 {
110 + overflow-wrap: break-word;
111 + color: rgba(107, 114, 128, 1);
112 + font-size: 14px;
113 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
114 + font-weight: normal;
115 + text-align: left;
116 + white-space: nowrap;
117 + line-height: 20px;
118 +}
119 +
120 +.text-wrapper_4 {
121 + background-color: rgba(243, 244, 246, 1);
122 + border-radius: 9999px;
123 + padding: 8px 1px 8px 16px;
124 +}
125 +
126 +.text_6 {
127 + overflow-wrap: break-word;
128 + color: rgba(107, 114, 128, 1);
129 + font-size: 14px;
130 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
131 + font-weight: normal;
132 + text-align: left;
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: 20px 309px 0 20px;
147 +}
148 +
149 +.grid_1 {
150 + width: 352px;
151 + height: 588px;
152 + flex-wrap: wrap;
153 + margin: 12px 21px 0 20px;
154 +}
155 +
156 +.box_1 {
157 + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
158 + background-color: rgba(255, 255, 255, 1);
159 + border-radius: 12px;
160 + width: 170px;
161 + height: 188px;
162 + padding-bottom: 9px;
163 + margin: 0 12px 12px 0;
164 +}
165 +
166 +.box_1:nth-child(2n) {
167 + margin-right: 0;
168 +}
169 +.box_1:nth-last-child(-n + 2) {
170 + margin-bottom: 0;
171 +}
172 +
173 +.image-text_1 {
174 +}
175 +
176 +.box_2 {
177 + background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd07aa626fa67c2e61c16fa94a014fdbb0e20a2febdbd78fb0e488e7c846003f2)
178 + 0px 0px no-repeat;
179 + background-size: 171px 120px;
180 + padding: 8px 8px 92px 122px;
181 +}
182 +
183 +.text-wrapper_5 {
184 + background-color: rgba(239, 68, 68, 1);
185 + border-radius: 9999px;
186 + padding: 2px 8px 2px 8px;
187 +}
188 +
189 +.text_8 {
190 + overflow-wrap: break-word;
191 + color: rgba(255, 255, 255, 1);
192 + font-size: 12px;
193 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
194 + font-weight: normal;
195 + text-align: left;
196 + white-space: nowrap;
197 + line-height: 16px;
198 +}
199 +
200 +.text-group_1 {
201 + overflow-wrap: break-word;
202 + color: rgba(31, 41, 55, 1);
203 + font-size: 14px;
204 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
205 + font-weight: normal;
206 + text-align: left;
207 + white-space: nowrap;
208 + line-height: 20px;
209 + margin: 12px 60px 0 12px;
210 +}
211 +
212 +.text-wrapper_6 {
213 + background-color: rgba(254, 215, 170, 1);
214 + border-radius: 4px;
215 + margin: 5px 102px 0 12px;
216 + padding: 3px 8px 6px 8px;
217 +}
218 +
219 +.text_9 {
220 + overflow-wrap: break-word;
221 + color: rgba(234, 88, 12, 1);
222 + font-size: 11px;
223 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
224 + font-weight: normal;
225 + text-align: left;
226 + white-space: nowrap;
227 + line-height: 13px;
228 +}
229 +
230 +.box_3 {
231 + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
232 + border-radius: 12px;
233 + background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/18d82db9fb8a475c983f0ddcd678a1bc_mergeImage.png);
234 + width: 170px;
235 + height: 188px;
236 + margin-bottom: 12px;
237 + padding: 132px 46px 12px 12px;
238 +}
239 +
240 +.text_10 {
241 + overflow-wrap: break-word;
242 + color: rgba(31, 41, 55, 1);
243 + font-size: 14px;
244 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
245 + font-weight: normal;
246 + text-align: left;
247 + white-space: nowrap;
248 + line-height: 20px;
249 +}
250 +
251 +.block_1 {
252 + width: 91px;
253 + margin: 8px 21px 0 0;
254 +}
255 +
256 +.thumbnail_2 {
257 + width: 12px;
258 + height: 11px;
259 + margin: 3px 0 2px 0;
260 +}
261 +
262 +.group_6 {
263 +}
264 +
265 +.text-wrapper_7 {
266 + background-color: rgba(254, 226, 226, 1);
267 + border-radius: 4px;
268 + height: 22px;
269 + margin: -3px 0 -3px 0;
270 + padding: 3px 8px 3px 8px;
271 +}
272 +
273 +.text_11 {
274 + height: 16px;
275 + overflow-wrap: break-word;
276 + color: rgba(220, 38, 38, 1);
277 + font-size: 11px;
278 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
279 + font-weight: normal;
280 + text-align: left;
281 + white-space: nowrap;
282 + line-height: 13px;
283 +}
284 +
285 +.box_4 {
286 + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
287 + border-radius: 12px;
288 + background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/280fe0a821364cef80b424fef89b48f3_mergeImage.png);
289 + width: 170px;
290 + height: 188px;
291 + margin: 0 12px 12px 0;
292 + padding: 132px 46px 12px 12px;
293 +}
294 +
295 +.text_12 {
296 + overflow-wrap: break-word;
297 + color: rgba(31, 41, 55, 1);
298 + font-size: 14px;
299 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
300 + font-weight: normal;
301 + text-align: left;
302 + white-space: nowrap;
303 + line-height: 20px;
304 +}
305 +
306 +.box_5 {
307 + width: 98px;
308 + margin: 8px 14px 0 0;
309 +}
310 +
311 +.thumbnail_3 {
312 + width: 12px;
313 + height: 11px;
314 + margin: 3px 0 2px 0;
315 +}
316 +
317 +.box_6 {
318 +}
319 +
320 +.text-wrapper_8 {
321 + background-color: rgba(209, 250, 229, 1);
322 + border-radius: 4px;
323 + padding: 0 8px 3px 8px;
324 +}
325 +
326 +.text_13 {
327 + overflow-wrap: break-word;
328 + color: rgba(5, 150, 105, 1);
329 + font-size: 11px;
330 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
331 + font-weight: normal;
332 + text-align: left;
333 + white-space: nowrap;
334 + line-height: 13px;
335 +}
336 +
337 +.box_7 {
338 + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
339 + background-color: rgba(255, 255, 255, 1);
340 + border-radius: 12px;
341 + width: 170px;
342 + height: 188px;
343 + margin-bottom: 12px;
344 + padding-bottom: 12px;
345 +}
346 +
347 +.image-text_2 {
348 +}
349 +
350 +.box_8 {
351 + background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPngfa51ba266ee7b2cd5418dd11fdb68714e5373b6a77ee09e54067b0d2be401f70)
352 + 0px 0px no-repeat;
353 + background-size: 171px 120px;
354 + padding: 8px 7px 92px 123px;
355 +}
356 +
357 +.text-wrapper_9 {
358 + background-color: rgba(239, 68, 68, 1);
359 + border-radius: 9999px;
360 + padding: 2px 8px 2px 8px;
361 +}
362 +
363 +.text_14 {
364 + overflow-wrap: break-word;
365 + color: rgba(255, 255, 255, 1);
366 + font-size: 12px;
367 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
368 + font-weight: normal;
369 + text-align: left;
370 + white-space: nowrap;
371 + line-height: 16px;
372 +}
373 +
374 +.text-group_2 {
375 + overflow-wrap: break-word;
376 + color: rgba(31, 41, 55, 1);
377 + font-size: 14px;
378 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
379 + font-weight: normal;
380 + text-align: left;
381 + white-space: nowrap;
382 + line-height: 20px;
383 + margin: 12px 60px 0 12px;
384 +}
385 +
386 +.box_9 {
387 + width: 98px;
388 + margin: 8px 60px 0 12px;
389 +}
390 +
391 +.thumbnail_4 {
392 + width: 12px;
393 + height: 11px;
394 + margin: 3px 0 2px 0;
395 +}
396 +
397 +.block_2 {
398 +}
399 +
400 +.text-wrapper_10 {
401 + background-color: rgba(209, 250, 229, 1);
402 + border-radius: 4px;
403 + height: 22px;
404 + margin: -3px 0 -3px 0;
405 + padding: 3px 8px 6px 8px;
406 +}
407 +
408 +.text_15 {
409 + overflow-wrap: break-word;
410 + color: rgba(5, 150, 105, 1);
411 + font-size: 11px;
412 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
413 + font-weight: normal;
414 + text-align: left;
415 + white-space: nowrap;
416 + line-height: 13px;
417 +}
418 +
419 +.box_10 {
420 + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
421 + border-radius: 12px;
422 + background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/42d39ba34e294a4ea49ea709b7ba52f2_mergeImage.png);
423 + width: 170px;
424 + height: 188px;
425 + margin: 0 12px 12px 0;
426 + padding: 132px 67px 12px 12px;
427 +}
428 +
429 +.text_16 {
430 + overflow-wrap: break-word;
431 + color: rgba(31, 41, 55, 1);
432 + font-size: 14px;
433 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
434 + font-weight: normal;
435 + text-align: left;
436 + white-space: nowrap;
437 + line-height: 20px;
438 + margin-right: 7px;
439 +}
440 +
441 +.group_7 {
442 + width: 91px;
443 + margin-top: 8px;
444 +}
445 +
446 +.thumbnail_5 {
447 + width: 12px;
448 + height: 11px;
449 + margin: 3px 0 2px 0;
450 +}
451 +
452 +.group_8 {
453 +}
454 +
455 +.text-wrapper_11 {
456 + background-color: rgba(254, 226, 226, 1);
457 + border-radius: 4px;
458 + padding: 0 8px 0 8px;
459 +}
460 +
461 +.text_17 {
462 + height: 16px;
463 + overflow-wrap: break-word;
464 + color: rgba(220, 38, 38, 1);
465 + font-size: 11px;
466 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
467 + font-weight: normal;
468 + text-align: left;
469 + white-space: nowrap;
470 + line-height: 13px;
471 +}
472 +
473 +.box_11 {
474 + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
475 + background-color: rgba(255, 255, 255, 1);
476 + border-radius: 12px;
477 + width: 170px;
478 + height: 188px;
479 + margin-bottom: 12px;
480 + padding-bottom: 12px;
481 +}
482 +
483 +.image-text_3 {
484 +}
485 +
486 +.box_12 {
487 + background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9be3d8532fd60ac0aaf127c5bed835ee6566cfc3febc15bbdc4abdb73a532cd3)
488 + 0px 0px no-repeat;
489 + background-size: 171px 120px;
490 + padding: 8px 7px 92px 123px;
491 +}
492 +
493 +.text-wrapper_12 {
494 + background-color: rgba(239, 68, 68, 1);
495 + border-radius: 9999px;
496 + padding: 2px 8px 2px 8px;
497 +}
498 +
499 +.text_18 {
500 + overflow-wrap: break-word;
501 + color: rgba(255, 255, 255, 1);
502 + font-size: 12px;
503 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
504 + font-weight: normal;
505 + text-align: left;
506 + white-space: nowrap;
507 + line-height: 16px;
508 +}
509 +
510 +.text-group_3 {
511 + overflow-wrap: break-word;
512 + color: rgba(31, 41, 55, 1);
513 + font-size: 14px;
514 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
515 + font-weight: normal;
516 + text-align: left;
517 + white-space: nowrap;
518 + line-height: 20px;
519 + margin: 12px 60px 0 12px;
520 +}
521 +
522 +.group_9 {
523 + width: 76px;
524 + margin: 8px 82px 0 12px;
525 +}
526 +
527 +.thumbnail_6 {
528 + width: 12px;
529 + height: 11px;
530 + margin: 3px 0 2px 0;
531 +}
532 +
533 +.group_10 {
534 +}
535 +
536 +.text-wrapper_13 {
537 + background-color: rgba(209, 250, 229, 1);
538 + border-radius: 4px;
539 + height: 22px;
540 + margin: -3px 0 -3px 0;
541 + padding: 3px 8px 6px 8px;
542 +}
543 +
544 +.text_19 {
545 + overflow-wrap: break-word;
546 + color: rgba(5, 150, 105, 1);
547 + font-size: 11px;
548 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
549 + font-weight: normal;
550 + text-align: left;
551 + white-space: nowrap;
552 + line-height: 13px;
553 +}
554 +
555 +.group_11 {
556 + background-color: rgba(255, 255, 255, 1);
557 + margin-top: 193px;
558 + padding-bottom: 9px;
559 +}
560 +
561 +.image_2 {
562 + width: 393px;
563 + height: 1px;
564 +}
565 +
566 +.list_1 {
567 + width: 289px;
568 + height: 45px;
569 + align-self: center;
570 + margin-top: 9px;
571 + justify-content: space-between;
572 +}
573 +
574 +.image-text_4 {
575 + margin-right: 103px;
576 +}
577 +
578 +.label_1 {
579 + width: 24px;
580 + height: 24px;
581 +}
582 +
583 +.text-group_4 {
584 + width: 35px;
585 + overflow-wrap: break-word;
586 + font-size: 12px;
587 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
588 + font-weight: normal;
589 + text-align: left;
590 + white-space: nowrap;
591 + line-height: 17px;
592 + margin-top: 4px;
593 +}
594 +
595 +.image_3 {
596 + width: 134px;
597 + height: 5px;
598 + align-self: center;
599 + margin-top: 4px;
600 +}
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/SketchPng41ebf05313566695702fdc28688b6ed52dbbba555ddd1f6c423593ff63b3f65e"
9 + />
10 + </div>
11 + <div class="group_2 flex-row justify-between">
12 + <img
13 + class="thumbnail_1"
14 + referrerpolicy="no-referrer"
15 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng66b8991933f35bccdd7664c63b4a7cba9b2c3554be75da299d9c33e4b9efda22"
16 + />
17 + <span class="text_2">产品中心</span>
18 + </div>
19 + <div class="group_3 flex-col">
20 + <div class="group_4 flex-col">
21 + <div class="group_5 flex-row justify-between">
22 + <div class="text-wrapper_1 flex-col">
23 + <span class="text_3">全部产品</span>
24 + </div>
25 + <div class="text-wrapper_2 flex-col">
26 + <span class="text_4">人寿保险</span>
27 + </div>
28 + <div class="text-wrapper_3 flex-col">
29 + <span class="text_5">医疗保险</span>
30 + </div>
31 + <div class="text-wrapper_4 flex-col">
32 + <span class="text_6">意外保险</span>
33 + </div>
34 + </div>
35 + </div>
36 + <span class="text_7">全部产品</span>
37 + <div class="grid_1 flex-row">
38 + <div class="box_1 flex-col">
39 + <div class="image-text_1 flex-col">
40 + <div class="box_2 flex-col">
41 + <div class="text-wrapper_5 flex-col">
42 + <span class="text_8">热卖</span>
43 + </div>
44 + </div>
45 + <span class="text-group_1">终身寿险尊享版</span>
46 + </div>
47 + <div class="text-wrapper_6 flex-col">
48 + <span class="text_9">5年超值</span>
49 + </div>
50 + </div>
51 + <div class="box_3 flex-col">
52 + <span class="text_10">百万医疗保险计划</span>
53 + <div class="block_1 flex-row justify-between">
54 + <img
55 + class="thumbnail_2"
56 + referrerpolicy="no-referrer"
57 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga1fc927b8312af6aec1a5da5cbcba571a10640194d44885876793d4472bcffe2"
58 + />
59 + <div class="group_6 flex-col">
60 + <div class="text-wrapper_7 flex-col">
61 + <span class="text_11">收益率3.5%</span>
62 + </div>
63 + </div>
64 + </div>
65 + </div>
66 + <div class="box_4 flex-col">
67 + <span class="text_12">意外伤害保障计划</span>
68 + <div class="box_5 flex-row justify-between">
69 + <img
70 + class="thumbnail_3"
71 + referrerpolicy="no-referrer"
72 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4c86d1d1b122075e3c3268fd63f98594b586778c6dc6b611dc372913490d2807"
73 + />
74 + <div class="box_6 flex-col">
75 + <div class="text-wrapper_8 flex-col">
76 + <span class="text_13">保证收益万能</span>
77 + </div>
78 + </div>
79 + </div>
80 + </div>
81 + <div class="box_7 flex-col">
82 + <div class="image-text_2 flex-col">
83 + <div class="box_8 flex-col">
84 + <div class="text-wrapper_9 flex-col">
85 + <span class="text_14">热卖</span>
86 + </div>
87 + </div>
88 + <span class="text-group_2">分红型年金保险</span>
89 + </div>
90 + <div class="box_9 flex-row justify-between">
91 + <img
92 + class="thumbnail_4"
93 + referrerpolicy="no-referrer"
94 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga1fc927b8312af6aec1a5da5cbcba571a10640194d44885876793d4472bcffe2"
95 + />
96 + <div class="block_2 flex-col">
97 + <div class="text-wrapper_10 flex-col">
98 + <span class="text_15">保证收益万能</span>
99 + </div>
100 + </div>
101 + </div>
102 + </div>
103 + <div class="box_10 flex-col">
104 + <span class="text_16">重大疾病保险</span>
105 + <div class="group_7 flex-row justify-between">
106 + <img
107 + class="thumbnail_5"
108 + referrerpolicy="no-referrer"
109 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4c86d1d1b122075e3c3268fd63f98594b586778c6dc6b611dc372913490d2807"
110 + />
111 + <div class="group_8 flex-col">
112 + <div class="text-wrapper_11 flex-col">
113 + <span class="text_17">收益率4.2%</span>
114 + </div>
115 + </div>
116 + </div>
117 + </div>
118 + <div class="box_11 flex-col">
119 + <div class="image-text_3 flex-col">
120 + <div class="box_12 flex-col">
121 + <div class="text-wrapper_12 flex-col">
122 + <span class="text_18">热卖</span>
123 + </div>
124 + </div>
125 + <span class="text-group_3">少儿教育金保险</span>
126 + </div>
127 + <div class="group_9 flex-row justify-between">
128 + <img
129 + class="thumbnail_6"
130 + referrerpolicy="no-referrer"
131 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga1fc927b8312af6aec1a5da5cbcba571a10640194d44885876793d4472bcffe2"
132 + />
133 + <div class="group_10 flex-col">
134 + <div class="text-wrapper_13 flex-col">
135 + <span class="text_19">教育专属</span>
136 + </div>
137 + </div>
138 + </div>
139 + </div>
140 + </div>
141 + <div class="group_11 flex-col">
142 + <img
143 + class="image_2"
144 + referrerpolicy="no-referrer"
145 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
146 + />
147 + <div class="list_1 flex-row">
148 + <div
149 + class="image-text_4 flex-col"
150 + v-for="(item, index) in loopData0"
151 + :key="index"
152 + >
153 + <img
154 + class="label_1"
155 + referrerpolicy="no-referrer"
156 + :src="item.lanhuimage0"
157 + />
158 + <span
159 + class="text-group_4"
160 + :style="{ color: item.lanhufontColor0 }"
161 + v-html="item.lanhutext0"
162 + ></span>
163 + </div>
164 + </div>
165 + <img
166 + class="image_3"
167 + referrerpolicy="no-referrer"
168 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd87bce34194e46404c7ac21a64bed8e9f8454451baaf336c5201241680a20c9d"
169 + />
170 + </div>
171 + </div>
172 + </div>
173 +</template>
174 +<script>
175 +export default {
176 + data() {
177 + return {
178 + loopData0: [
179 + {
180 + lanhuimage0:
181 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga613c67a645a5984586afecdb62939c0f7a50579c221b1918780e7886dfe9c43',
182 + lanhutext0: '首页',
183 + lanhufontColor0: 'rgba(37,99,235,1.000000)',
184 + },
185 + {
186 + lanhuimage0:
187 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng355fd7cd6d5c986d30655db577fe8e511f878d37c9506e77dc53be60228d6453',
188 + lanhutext0: 'AI答疑',
189 + lanhufontColor0: 'rgba(156,163,175,1.000000)',
190 + },
191 + {
192 + lanhuimage0:
193 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng13ceb19b113cdc23fbf47e15ccf14d27aec044ad2c13f88539fc8459993ade6f',
194 + lanhutext0: '我的',
195 + lanhufontColor0: 'rgba(156,163,175,1.000000)',
196 + },
197 + ],
198 + constants: {},
199 + };
200 + },
201 + methods: {},
202 +};
203 +</script>
204 +<style src="./common.css" />
205 +<style src="./index.css" />
...@@ -9,6 +9,7 @@ const pages = [ ...@@ -9,6 +9,7 @@ const pages = [
9 'pages/index/index', 9 'pages/index/index',
10 'pages/auth/index', 10 'pages/auth/index',
11 'pages/onboarding/index', 11 'pages/onboarding/index',
12 + 'pages/family-office/index',
12 'pages/signing/index', 13 'pages/signing/index',
13 ] 14 ]
14 15
......
1 +<template>
2 + <component :is="iconComponent" v-if="iconComponent" :size="size" :class="customClass" :color="color" />
3 +</template>
4 +
5 +<script setup>
6 +import { computed } from 'vue';
7 +import {
8 + Cart,
9 + Category,
10 + Check,
11 + Checklist,
12 + Clock,
13 + Edit,
14 + Find,
15 + Home,
16 + My,
17 + Order,
18 + PlayCircleFill,
19 + RectRight,
20 + Search,
21 + Service,
22 + Star,
23 + Top
24 +} from '@nutui/icons-vue-taro';
25 +
26 +const props = defineProps({
27 + name: {
28 + type: String,
29 + required: true
30 + },
31 + size: {
32 + type: [String, Number],
33 + default: ''
34 + },
35 + color: {
36 + type: String,
37 + default: ''
38 + },
39 + customClass: {
40 + type: String,
41 + default: ''
42 + }
43 +});
44 +
45 +const icons = {
46 + Cart,
47 + Category,
48 + Check,
49 + Checklist,
50 + Clock,
51 + Edit,
52 + Find,
53 + Home,
54 + My,
55 + Order,
56 + PlayCircleFill,
57 + RectRight,
58 + Search,
59 + Service,
60 + Star,
61 + Top
62 +};
63 +
64 +const iconComponent = computed(() => {
65 + return icons[props.name] || null;
66 +});
67 +</script>
1 +<!--
2 + * @Date: 2026-01-29 21:09:28
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2026-01-29 21:18:14
5 + * @FilePath: /manulife-weapp/src/components/NavHeader.vue
6 + * @Description: 通用导航头组件，用于页面顶部固定导航栏，展示页面标题。
7 +-->
8 +<template>
9 + <!-- Placeholder to prevent content from being hidden behind fixed header -->
10 + <div class="w-full h-[250rpx]"></div>
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]">
13 + <span class="text-white text-[35rpx] font-normal">{{ title }}</span>
14 + </div>
15 +</template>
16 +
17 +<script setup>
18 +defineProps({
19 + title: {
20 + type: String,
21 + required: true
22 + }
23 +})
24 +</script>
1 <!-- 1 <!--
2 * @Date: 2026-01-29 20:33:23 2 * @Date: 2026-01-29 20:33:23
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-01-29 20:42:52 4 + * @LastEditTime: 2026-01-29 21:18:33
5 * @FilePath: /manulife-weapp/src/components/TabBar.vue 5 * @FilePath: /manulife-weapp/src/components/TabBar.vue
6 - * @Description: 文件描述 6 + * @Description: 通用底部导航栏组件，用于页面底部固定导航栏，展示页面标题。
7 --> 7 -->
8 <template> 8 <template>
9 <view class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-[env(safe-area-inset-bottom)] z-50"> 9 <view class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-[env(safe-area-inset-bottom)] z-50">
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
14 :key="index" 14 :key="index"
15 @tap="handleTabClick(item)" 15 @tap="handleTabClick(item)"
16 > 16 >
17 - <component 17 + <IconFont
18 - :is="item.icon" 18 + :name="item.icon"
19 :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']" 19 :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']"
20 size="24" 20 size="24"
21 /> 21 />
...@@ -29,8 +29,8 @@ ...@@ -29,8 +29,8 @@
29 </template> 29 </template>
30 30
31 <script setup> 31 <script setup>
32 -import { ref } from 'vue' 32 +import { ref, shallowRef } from 'vue'
33 -import { Home, Service, My } from '@nutui/icons-vue-taro' 33 +import IconFont from '@/components/IconFont.vue'
34 import { useGo } from '@/hooks/useGo' 34 import { useGo } from '@/hooks/useGo'
35 import Taro from '@tarojs/taro' 35 import Taro from '@tarojs/taro'
36 36
...@@ -43,24 +43,24 @@ const props = defineProps({ ...@@ -43,24 +43,24 @@ const props = defineProps({
43 43
44 const go = useGo() 44 const go = useGo()
45 45
46 -const tabs = ref([ 46 +const tabs = shallowRef([
47 { 47 {
48 key: 'home', 48 key: 'home',
49 label: '首页', 49 label: '首页',
50 - icon: Home, 50 + icon: 'Home',
51 path: '/pages/index/index' 51 path: '/pages/index/index'
52 }, 52 },
53 { 53 {
54 key: 'ai', 54 key: 'ai',
55 label: 'AI答疑', 55 label: 'AI答疑',
56 - icon: Service, 56 + icon: 'Service',
57 - path: '/pages/ai/index' // Placeholder path 57 + path: '/pages/ai/index'
58 }, 58 },
59 { 59 {
60 key: 'me', 60 key: 'me',
61 label: '我的', 61 label: '我的',
62 - icon: My, 62 + icon: 'My',
63 - path: '/pages/me/index' // Placeholder path 63 + path: '/pages/me/index'
64 } 64 }
65 ]) 65 ])
66 66
......
1 +/*
2 + * @Date: 2025-06-28 10:33:00
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2026-01-29 17:51:21
5 + * @FilePath: /manulife-weapp/src/pages/index/index.config.js
6 + * @Description: 首页配置
7 + */
8 +export default definePageConfig({
9 + navigationBarTitleText: '入职相关',
10 + navigationStyle: 'custom'
11 +})
1 +<template>
2 + <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
3 + <!-- Navigation Header -->
4 + <NavHeader title="家办相关" />
5 +
6 + <!-- Content List -->
7 + <div class="px-[40rpx] mt-[40rpx] relative z-10">
8 + <div v-for="(section, index) in sections" :key="index"
9 + class="bg-white rounded-[32rpx] mb-[32rpx] pb-[56rpx] overflow-hidden shadow-sm">
10 + <!-- Section Header -->
11 + <div class="px-[40rpx] py-[32rpx]" :style="{ background: section.bgGradient }">
12 + <span class="text-[#1f2937] text-[32rpx] font-normal">{{ section.title }}</span>
13 + </div>
14 +
15 + <!-- Section Items -->
16 + <div class="flex flex-col">
17 + <div v-for="(item, itemIndex) in section.items" :key="itemIndex" class="flex flex-col">
18 + <div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer"
19 + @tap="handleItemClick(item)">
20 + <div class="flex items-center">
21 + <div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
22 + <IconFont :name="item.icon" class="text-blue-600" size="32" />
23 + </div>
24 + <div class="flex flex-col">
25 + <span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
26 + <span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
27 + </div>
28 + </div>
29 + <IconFont name="RectRight" class="text-gray-400" size="16" />
30 + </div>
31 + <!-- Divider -->
32 + <div v-if="itemIndex < section.items.length - 1"
33 + class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
34 + </div>
35 + </div>
36 + </div>
37 + </div>
38 +
39 + <!-- Tab Bar -->
40 + <TabBar current="" />
41 + </div>
42 +</template>
43 +
44 +<script setup>
45 +import { shallowRef } from 'vue'
46 +import { useGo } from '@/hooks/useGo'
47 +import TabBar from '@/components/TabBar.vue'
48 +import NavHeader from '@/components/NavHeader.vue'
49 +import IconFont from '@/components/IconFont.vue'
50 +
51 +const go = useGo()
52 +
53 +const sections = shallowRef([
54 + {
55 + title: '家庭成员',
56 + bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
57 + items: [
58 + {
59 + title: '成员列表',
60 + subtitle: '管理家庭成员信息',
61 + icon: 'My'
62 + },
63 + {
64 + title: '新增成员',
65 + subtitle: '添加家庭成员',
66 + icon: 'Edit'
67 + }
68 + ]
69 + },
70 + {
71 + title: '健康档案',
72 + bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
73 + items: [
74 + {
75 + title: '体检报告',
76 + subtitle: '查看家庭成员体检记录',
77 + icon: 'Order'
78 + },
79 + {
80 + title: '就医记录',
81 + subtitle: '家庭成员就医历史',
82 + icon: 'Clock'
83 + }
84 + ]
85 + },
86 + {
87 + title: '资产管理',
88 + bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
89 + items: [
90 + {
91 + title: '保单管理',
92 + subtitle: '家庭保单汇总',
93 + icon: 'Star'
94 + },
95 + {
96 + title: '资产总览',
97 + subtitle: '家庭资产分布',
98 + icon: 'Find'
99 + }
100 + ]
101 + },
102 + {
103 + title: '生活服务',
104 + bgGradient: 'linear-gradient(90deg, #E0F2FE 0%, #BAE6FD 100%)',
105 + items: [
106 + {
107 + title: '高端医疗',
108 + subtitle: '预约高端医疗服务',
109 + icon: 'Service'
110 + },
111 + {
112 + title: '康养服务',
113 + subtitle: '健康养生服务',
114 + icon: 'PlayCircleFill'
115 + }
116 + ]
117 + }
118 +])
119 +
120 +/**
121 + * Handle item click
122 + * @param {Object} item - Clicked item data
123 + */
124 +const handleItemClick = (item) => {
125 + console.log('Clicked:', item.title)
126 + // TODO: Navigate to respective page
127 +}
128 +</script>
129 +
130 +<script>
131 +export default {
132 + name: 'FamilyOfficeIndex'
133 +}
134 +</script>
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 17:51:21 4 + * @LastEditTime: 2026-01-29 21:07:21
5 * @FilePath: /manulife-weapp/src/pages/index/index.config.js 5 * @FilePath: /manulife-weapp/src/pages/index/index.config.js
6 * @Description: 首页配置 6 * @Description: 首页配置
7 */ 7 */
8 -export default { 8 +export default definePageConfig({
9 - navigationBarTitleText: '臻奇智荟圈' 9 + navigationBarTitleText: '臻奇智荟圈',
10 -} 10 + navigationStyle: 'custom'
11 +})
......
...@@ -7,11 +7,12 @@ ...@@ -7,11 +7,12 @@
7 </view> 7 </view>
8 8
9 <view class="relative z-10 px-[32rpx] pt-[180rpx]"> 9 <view class="relative z-10 px-[32rpx] pt-[180rpx]">
10 - <text class="block text-white text-[44rpx] font-bold mb-[40rpx]">臻奇智荟圈</text> 10 + <text class="block text-white text-[44rpx] font-bold mb-[40rpx] text-center">臻奇智荟圈</text>
11 11
12 <!-- Search Bar --> 12 <!-- Search Bar -->
13 - <view class="flex items-center w-full h-[88rpx] bg-white/20 backdrop-blur-md rounded-full px-[32rpx] border border-white/30"> 13 + <view
14 - <Search class="text-white/80 mr-[16rpx]" size="18" /> 14 + class="flex items-center w-full h-[88rpx] bg-white/20 backdrop-blur-md rounded-full px-[32rpx] border border-white/30">
15 + <IconFont name="Search" class="text-white/80 mr-[16rpx]" size="18" />
15 <text class="text-white/80 text-[28rpx]">搜索培训资料、案例...</text> 16 <text class="text-white/80 text-[28rpx]">搜索培训资料、案例...</text>
16 </view> 17 </view>
17 </view> 18 </view>
...@@ -21,13 +22,9 @@ ...@@ -21,13 +22,9 @@
21 <!-- Grid Icons --> 22 <!-- Grid Icons -->
22 <view class="bg-white rounded-[32rpx] shadow-sm p-[40rpx] mb-[24rpx]"> 23 <view class="bg-white rounded-[32rpx] shadow-sm p-[40rpx] mb-[24rpx]">
23 <view class="flex flex-wrap"> 24 <view class="flex flex-wrap">
24 - <view 25 + <view class="flex flex-col items-center w-1/3 mb-[40rpx]" v-for="(item, index) in loopData0" :key="index">
25 - class="flex flex-col items-center w-1/3 mb-[40rpx]"
26 - v-for="(item, index) in loopData0"
27 - :key="index"
28 - >
29 <view class="w-[88rpx] h-[88rpx] rounded-[24rpx] bg-blue-50 flex items-center justify-center mb-[16rpx]"> 26 <view class="w-[88rpx] h-[88rpx] rounded-[24rpx] bg-blue-50 flex items-center justify-center mb-[16rpx]">
30 - <component :is="item.icon" class="text-blue-600" size="24" /> 27 + <IconFont :name="item.icon" class="text-blue-600" size="24" />
31 </view> 28 </view>
32 <text class="text-gray-800 text-[26rpx]">{{ item.lanhutext0 }}</text> 29 <text class="text-gray-800 text-[26rpx]">{{ item.lanhutext0 }}</text>
33 </view> 30 </view>
...@@ -40,7 +37,7 @@ ...@@ -40,7 +37,7 @@
40 <text class="text-gray-900 text-[32rpx] font-bold">热卖产品：</text> 37 <text class="text-gray-900 text-[32rpx] font-bold">热卖产品：</text>
41 <view class="flex items-center text-blue-600"> 38 <view class="flex items-center text-blue-600">
42 <text class="text-[26rpx] mr-[4rpx]">查看更多</text> 39 <text class="text-[26rpx] mr-[4rpx]">查看更多</text>
43 - <RectRight size="12" /> 40 + <IconFont name="RectRight" size="12" />
44 </view> 41 </view>
45 </view> 42 </view>
46 43
...@@ -59,7 +56,8 @@ ...@@ -59,7 +56,8 @@
59 </view> 56 </view>
60 </view> 57 </view>
61 <view class="flex justify-between gap-[24rpx]"> 58 <view class="flex justify-between gap-[24rpx]">
62 - <nut-button plain color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600">产品资料</nut-button> 59 + <nut-button plain color="#2563EB"
60 + class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600">产品资料</nut-button>
63 <nut-button color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0">计划书</nut-button> 61 <nut-button color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0">计划书</nut-button>
64 </view> 62 </view>
65 </view> 63 </view>
...@@ -79,7 +77,8 @@ ...@@ -79,7 +77,8 @@
79 </view> 77 </view>
80 </view> 78 </view>
81 <view class="flex justify-between gap-[24rpx]"> 79 <view class="flex justify-between gap-[24rpx]">
82 - <nut-button plain color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600">产品资料</nut-button> 80 + <nut-button plain color="#2563EB"
81 + class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600">产品资料</nut-button>
83 <nut-button color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0">计划书</nut-button> 82 <nut-button color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0">计划书</nut-button>
84 </view> 83 </view>
85 </view> 84 </view>
...@@ -91,7 +90,7 @@ ...@@ -91,7 +90,7 @@
91 <text class="text-gray-900 text-[32rpx] font-bold">本周热门资料</text> 90 <text class="text-gray-900 text-[32rpx] font-bold">本周热门资料</text>
92 <view class="flex items-center text-blue-600"> 91 <view class="flex items-center text-blue-600">
93 <text class="text-[26rpx] mr-[4rpx]">查看更多</text> 92 <text class="text-[26rpx] mr-[4rpx]">查看更多</text>
94 - <RectRight size="12" /> 93 + <IconFont name="RectRight" size="12" />
95 </view> 94 </view>
96 </view> 95 </view>
97 96
...@@ -99,7 +98,8 @@ ...@@ -99,7 +98,8 @@
99 <view class="flex flex-col gap-[32rpx]"> 98 <view class="flex flex-col gap-[32rpx]">
100 <!-- Item 1 --> 99 <!-- Item 1 -->
101 <view class="flex gap-[24rpx]"> 100 <view class="flex gap-[24rpx]">
102 - <image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200" src="https://picsum.photos/seed/mat1/200/140" mode="aspectFill" /> 101 + <image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200"
102 + src="https://picsum.photos/seed/mat1/200/140" mode="aspectFill" />
103 <view class="flex-1 flex flex-col justify-between py-[4rpx]"> 103 <view class="flex-1 flex flex-col justify-between py-[4rpx]">
104 <text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">2024年保险市场趋势分析报告</text> 104 <text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">2024年保险市场趋势分析报告</text>
105 <view class="flex justify-between items-end"> 105 <view class="flex justify-between items-end">
...@@ -111,7 +111,8 @@ ...@@ -111,7 +111,8 @@
111 <view class="h-[2rpx] bg-gray-100"></view> 111 <view class="h-[2rpx] bg-gray-100"></view>
112 <!-- Item 2 --> 112 <!-- Item 2 -->
113 <view class="flex gap-[24rpx]"> 113 <view class="flex gap-[24rpx]">
114 - <image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200" src="https://picsum.photos/seed/mat2/200/140" mode="aspectFill" /> 114 + <image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200"
115 + src="https://picsum.photos/seed/mat2/200/140" mode="aspectFill" />
115 <view class="flex-1 flex flex-col justify-between py-[4rpx]"> 116 <view class="flex-1 flex flex-col justify-between py-[4rpx]">
116 <text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">高净值客户需求分析与产品匹配</text> 117 <text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">高净值客户需求分析与产品匹配</text>
117 <view class="flex justify-between items-end"> 118 <view class="flex justify-between items-end">
...@@ -123,7 +124,8 @@ ...@@ -123,7 +124,8 @@
123 <view class="h-[2rpx] bg-gray-100"></view> 124 <view class="h-[2rpx] bg-gray-100"></view>
124 <!-- Item 3 --> 125 <!-- Item 3 -->
125 <view class="flex gap-[24rpx]"> 126 <view class="flex gap-[24rpx]">
126 - <image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200" src="https://picsum.photos/seed/mat3/200/140" mode="aspectFill" /> 127 + <image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200"
128 + src="https://picsum.photos/seed/mat3/200/140" mode="aspectFill" />
127 <view class="flex-1 flex flex-col justify-between py-[4rpx]"> 129 <view class="flex-1 flex flex-col justify-between py-[4rpx]">
128 <text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">保险合同条款解读与风险提示</text> 130 <text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">保险合同条款解读与风险提示</text>
129 <view class="flex justify-between items-end"> 131 <view class="flex justify-between items-end">
...@@ -142,48 +144,20 @@ ...@@ -142,48 +144,20 @@
142 </template> 144 </template>
143 145
144 <script setup> 146 <script setup>
145 -import { ref } from 'vue'; 147 +import { ref, shallowRef } from 'vue';
146 import Taro, { useShareAppMessage } from '@tarojs/taro'; 148 import Taro, { useShareAppMessage } from '@tarojs/taro';
147 import { useGo } from '@/hooks/useGo'; 149 import { useGo } from '@/hooks/useGo';
148 import TabBar from '@/components/TabBar.vue'; 150 import TabBar from '@/components/TabBar.vue';
149 -import { 151 +import IconFont from '@/components/IconFont.vue';
150 - Search,
151 - RectRight,
152 - Order,
153 - My,
154 - Cart,
155 - Home,
156 - Category,
157 - Star,
158 - Service
159 -} from '@nutui/icons-vue-taro';
160 152
161 // Data 153 // Data
162 -const loopData0 = ref([ 154 +const loopData0 = shallowRef([
163 - { 155 + { icon: 'Order', lanhutext0: '计划书' },
164 - icon: Order, 156 + { icon: 'My', lanhutext0: '入职相关' },
165 - lanhutext0: '计划书', 157 + { icon: 'Cart', lanhutext0: '签单相关' },
166 - }, 158 + { icon: 'Home', lanhutext0: '家办相关' },
167 - { 159 + { icon: 'Category', lanhutext0: '产品知识库' },
168 - icon: My, 160 + { icon: 'Star', lanhutext0: '工具箱' },
169 - lanhutext0: '入职相关',
170 - },
171 - {
172 - icon: Cart,
173 - lanhutext0: '签单相关',
174 - },
175 - {
176 - icon: Home,
177 - lanhutext0: '家办相关',
178 - },
179 - {
180 - icon: Category,
181 - lanhutext0: '产品知识库',
182 - },
183 - {
184 - icon: Star,
185 - lanhutext0: '工具箱',
186 - },
187 ]); 161 ]);
188 162
189 // Navigation 163 // Navigation
......
1 <template> 1 <template>
2 <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]"> 2 <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
3 <!-- Navigation Header --> 3 <!-- Navigation Header -->
4 - <div class="relative w-full h-[300rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] flex items-center justify-center pt-[40rpx]"> 4 + <NavHeader title="入职相关" />
5 - <span class="text-white text-[44rpx] font-normal">入职相关</span>
6 - </div>
7 5
8 <!-- Content List --> 6 <!-- Content List -->
9 <div class="px-[40rpx] mt-[40rpx] relative z-10"> 7 <div class="px-[40rpx] mt-[40rpx] relative z-10">
...@@ -19,14 +17,14 @@ ...@@ -19,14 +17,14 @@
19 <div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)"> 17 <div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)">
20 <div class="flex items-center"> 18 <div class="flex items-center">
21 <div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full"> 19 <div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
22 - <component :is="item.icon" class="text-blue-600" size="32" /> 20 + <IconFont :name="item.icon" class="text-blue-600" size="32" />
23 </div> 21 </div>
24 <div class="flex flex-col"> 22 <div class="flex flex-col">
25 <span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span> 23 <span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
26 <span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span> 24 <span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
27 </div> 25 </div>
28 </div> 26 </div>
29 - <RectRight class="text-gray-400" size="16" /> 27 + <IconFont name="RectRight" class="text-gray-400" size="16" />
30 </div> 28 </div>
31 <!-- Divider --> 29 <!-- Divider -->
32 <div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div> 30 <div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
...@@ -41,85 +39,72 @@ ...@@ -41,85 +39,72 @@
41 </template> 39 </template>
42 40
43 <script setup> 41 <script setup>
44 -import { ref } from 'vue' 42 +import { shallowRef } from 'vue'
45 import { useGo } from '@/hooks/useGo' 43 import { useGo } from '@/hooks/useGo'
46 import TabBar from '@/components/TabBar.vue' 44 import TabBar from '@/components/TabBar.vue'
47 -import { 45 +import NavHeader from '@/components/NavHeader.vue'
48 - Edit, 46 +import IconFont from '@/components/IconFont.vue'
49 - Find,
50 - Order,
51 - Clock,
52 - Checklist,
53 - Check,
54 - Star,
55 - Top,
56 - PlayCircleFill,
57 - RectRight
58 -} from '@nutui/icons-vue-taro'
59 47
60 const go = useGo() 48 const go = useGo()
61 49
62 -const sections = ref([ 50 +const sections = shallowRef([
63 { 51 {
64 title: '入职前', 52 title: '入职前',
65 - bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
66 items: [ 53 items: [
67 { 54 {
55 + icon: 'Edit',
68 title: '考试报名', 56 title: '考试报名',
69 - subtitle: '资格考试报名入口', 57 + subtitle: '报名参加代理人资格考试'
70 - icon: Edit
71 }, 58 },
72 { 59 {
73 - title: '考试资料及刷题', 60 + icon: 'Find',
74 - subtitle: '历年真题及模拟题库', 61 + title: '面试结果查询',
75 - icon: Find 62 + subtitle: '查看面试状态和结果'
76 }, 63 },
77 { 64 {
78 - title: '签合约锁人规则', 65 + icon: 'Order',
79 - subtitle: '合约条款详解', 66 + title: '入职材料提交',
80 - icon: Order 67 + subtitle: '上传入职所需证件和资料'
81 } 68 }
82 ] 69 ]
83 }, 70 },
84 { 71 {
85 title: '入职中', 72 title: '入职中',
86 - bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
87 items: [ 73 items: [
88 { 74 {
75 + icon: 'Clock',
89 title: '各个进度时间线表格', 76 title: '各个进度时间线表格',
90 - subtitle: '入职进度跟踪表', 77 + subtitle: '查看入职流程关键节点'
91 - icon: Clock
92 }, 78 },
93 { 79 {
94 - title: '各个财务计划盘及对数', 80 + icon: 'Checklist',
95 - subtitle: '财务计划配置指南', 81 + title: '待办事项清单',
96 - icon: Checklist 82 + subtitle: '你需要完成的任务列表'
97 }, 83 },
98 { 84 {
99 - title: '基本法对比', 85 + icon: 'Check',
100 - subtitle: '公司制度对比分析', 86 + title: '签署合同',
101 - icon: Check 87 + subtitle: '电子合同在线签署'
102 } 88 }
103 ] 89 ]
104 }, 90 },
105 { 91 {
106 title: '入职后', 92 title: '入职后',
107 - bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
108 items: [ 93 items: [
109 { 94 {
110 - title: '公司拿钱必修课', 95 + icon: 'Star',
111 - subtitle: '薪酬体系培训', 96 + title: '新人培训',
112 - icon: Star 97 + subtitle: '参加新人岗前培训课程'
113 }, 98 },
114 { 99 {
115 - title: '升职流程条件', 100 + icon: 'Top',
116 - subtitle: '晋升通道说明', 101 + title: '业绩目标设定',
117 - icon: Top 102 + subtitle: '制定首月业绩目标'
118 }, 103 },
119 { 104 {
120 - title: '必修课程', 105 + icon: 'PlayCircleFill',
121 - subtitle: '岗位技能课程', 106 + title: '团队介绍',
122 - icon: PlayCircleFill 107 + subtitle: '了解你的团队和主管'
123 } 108 }
124 ] 109 ]
125 } 110 }
......
1 <template> 1 <template>
2 <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]"> 2 <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
3 <!-- Navigation Header --> 3 <!-- Navigation Header -->
4 - <div class="relative w-full h-[300rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] flex items-center justify-center pt-[40rpx]"> 4 + <NavHeader title="签单相关" />
5 - <span class="text-white text-[44rpx] font-normal">签单相关</span>
6 - </div>
7 5
8 <!-- Content List --> 6 <!-- Content List -->
9 <div class="px-[40rpx] mt-[40rpx] relative z-10"> 7 <div class="px-[40rpx] mt-[40rpx] relative z-10">
...@@ -19,14 +17,14 @@ ...@@ -19,14 +17,14 @@
19 <div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)"> 17 <div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)">
20 <div class="flex items-center"> 18 <div class="flex items-center">
21 <div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full"> 19 <div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
22 - <component :is="item.icon" class="text-blue-600" size="32" /> 20 + <IconFont :name="item.icon" class="text-blue-600" size="32" />
23 </div> 21 </div>
24 <div class="flex flex-col"> 22 <div class="flex flex-col">
25 <span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span> 23 <span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
26 <span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span> 24 <span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
27 </div> 25 </div>
28 </div> 26 </div>
29 - <RectRight class="text-gray-400" size="16" /> 27 + <IconFont name="RectRight" class="text-gray-400" size="16" />
30 </div> 28 </div>
31 <!-- Divider --> 29 <!-- Divider -->
32 <div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div> 30 <div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
...@@ -41,109 +39,92 @@ ...@@ -41,109 +39,92 @@
41 </template> 39 </template>
42 40
43 <script setup> 41 <script setup>
44 -import { ref } from 'vue' 42 +import { shallowRef } from 'vue'
45 import { useGo } from '@/hooks/useGo' 43 import { useGo } from '@/hooks/useGo'
46 import TabBar from '@/components/TabBar.vue' 44 import TabBar from '@/components/TabBar.vue'
47 -import { 45 +import NavHeader from '@/components/NavHeader.vue'
48 - Shop, 46 +import IconFont from '@/components/IconFont.vue'
49 - Category,
50 - Check,
51 - Edit,
52 - Checklist,
53 - Cart,
54 - People,
55 - Order,
56 - Clock,
57 - Refresh,
58 - Location,
59 - RectRight
60 -} from '@nutui/icons-vue-taro'
61 47
62 const go = useGo() 48 const go = useGo()
63 49
64 -const sections = ref([ 50 +const sections = shallowRef([
65 { 51 {
66 title: '培训板块', 52 title: '培训板块',
67 - bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
68 items: [ 53 items: [
69 { 54 {
55 + icon: 'Shop',
70 title: '公司介绍', 56 title: '公司介绍',
71 - subtitle: '企业背景及发展历程', 57 + subtitle: '企业背景及发展历程'
72 - icon: Shop
73 }, 58 },
74 { 59 {
60 + icon: 'Category',
75 title: '产品介绍及更新', 61 title: '产品介绍及更新',
76 - subtitle: '最新产品资料库', 62 + subtitle: '最新产品资料库'
77 - icon: Category
78 } 63 }
79 ] 64 ]
80 }, 65 },
81 { 66 {
82 title: '签单前', 67 title: '签单前',
83 - bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
84 items: [ 68 items: [
85 { 69 {
70 + icon: 'Check',
86 title: '预核保', 71 title: '预核保',
87 - subtitle: '核保流程指引', 72 + subtitle: '核保流程指引'
88 - icon: Check
89 }, 73 },
90 { 74 {
75 + icon: 'Edit',
91 title: '做计划书', 76 title: '做计划书',
92 - subtitle: '方案设计工具', 77 + subtitle: '方案设计工具'
93 - icon: Edit
94 } 78 }
95 ] 79 ]
96 }, 80 },
97 { 81 {
98 title: '签单中', 82 title: '签单中',
99 - bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
100 items: [ 83 items: [
101 { 84 {
85 + icon: 'Checklist',
102 title: '信息收集及健康告知模板', 86 title: '信息收集及健康告知模板',
103 - subtitle: '标准表格及注意事项', 87 + subtitle: '标准表格及注意事项'
104 - icon: Checklist
105 }, 88 },
106 { 89 {
90 + icon: 'Cart',
107 title: '缴费方式银行开户', 91 title: '缴费方式银行开户',
108 - subtitle: '支付渠道办理指南', 92 + subtitle: '支付渠道办理指南'
109 - icon: Cart
110 }, 93 },
111 { 94 {
95 + icon: 'People',
112 title: '体检经验', 96 title: '体检经验',
113 - subtitle: '体检流程及常见问题', 97 + subtitle: '体检流程及常见问题'
114 - icon: People
115 } 98 }
116 ] 99 ]
117 }, 100 },
118 { 101 {
119 title: '签单后', 102 title: '签单后',
120 - bgGradient: 'linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%)',
121 items: [ 103 items: [
122 { 104 {
105 + icon: 'Order',
123 title: '批单跟进', 106 title: '批单跟进',
124 - subtitle: '保单变更处理流程', 107 + subtitle: '保单变更处理流程'
125 - icon: Order
126 }, 108 },
127 { 109 {
110 + icon: 'Clock',
128 title: '核保/pending', 111 title: '核保/pending',
129 - subtitle: '核保进度查询', 112 + subtitle: '核保进度查询'
130 - icon: Clock
131 }, 113 },
132 { 114 {
115 + icon: 'Refresh',
133 title: '续保', 116 title: '续保',
134 - subtitle: '续期服务指引', 117 + subtitle: '续期服务指引'
135 - icon: Refresh
136 } 118 }
137 ] 119 ]
138 }, 120 },
139 { 121 {
140 title: '售后', 122 title: '售后',
141 - bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
142 items: [ 123 items: [
143 { 124 {
125 + icon: 'Location',
144 title: '香港医生资源', 126 title: '香港医生资源',
145 - subtitle: '专业医疗机构名录', 127 + subtitle: '专业医疗机构名录'
146 - icon: Location
147 } 128 }
148 ] 129 ]
149 } 130 }
......