Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b800ad6e 1 parent 2011b808

feat: 新增产品详情页面 

新增产品详情页面，包含 Banner、产品信息、特色、附件等模块
使用 Tailwind CSS 实现响应式布局，集成 NavHeader 和 TabBar 组件
注册页面路由至 app.config.js 并更新 CHANGELOG 文档
Inline Side-by-side
Showing 7 changed files with 1017 additions and 0 deletions
...@@ -41,6 +41,13 @@ All notable changes to this project will be documented in this file. ...@@ -41,6 +41,13 @@ All notable changes to this project will be documented in this file.
41 - 补充 `src/pages/feedback/index.vue` 中 `NavHeader` 组件的引用 41 - 补充 `src/pages/feedback/index.vue` 中 `NavHeader` 组件的引用
42 42
43 ### Added 43 ### Added
44 +- 新增 "产品详情" 页面 (`src/pages/product-detail/index`)：
45 + - 还原设计稿 (`docs/design/manulife-V1/产品详情`) 布局与交互
46 + - 使用 Tailwind CSS 实现响应式布局
47 + - 集成 `NavHeader` 和 `TabBar` 组件
48 + - 使用随机图片作为 Banner 占位，使用 NutUI 图标组件替代静态图标
49 + - 注册新页面路由至 `src/app.config.js`
50 +
44 - 新增 "资料列表" 页面 (`src/pages/material-list/index`)： 51 - 新增 "资料列表" 页面 (`src/pages/material-list/index`)：
45 - 实现基于 Design 的列表 UI，精确还原设计稿 (`docs/design/manulife-V1/资料列表`) 52 - 实现基于 Design 的列表 UI，精确还原设计稿 (`docs/design/manulife-V1/资料列表`)
46 - 集成 `NavHeader` 和 `TabBar` 组件，保持全站导航一致性 53 - 集成 `NavHeader` 和 `TabBar` 组件，保持全站导航一致性
......
1 +.page {
2 + position: relative;
3 + width: 393px;
4 + height: 1346px;
5 + overflow: hidden;
6 +}
7 +
8 +.box_1 {
9 + background-color: rgba(249, 250, 251, 1);
10 +}
11 +
12 +.group_1 {
13 + background-color: rgba(30, 58, 138, 1);
14 + width: 393px;
15 + padding: 12px 20px 12px 20px;
16 +}
17 +
18 +.text_1 {
19 + overflow-wrap: break-word;
20 + color: rgba(255, 255, 255, 1);
21 + font-size: 14px;
22 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
23 + font-weight: normal;
24 + text-align: left;
25 + white-space: nowrap;
26 + line-height: 20px;
27 +}
28 +
29 +.image_1 {
30 + width: 64px;
31 + height: 16px;
32 + margin: 2px 0 2px 0;
33 +}
34 +
35 +.group_2 {
36 + width: 393px;
37 + background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5ae87c5e9a86a0d640e93f4a87e612d1c4e6c25e22d3f2600417bdc2e27b7b31)
38 + 100% no-repeat;
39 + background-size: 100% 100%;
40 + padding: 20px 20px 20px 20px;
41 +}
42 +
43 +.image-text_1 {
44 + width: 120px;
45 +}
46 +
47 +.thumbnail_1 {
48 + width: 20px;
49 + height: 20px;
50 + margin: 6px 0 7px 0;
51 +}
52 +
53 +.text-group_1 {
54 + overflow-wrap: break-word;
55 + color: rgba(255, 255, 255, 1);
56 + font-size: 22px;
57 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
58 + font-weight: normal;
59 + text-align: left;
60 + white-space: nowrap;
61 + line-height: 33px;
62 +}
63 +
64 +.label_1 {
65 + width: 24px;
66 + height: 24px;
67 + margin: 4px 0 5px 0;
68 +}
69 +
70 +.group_3 {
71 + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
72 + background-color: rgba(255, 255, 255, 1);
73 + border-radius: 12px;
74 + width: 353px;
75 + align-self: center;
76 + margin-top: 16px;
77 + padding-bottom: 19px;
78 +}
79 +
80 +.group_4 {
81 + background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4d6e0c6454dc20b785db64f6854b735b5062ebc7892886b479dbba96c3fa297e)
82 + 100% no-repeat;
83 + background-size: 100% 100%;
84 + padding: 8px 9px 195px 312px;
85 +}
86 +
87 +.text-wrapper_1 {
88 + background-color: rgba(239, 68, 68, 1);
89 + border-radius: 9999px;
90 + padding: 2px 5px 2px 7px;
91 +}
92 +
93 +.text_2 {
94 + overflow-wrap: break-word;
95 + color: rgba(255, 255, 255, 1);
96 + font-size: 10px;
97 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
98 + font-weight: normal;
99 + text-align: left;
100 + white-space: nowrap;
101 + line-height: 10px;
102 +}
103 +
104 +.text_3 {
105 + overflow-wrap: break-word;
106 + color: rgba(31, 41, 55, 1);
107 + font-size: 18px;
108 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
109 + font-weight: normal;
110 + text-align: left;
111 + white-space: nowrap;
112 + line-height: 28px;
113 + margin: 3px 207px 0 20px;
114 +}
115 +
116 +.group_5 {
117 + width: 211px;
118 + margin: 11px 122px 0 20px;
119 +}
120 +
121 +.text-wrapper_2 {
122 + background-color: rgba(254, 226, 226, 1);
123 + border-radius: 4px;
124 + padding: 3px 8px 3px 8px;
125 +}
126 +
127 +.text_4 {
128 + height: 16px;
129 + overflow-wrap: break-word;
130 + color: rgba(220, 38, 38, 1);
131 + font-size: 11px;
132 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
133 + font-weight: normal;
134 + text-align: left;
135 + white-space: nowrap;
136 + line-height: 13px;
137 +}
138 +
139 +.text-wrapper_3 {
140 + background-color: rgba(254, 215, 170, 1);
141 + border-radius: 4px;
142 + padding: 3px 8px 6px 8px;
143 +}
144 +
145 +.text_5 {
146 + overflow-wrap: break-word;
147 + color: rgba(234, 88, 12, 1);
148 + font-size: 11px;
149 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
150 + font-weight: normal;
151 + text-align: left;
152 + white-space: nowrap;
153 + line-height: 13px;
154 +}
155 +
156 +.text-wrapper_4 {
157 + background-color: rgba(209, 250, 229, 1);
158 + border-radius: 4px;
159 + padding: 3px 7px 6px 7px;
160 +}
161 +
162 +.text_6 {
163 + overflow-wrap: break-word;
164 + color: rgba(5, 150, 105, 1);
165 + font-size: 11px;
166 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
167 + font-weight: normal;
168 + text-align: left;
169 + white-space: nowrap;
170 + line-height: 13px;
171 +}
172 +
173 +.group_6 {
174 + padding: 16px 21px 17px 20px;
175 +}
176 +
177 +.grid_1 {
178 + width: 352px;
179 + height: 160px;
180 + flex-wrap: wrap;
181 +}
182 +
183 +.text-group_2 {
184 + background-color: rgba(255, 255, 255, 1);
185 + border-radius: 8px;
186 + width: 170px;
187 + height: 74px;
188 + border: 1px solid rgba(229, 231, 235, 1);
189 + margin: 0 12px 12px 0;
190 + padding: 16px 104px 16px 16px;
191 +}
192 +
193 +.text-group_2:nth-child(2n) {
194 + margin-right: 0;
195 +}
196 +.text-group_2:nth-last-child(-n + 2) {
197 + margin-bottom: 0;
198 +}
199 +
200 +.text_7 {
201 + overflow-wrap: break-word;
202 + color: rgba(107, 114, 128, 1);
203 + font-size: 12px;
204 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
205 + font-weight: normal;
206 + text-align: left;
207 + white-space: nowrap;
208 + line-height: 16px;
209 +}
210 +
211 +.text_8 {
212 + width: 66px;
213 + overflow-wrap: break-word;
214 + color: rgba(31, 41, 55, 1);
215 + font-size: 14px;
216 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
217 + font-weight: normal;
218 + text-align: left;
219 + white-space: nowrap;
220 + line-height: 20px;
221 + margin: 4px 20px 0 0;
222 +}
223 +
224 +.group_7 {
225 + background-color: rgba(255, 255, 255, 1);
226 + border-radius: 12px;
227 + width: 353px;
228 + align-self: center;
229 + margin-top: -1px;
230 + padding: 20px 94px 20px 20px;
231 +}
232 +
233 +.text_9 {
234 + overflow-wrap: break-word;
235 + color: rgba(31, 41, 55, 1);
236 + font-size: 16px;
237 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
238 + font-weight: normal;
239 + text-align: left;
240 + white-space: nowrap;
241 + line-height: 24px;
242 + margin-right: 175px;
243 +}
244 +
245 +.image-text_2 {
246 + width: 233px;
247 + margin: 16px 6px 0 0;
248 +}
249 +
250 +.image_2 {
251 + width: 20px;
252 + height: 22px;
253 + margin-bottom: 1px;
254 +}
255 +
256 +.text-group_3 {
257 + height: 23px;
258 + overflow-wrap: break-word;
259 + color: rgba(55, 65, 81, 1);
260 + font-size: 14px;
261 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
262 + font-weight: normal;
263 + text-align: left;
264 + white-space: nowrap;
265 + line-height: 22px;
266 +}
267 +
268 +.image-text_3 {
269 + width: 233px;
270 + margin: 12px 6px 0 0;
271 +}
272 +
273 +.image_3 {
274 + width: 20px;
275 + height: 22px;
276 + margin-bottom: 1px;
277 +}
278 +
279 +.text-group_4 {
280 + height: 23px;
281 + overflow-wrap: break-word;
282 + color: rgba(55, 65, 81, 1);
283 + font-size: 14px;
284 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
285 + font-weight: normal;
286 + text-align: left;
287 + white-space: nowrap;
288 + line-height: 22px;
289 +}
290 +
291 +.image-text_4 {
292 + width: 224px;
293 + margin: 11px 15px 0 0;
294 +}
295 +
296 +.image_4 {
297 + width: 20px;
298 + height: 22px;
299 + margin-bottom: 1px;
300 +}
301 +
302 +.text-group_5 {
303 + height: 23px;
304 + overflow-wrap: break-word;
305 + color: rgba(55, 65, 81, 1);
306 + font-size: 14px;
307 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
308 + font-weight: normal;
309 + text-align: left;
310 + white-space: nowrap;
311 + line-height: 22px;
312 +}
313 +
314 +.image-text_5 {
315 + width: 239px;
316 + margin-top: 12px;
317 +}
318 +
319 +.image_5 {
320 + width: 20px;
321 + height: 22px;
322 + margin-bottom: 1px;
323 +}
324 +
325 +.text-group_6 {
326 + height: 23px;
327 + overflow-wrap: break-word;
328 + color: rgba(55, 65, 81, 1);
329 + font-size: 14px;
330 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
331 + font-weight: normal;
332 + text-align: left;
333 + white-space: nowrap;
334 + line-height: 22px;
335 +}
336 +
337 +.group_8 {
338 + background-color: rgba(255, 255, 255, 1);
339 + border-radius: 12px;
340 + width: 353px;
341 + align-self: center;
342 + margin-top: 16px;
343 + padding: 20px 20px 20px 20px;
344 +}
345 +
346 +.text_10 {
347 + overflow-wrap: break-word;
348 + color: rgba(31, 41, 55, 1);
349 + font-size: 16px;
350 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
351 + font-weight: normal;
352 + text-align: left;
353 + white-space: nowrap;
354 + line-height: 24px;
355 + margin-right: 249px;
356 +}
357 +
358 +.block_1 {
359 + background-color: rgba(249, 250, 251, 1);
360 + border-radius: 8px;
361 + width: 313px;
362 + border: 1px solid rgba(229, 231, 235, 1);
363 + margin-top: 16px;
364 + padding: 12px 12px 12px 12px;
365 +}
366 +
367 +.image-text_6 {
368 + width: 135px;
369 +}
370 +
371 +.label_2 {
372 + width: 40px;
373 + height: 40px;
374 +}
375 +
376 +.text-group_7 {
377 + margin: 1px 0 1px 0;
378 +}
379 +
380 +.text_11 {
381 + overflow-wrap: break-word;
382 + color: rgba(31, 41, 55, 1);
383 + font-size: 14px;
384 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
385 + font-weight: normal;
386 + text-align: left;
387 + white-space: nowrap;
388 + line-height: 20px;
389 +}
390 +
391 +.text_12 {
392 + overflow-wrap: break-word;
393 + color: rgba(156, 163, 175, 1);
394 + font-size: 12px;
395 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
396 + font-weight: normal;
397 + text-align: left;
398 + white-space: nowrap;
399 + line-height: 16px;
400 + margin: 2px 48px 0 0;
401 +}
402 +
403 +.thumbnail_2 {
404 + width: 20px;
405 + height: 20px;
406 + margin: 10px 0 10px 0;
407 +}
408 +
409 +.block_2 {
410 + background-color: rgba(249, 250, 251, 1);
411 + border-radius: 8px;
412 + width: 313px;
413 + border: 1px solid rgba(229, 231, 235, 1);
414 + margin-top: 12px;
415 + padding: 12px 12px 12px 12px;
416 +}
417 +
418 +.image-text_7 {
419 + width: 135px;
420 +}
421 +
422 +.label_3 {
423 + width: 40px;
424 + height: 40px;
425 +}
426 +
427 +.text-group_8 {
428 + margin: 1px 0 1px 0;
429 +}
430 +
431 +.text_13 {
432 + overflow-wrap: break-word;
433 + color: rgba(31, 41, 55, 1);
434 + font-size: 14px;
435 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
436 + font-weight: normal;
437 + text-align: left;
438 + white-space: nowrap;
439 + line-height: 20px;
440 +}
441 +
442 +.text_14 {
443 + overflow-wrap: break-word;
444 + color: rgba(156, 163, 175, 1);
445 + font-size: 12px;
446 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
447 + font-weight: normal;
448 + text-align: left;
449 + white-space: nowrap;
450 + line-height: 16px;
451 + margin: 2px 48px 0 0;
452 +}
453 +
454 +.thumbnail_3 {
455 + width: 20px;
456 + height: 20px;
457 + margin: 10px 0 10px 0;
458 +}
459 +
460 +.block_3 {
461 + background-color: rgba(249, 250, 251, 1);
462 + border-radius: 8px;
463 + width: 313px;
464 + border: 1px solid rgba(229, 231, 235, 1);
465 + margin-top: 12px;
466 + padding: 12px 12px 12px 12px;
467 +}
468 +
469 +.image-text_8 {
470 + width: 135px;
471 +}
472 +
473 +.label_4 {
474 + width: 40px;
475 + height: 40px;
476 +}
477 +
478 +.text-group_9 {
479 + margin: 1px 0 1px 0;
480 +}
481 +
482 +.text_15 {
483 + overflow-wrap: break-word;
484 + color: rgba(31, 41, 55, 1);
485 + font-size: 14px;
486 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
487 + font-weight: normal;
488 + text-align: left;
489 + white-space: nowrap;
490 + line-height: 20px;
491 +}
492 +
493 +.text_16 {
494 + overflow-wrap: break-word;
495 + color: rgba(156, 163, 175, 1);
496 + font-size: 12px;
497 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
498 + font-weight: normal;
499 + text-align: left;
500 + white-space: nowrap;
501 + line-height: 16px;
502 + margin: 2px 47px 0 0;
503 +}
504 +
505 +.thumbnail_4 {
506 + width: 20px;
507 + height: 20px;
508 + margin: 10px 0 10px 0;
509 +}
510 +
511 +.block_4 {
512 + background-color: rgba(249, 250, 251, 1);
513 + border-radius: 8px;
514 + width: 313px;
515 + border: 1px solid rgba(229, 231, 235, 1);
516 + margin-top: 12px;
517 + padding: 12px 12px 12px 12px;
518 +}
519 +
520 +.image-text_9 {
521 + width: 163px;
522 +}
523 +
524 +.label_5 {
525 + width: 40px;
526 + height: 40px;
527 +}
528 +
529 +.text-group_10 {
530 + margin: 1px 0 1px 0;
531 +}
532 +
533 +.text_17 {
534 + overflow-wrap: break-word;
535 + color: rgba(31, 41, 55, 1);
536 + font-size: 14px;
537 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
538 + font-weight: normal;
539 + text-align: left;
540 + white-space: nowrap;
541 + line-height: 20px;
542 +}
543 +
544 +.text_18 {
545 + overflow-wrap: break-word;
546 + color: rgba(156, 163, 175, 1);
547 + font-size: 12px;
548 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
549 + font-weight: normal;
550 + text-align: left;
551 + white-space: nowrap;
552 + line-height: 16px;
553 + margin: 2px 76px 0 0;
554 +}
555 +
556 +.thumbnail_5 {
557 + width: 20px;
558 + height: 20px;
559 + margin: 10px 0 10px 0;
560 +}
561 +
562 +.group_9 {
563 + background-color: rgba(255, 255, 255, 1);
564 + margin-top: 20px;
565 + padding-bottom: 10px;
566 +}
567 +
568 +.image_6 {
569 + width: 393px;
570 + height: 1px;
571 +}
572 +
573 +.group_10 {
574 + width: 289px;
575 + align-self: center;
576 + margin-top: 9px;
577 +}
578 +
579 +.image-text_10 {
580 +}
581 +
582 +.label_6 {
583 + width: 24px;
584 + height: 24px;
585 +}
586 +
587 +.text-group_11 {
588 + overflow-wrap: break-word;
589 + color: rgba(37, 99, 235, 1);
590 + font-size: 12px;
591 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
592 + font-weight: normal;
593 + text-align: left;
594 + white-space: nowrap;
595 + line-height: 16px;
596 + margin-top: 4px;
597 +}
598 +
599 +.image-text_11 {
600 +}
601 +
602 +.label_7 {
603 + width: 24px;
604 + height: 24px;
605 + margin: 0 6px 0 5px;
606 +}
607 +
608 +.text-group_12 {
609 + overflow-wrap: break-word;
610 + color: rgba(156, 163, 175, 1);
611 + font-size: 12px;
612 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
613 + font-weight: normal;
614 + text-align: left;
615 + white-space: nowrap;
616 + line-height: 16px;
617 + margin-top: 4px;
618 +}
619 +
620 +.image-text_12 {
621 +}
622 +
623 +.label_8 {
624 + width: 24px;
625 + height: 24px;
626 +}
627 +
628 +.text-group_13 {
629 + overflow-wrap: break-word;
630 + color: rgba(156, 163, 175, 1);
631 + font-size: 12px;
632 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
633 + font-weight: normal;
634 + text-align: left;
635 + white-space: nowrap;
636 + line-height: 16px;
637 + margin-top: 4px;
638 +}
639 +
640 +.image_7 {
641 + width: 393px;
642 + height: 34px;
643 +}
1 +<template>
2 + <div class="page flex-col">
3 + <div class="box_1 flex-col">
4 + <div class="group_1 flex-row justify-between">
5 + <span class="text_1">9:41</span>
6 + <img
7 + class="image_1"
8 + referrerpolicy="no-referrer"
9 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng413f9d678a24a9b746fdc981fa579b56b2cbd98eddd024ab1279ef48ae59291e"
10 + />
11 + </div>
12 + <div class="group_2 flex-row justify-between">
13 + <div class="image-text_1 flex-row justify-between">
14 + <img
15 + class="thumbnail_1"
16 + referrerpolicy="no-referrer"
17 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngcf455e9215a4f7c705d61caac63b2f258566e9e9093e62ab91b71188ae8f0787"
18 + />
19 + <span class="text-group_1">产品详情</span>
20 + </div>
21 + <img
22 + class="label_1"
23 + referrerpolicy="no-referrer"
24 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4b49399358768d994666264f4789147f4c3712eee5edee5c0a0388a0b3eea4c2"
25 + />
26 + </div>
27 + <div class="group_3 flex-col">
28 + <div class="group_4 flex-col">
29 + <div class="text-wrapper_1 flex-col">
30 + <span class="text_2">热卖</span>
31 + </div>
32 + </div>
33 + <span class="text_3">终身寿险尊享版</span>
34 + <div class="group_5 flex-row justify-between">
35 + <div class="text-wrapper_2 flex-col">
36 + <span class="text_4">收益率3.5%</span>
37 + </div>
38 + <div class="text-wrapper_3 flex-col">
39 + <span class="text_5">5年超值</span>
40 + </div>
41 + <div class="text-wrapper_4 flex-col">
42 + <span class="text_6">保证收益万能</span>
43 + </div>
44 + </div>
45 + </div>
46 + <div class="group_6 flex-col">
47 + <div class="grid_1 flex-row">
48 + <div
49 + class="text-group_2 flex-col"
50 + v-for="(item, index) in loopData0"
51 + :key="index"
52 + >
53 + <span class="text_7" v-html="item.lanhutext0"></span>
54 + <span class="text_8" v-html="item.lanhutext1"></span>
55 + </div>
56 + </div>
57 + </div>
58 + <div class="group_7 flex-col">
59 + <span class="text_9">产品特色</span>
60 + <div class="image-text_2 flex-row justify-between">
61 + <img
62 + class="image_2"
63 + referrerpolicy="no-referrer"
64 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngecc2b07c805beacd9caa6d3b372bbf386d1b154c480ce1b759676421a12a7f24"
65 + />
66 + <span class="text-group_3">身故保险金：赔付100%基本保额</span>
67 + </div>
68 + <div class="image-text_3 flex-row justify-between">
69 + <img
70 + class="image_3"
71 + referrerpolicy="no-referrer"
72 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng6fce43476a53d80cba2198dadcc5201fa57ea7af1e4532712d26ba67fd902bc4"
73 + />
74 + <span class="text-group_4">全残保险金：赔付100%基本保额</span>
75 + </div>
76 + <div class="image-text_4 flex-row justify-between">
77 + <img
78 + class="image_4"
79 + referrerpolicy="no-referrer"
80 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc53114f603abaca96913163bcd1e032b2da57abbb22d05b4592a63ad4312e7cd"
81 + />
82 + <span class="text-group_5">保费豁免：重疾后免交剩余保费</span>
83 + </div>
84 + <div class="image-text_5 flex-row justify-between">
85 + <img
86 + class="image_5"
87 + referrerpolicy="no-referrer"
88 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3191ba6cf4c57d6731e044695369af60040fa22a438bd918e3d1125c59f67776"
89 + />
90 + <span class="text-group_6">保单贷款：最高可贷现金价值80%</span>
91 + </div>
92 + </div>
93 + <div class="group_8 flex-col">
94 + <span class="text_10">相关附件</span>
95 + <div class="block_1 flex-row justify-between">
96 + <div class="image-text_6 flex-row justify-between">
97 + <img
98 + class="label_2"
99 + referrerpolicy="no-referrer"
100 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870bc430c2ddc1d28de894251ff314e0e4dd0e9ab2da4a2e8b0eb9cfbfc11962"
101 + />
102 + <div class="text-group_7 flex-col">
103 + <span class="text_11">产品条款.pdf</span>
104 + <span class="text_12">2.3MB</span>
105 + </div>
106 + </div>
107 + <img
108 + class="thumbnail_2"
109 + referrerpolicy="no-referrer"
110 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd36b35df4ed347995d6edde2c42aa1a2591397a4dc2e580da5c1cbfa46e9a561"
111 + />
112 + </div>
113 + <div class="block_2 flex-row justify-between">
114 + <div class="image-text_7 flex-row justify-between">
115 + <img
116 + class="label_3"
117 + referrerpolicy="no-referrer"
118 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870bc430c2ddc1d28de894251ff314e0e4dd0e9ab2da4a2e8b0eb9cfbfc11962"
119 + />
120 + <div class="text-group_8 flex-col">
121 + <span class="text_13">投保须知.pdf</span>
122 + <span class="text_14">1.8MB</span>
123 + </div>
124 + </div>
125 + <img
126 + class="thumbnail_3"
127 + referrerpolicy="no-referrer"
128 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd36b35df4ed347995d6edde2c42aa1a2591397a4dc2e580da5c1cbfa46e9a561"
129 + />
130 + </div>
131 + <div class="block_3 flex-row justify-between">
132 + <div class="image-text_8 flex-row justify-between">
133 + <img
134 + class="label_4"
135 + referrerpolicy="no-referrer"
136 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870bc430c2ddc1d28de894251ff314e0e4dd0e9ab2da4a2e8b0eb9cfbfc11962"
137 + />
138 + <div class="text-group_9 flex-col">
139 + <span class="text_15">健康告知.pdf</span>
140 + <span class="text_16">980KB</span>
141 + </div>
142 + </div>
143 + <img
144 + class="thumbnail_4"
145 + referrerpolicy="no-referrer"
146 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd36b35df4ed347995d6edde2c42aa1a2591397a4dc2e580da5c1cbfa46e9a561"
147 + />
148 + </div>
149 + <div class="block_4 flex-row justify-between">
150 + <div class="image-text_9 flex-row justify-between">
151 + <img
152 + class="label_5"
153 + referrerpolicy="no-referrer"
154 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870bc430c2ddc1d28de894251ff314e0e4dd0e9ab2da4a2e8b0eb9cfbfc11962"
155 + />
156 + <div class="text-group_10 flex-col">
157 + <span class="text_17">保险责任说明.pdf</span>
158 + <span class="text_18">1.5MB</span>
159 + </div>
160 + </div>
161 + <img
162 + class="thumbnail_5"
163 + referrerpolicy="no-referrer"
164 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd36b35df4ed347995d6edde2c42aa1a2591397a4dc2e580da5c1cbfa46e9a561"
165 + />
166 + </div>
167 + </div>
168 + <div class="group_9 flex-col">
169 + <img
170 + class="image_6"
171 + referrerpolicy="no-referrer"
172 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
173 + />
174 + <div class="group_10 flex-row justify-between">
175 + <div class="image-text_10 flex-col">
176 + <img
177 + class="label_6"
178 + referrerpolicy="no-referrer"
179 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge1c34aa753793ad1927d03e0a526cbc67283feda10ac5b4442c01c932b1940e3"
180 + />
181 + <span class="text-group_11">首页</span>
182 + </div>
183 + <div class="image-text_11 flex-col">
184 + <img
185 + class="label_7"
186 + referrerpolicy="no-referrer"
187 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8447fb4a0a45c6195884415974c636ba50f9e486a89489a3ed9a7749523e3a52"
188 + />
189 + <span class="text-group_12">AI客服</span>
190 + </div>
191 + <div class="image-text_12 flex-col">
192 + <img
193 + class="label_8"
194 + referrerpolicy="no-referrer"
195 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9c0498226c2a52625ed5af0366f4b3a8f439148f929afc840e382b2096d8b49d"
196 + />
197 + <span class="text-group_13">我的</span>
198 + </div>
199 + </div>
200 + </div>
201 + <img
202 + class="image_7"
203 + referrerpolicy="no-referrer"
204 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng830c4568c4d0141e1fa97f7fad1e075e2178ab08e5613734b08eaf46dcdd4207"
205 + />
206 + </div>
207 + </div>
208 +</template>
209 +<script>
210 +export default {
211 + data() {
212 + return {
213 + loopData0: [
214 + { lanhutext0: '保险期间', lanhutext1: '终身' },
215 + { lanhutext0: '缴费期间', lanhutext1: '20年' },
216 + { lanhutext0: '起保年龄', lanhutext1: '0-60岁' },
217 + { lanhutext0: '保障额度', lanhutext1: '最高100万' },
218 + ],
219 + constants: {},
220 + };
221 + },
222 + methods: {},
223 +};
224 +</script>
225 +<style src="./common.css" />
226 +<style src="./index.css" />
...@@ -15,6 +15,7 @@ const pages = [ ...@@ -15,6 +15,7 @@ const pages = [
15 'pages/onboarding/index', 15 'pages/onboarding/index',
16 'pages/family-office/index', 16 'pages/family-office/index',
17 'pages/knowledge-base/index', 17 'pages/knowledge-base/index',
18 + 'pages/product-detail/index',
18 'pages/material-list/index', 19 'pages/material-list/index',
19 'pages/signing/index', 20 'pages/signing/index',
20 'pages/mine/index', 21 'pages/mine/index',
......
1 +/*
2 + * @Date: 2026-01-30 16:10:01
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2026-01-30 16:11:38
5 + * @FilePath: /manulife-weapp/src/pages/product-detail/index.config.js
6 + * @Description: 文件描述
7 + */
8 +export default {
9 + navigationBarTitleText: '产品详情',
10 + enablePullDownRefresh: true,
11 + backgroundColor: '#F9FAFB',
12 + navigationStyle: 'custom'
13 +}
1 +<!--
2 + * @Date: 2026-01-30
3 + * @Description: 产品详情页
4 +-->
5 +<template>
6 + <div class="min-h-screen bg-[#F9FAFB] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
7 + <NavHeader title="产品详情" />
8 +
9 + <!-- Banner Image -->
10 + <div class="w-full h-[420rpx] relative">
11 + <img
12 + class="w-full h-full object-cover"
13 + :src="bannerImage"
14 + mode="aspectFill"
15 + />
16 + <div class="absolute top-[32rpx] right-[32rpx] bg-red-500 text-white text-[24rpx] px-[16rpx] py-[8rpx] rounded-full shadow-sm">
17 + 热卖
18 + </div>
19 + </div>
20 +
21 + <!-- Product Header -->
22 + <div class="relative mt-[-40rpx] bg-white rounded-t-[40rpx] px-[40rpx] pt-[48rpx] pb-[40rpx] z-10">
23 + <h1 class="text-[#1F2937] text-[44rpx] font-bold mb-[24rpx]">终身寿险尊享版</h1>
24 +
25 + <div class="flex flex-wrap gap-[16rpx]">
26 + <div class="px-[16rpx] py-[6rpx] bg-red-50 rounded-[8rpx]">
27 + <span class="text-red-600 text-[24rpx]">收益率3.5%</span>
28 + </div>
29 + <div class="px-[16rpx] py-[6rpx] bg-orange-50 rounded-[8rpx]">
30 + <span class="text-orange-600 text-[24rpx]">5年超值</span>
31 + </div>
32 + <div class="px-[16rpx] py-[6rpx] bg-green-50 rounded-[8rpx]">
33 + <span class="text-green-600 text-[24rpx]">保证收益万能</span>
34 + </div>
35 + </div>
36 + </div>
37 +
38 + <!-- Stats Grid -->
39 + <div class="px-[32rpx] mt-[24rpx]">
40 + <div class="grid grid-cols-2 gap-[24rpx]">
41 + <div
42 + v-for="(item, index) in stats"
43 + :key="index"
44 + class="bg-white rounded-[24rpx] p-[32rpx] border border-gray-100"
45 + >
46 + <div class="text-[#6B7280] text-[24rpx] mb-[12rpx]">{{ item.label }}</div>
47 + <div class="text-[#1F2937] text-[30rpx] font-medium">{{ item.value }}</div>
48 + </div>
49 + </div>
50 + </div>
51 +
52 + <!-- Product Features -->
53 + <div class="px-[32rpx] mt-[32rpx]">
54 + <div class="bg-white rounded-[32rpx] p-[40rpx]">
55 + <h2 class="text-[#1F2937] text-[32rpx] font-bold mb-[32rpx]">产品特色</h2>
56 + <div class="flex flex-col gap-[32rpx]">
57 + <div v-for="(feature, index) in features" :key="index" class="flex items-start">
58 + <div class="w-[48rpx] h-[48rpx] rounded-full bg-blue-50 flex items-center justify-center mr-[24rpx] flex-shrink-0">
59 + <IconFont name="Check" size="14" color="#2563EB" />
60 + </div>
61 + <div class="flex-1">
62 + <div class="text-[#1F2937] text-[28rpx] font-medium leading-[1.4]">{{ feature.title }}</div>
63 + <div class="text-[#6B7280] text-[24rpx] mt-[8rpx] leading-[1.4]">{{ feature.desc }}</div>
64 + </div>
65 + </div>
66 + </div>
67 + </div>
68 + </div>
69 +
70 + <!-- Attachments -->
71 + <div class="px-[32rpx] mt-[32rpx]">
72 + <div class="bg-white rounded-[32rpx] p-[40rpx]">
73 + <h2 class="text-[#1F2937] text-[32rpx] font-bold mb-[32rpx]">相关附件</h2>
74 + <div class="flex flex-col gap-[24rpx]">
75 + <div
76 + v-for="(file, index) in files"
77 + :key="index"
78 + class="flex items-center justify-between p-[24rpx] bg-gray-50 rounded-[16rpx]"
79 + >
80 + <div class="flex items-center flex-1 mr-[24rpx]">
81 + <IconFont name="Order" size="24" color="#EF4444" customClass="mr-[24rpx]" />
82 + <div class="flex flex-col">
83 + <span class="text-[#1F2937] text-[28rpx] font-medium mb-[4rpx] line-clamp-1">{{ file.name }}</span>
84 + <span class="text-[#9CA3AF] text-[24rpx]">{{ file.size }}</span>
85 + </div>
86 + </div>
87 + <IconFont name="Download" size="20" color="#9CA3AF" />
88 + </div>
89 + </div>
90 + </div>
91 + </div>
92 +
93 + <!-- TabBar -->
94 + <TabBar />
95 + </div>
96 +</template>
97 +
98 +<script setup>
99 +import { ref } from 'vue'
100 +import NavHeader from '@/components/NavHeader.vue'
101 +import TabBar from '@/components/TabBar.vue'
102 +import IconFont from '@/components/IconFont.vue'
103 +
104 +// Random banner image
105 +const bannerImage = `https://picsum.photos/seed/${Math.floor(Math.random() * 1000)}/750/420`
106 +
107 +const stats = ref([
108 + { label: '投保年龄', value: '30天-70周岁' },
109 + { label: '保障期限', value: '终身' },
110 + { label: '缴费方式', value: '3/5/10年交' },
111 + { label: '起投金额', value: '10000元起' }
112 +])
113 +
114 +const features = ref([
115 + { title: '身故保险金', desc: '赔付100%基本保额，给家人留爱不留债' },
116 + { title: '全残保险金', desc: '赔付100%基本保额，生活有保障' },
117 + { title: '保费豁免', desc: '确诊重疾后免交剩余保费，保障继续有效' },
118 + { title: '保单贷款', desc: '最高可贷现金价值80%，资金周转灵活' }
119 +])
120 +
121 +const files = ref([
122 + { name: '产品条款.pdf', size: '2.3MB' },
123 + { name: '投保须知.pdf', size: '1.8MB' },
124 + { name: '健康告知.pdf', size: '980KB' },
125 + { name: '保险责任说明.pdf', size: '1.5MB' }
126 +])
127 +</script>