hookehuyr

refactor(pages/index): 重构首页并移除离线功能相关代码

- 删除旧版首页 Less 样式文件,全面采用 Tailwind CSS
- 更新首页配置,将导航栏标题改为"臻奇智荟圈"
- 重构首页 Vue 组件,适配新设计稿并使用 Taro + Vue 3 Setup 语法
- 移除所有离线功能相关逻辑、网络状态监听和弱网缓存代码
- 清理应用配置文件,移除未使用的页面路由
- 更新 CHANGELOG 文档记录所有变更
- 添加设计稿相关资源文件
...@@ -8,3 +8,31 @@ All notable changes to this project will be documented in this file. ...@@ -8,3 +8,31 @@ All notable changes to this project will be documented in this file.
8 - 初始化项目 Git 仓库 8 - 初始化项目 Git 仓库
9 - 创建 .gitignore 配置文件 9 - 创建 .gitignore 配置文件
10 - 创建并切换到 develop 分支 10 - 创建并切换到 develop 分支
11 +
12 +### Changed
13 +- 暂时禁用授权模式功能 (`ENABLE_AUTH_MODE = false`)
14 +- 拦截所有授权检查与自动跳转登录逻辑
15 +- 禁用 401 自动续期拦截器
16 +- 暂时禁用离线模式功能 (`ENABLE_OFFLINE_MODE = false`)
17 +- 拦截所有离线缓存读写操作与轮询逻辑
18 +- 修复 `src/pages/index/index.vue``ENABLE_OFFLINE_MODE` 引用缺失导致的报错
19 +- 优化 `src/pages/index/index.vue` 减少不必要的网络监听资源消耗
20 +- 重构首页 (`src/pages/index`),使用 Taro + Vue 3 Setup 语法实现
21 +- 适配 `docs/design/manulife-V1/首页` 设计稿,精确还原 UI
22 +- 转换 CSS 为 Less,并使用 `rpx` 单位适配小程序响应式布局
23 +- 整合离线网络检测与状态管理逻辑
24 +- 更新首页导航栏标题为 "臻奇智荟圈"
25 +- 重构首页样式 (`src/pages/index`),全面采用 Tailwind CSS 替代 Less
26 +- 替换静态图片资源为 Picsum 随机图源,提升演示灵活性
27 +- 集成 NutUI 图标组件库,替换原有 SVG/图片图标
28 +
29 +### Removed
30 +- 删除项目所有离线功能相关逻辑
31 +- 移除 `src/composables/useOfflineBookingCache.js``useOfflineBookingCachePolling.js`
32 +- 清理 `src/app.js` 中的离线初始化代码
33 +- 清理 `src/utils/request.js` 中的弱网缓存拦截与提示逻辑
34 +- 清理 `src/pages/index/index.vue` 中的网络状态监听与离线模式代码
35 +- 移除 `src/utils/uiText.js` 及相关引用
36 +- 移除 `src/api/index.js` 中的离线专用接口定义
37 +- 更新配置文件,移除 `ENABLE_OFFLINE_MODE` 开关
38 +- 修复构建告警:移除首页残留的 `ENABLE_OFFLINE_MODE``@/utils/uiText` 引用
......
1 +.page {
2 + position: relative;
3 + width: 393px;
4 + height: 1194px;
5 + overflow: hidden;
6 +}
7 +
8 +.box_1 {
9 + background-color: rgba(30, 58, 138, 1);
10 + width: 393px;
11 + padding: 12px 20px 12px 20px;
12 +}
13 +
14 +.text_1 {
15 + overflow-wrap: break-word;
16 + color: rgba(255, 255, 255, 1);
17 + font-size: 14px;
18 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
19 + font-weight: normal;
20 + text-align: left;
21 + white-space: nowrap;
22 + line-height: 20px;
23 +}
24 +
25 +.image_1 {
26 + width: 64px;
27 + height: 20px;
28 +}
29 +
30 +.box_2 {
31 + background-color: rgba(249, 250, 251, 1);
32 + margin-top: 124px;
33 + padding-top: 24px;
34 +}
35 +
36 +.group_1 {
37 + box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
38 + background-color: rgba(255, 255, 255, 1);
39 + border-radius: 16px;
40 + align-self: center;
41 + width: 353px;
42 + padding: 20px 41px 23px 41px;
43 +}
44 +
45 +.grid_1 {
46 + width: 272px;
47 + height: 175px;
48 + flex-wrap: wrap;
49 +}
50 +
51 +.image-text_1 {
52 + width: 52px;
53 + height: 78px;
54 + margin: 0 58px 19px 0;
55 +}
56 +
57 +.image-text_1:nth-child(3n) {
58 + margin-right: 0;
59 +}
60 +.image-text_1:nth-last-child(-n + 3) {
61 + margin-bottom: 0;
62 +}
63 +
64 +.image_2 {
65 + width: 52px;
66 + height: 52px;
67 +}
68 +
69 +.text-group_1 {
70 + width: 65px;
71 + overflow-wrap: break-word;
72 + color: rgba(31, 41, 55, 1);
73 + font-size: 13px;
74 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
75 + font-weight: normal;
76 + text-align: left;
77 + white-space: nowrap;
78 + line-height: 16px;
79 + margin: 10px 7px 0 6px;
80 +}
81 +
82 +.group_2 {
83 + box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
84 + background-color: rgba(255, 255, 255, 1);
85 + border-radius: 16px;
86 + width: 353px;
87 + align-self: center;
88 + margin-top: 12px;
89 + padding: 16px 16px 16px 16px;
90 +}
91 +
92 +.text-wrapper_1 {
93 + width: 321px;
94 +}
95 +
96 +.text_2 {
97 + overflow-wrap: break-word;
98 + color: rgba(31, 41, 55, 1);
99 + font-size: 16px;
100 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
101 + font-weight: normal;
102 + text-align: left;
103 + white-space: nowrap;
104 + line-height: 18px;
105 +}
106 +
107 +.text_3 {
108 + overflow-wrap: break-word;
109 + color: rgba(37, 99, 235, 1);
110 + font-size: 13px;
111 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
112 + font-weight: normal;
113 + text-align: left;
114 + white-space: nowrap;
115 + line-height: 16px;
116 + margin-top: 2px;
117 +}
118 +
119 +.box_3 {
120 + background-color: rgba(249, 250, 251, 1);
121 + border-radius: 12px;
122 + margin-top: 22px;
123 + padding: 14px 15px 14px 14px;
124 +}
125 +
126 +.text_4 {
127 + overflow-wrap: break-word;
128 + color: rgba(31, 41, 55, 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: 17px;
135 + margin-right: 96px;
136 +}
137 +
138 +.grid_2 {
139 + width: 225px;
140 + height: 50px;
141 + flex-wrap: wrap;
142 + margin: 13px 67px 0 0;
143 +}
144 +
145 +.text-wrapper_2 {
146 + background-color: rgba(254, 226, 226, 1);
147 + border-radius: 4px;
148 + height: 22px;
149 + width: 75px;
150 + margin: 0 6px 6px 0;
151 + padding: 3px 8px 3px 8px;
152 +}
153 +
154 +.text_5 {
155 + height: 16px;
156 + overflow-wrap: break-word;
157 + color: rgba(220, 38, 38, 1);
158 + font-size: 11px;
159 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
160 + font-weight: normal;
161 + text-align: left;
162 + white-space: nowrap;
163 + line-height: 13px;
164 +}
165 +
166 +.text-wrapper_3 {
167 + background-color: rgba(254, 215, 170, 1);
168 + border-radius: 4px;
169 + height: 22px;
170 + width: 56px;
171 + margin: 0 6px 6px 0;
172 + padding: 3px 8px 6px 8px;
173 +}
174 +
175 +.text_6 {
176 + overflow-wrap: break-word;
177 + color: rgba(234, 88, 12, 1);
178 + font-size: 11px;
179 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
180 + font-weight: normal;
181 + text-align: left;
182 + white-space: nowrap;
183 + line-height: 13px;
184 +}
185 +
186 +.text-wrapper_4 {
187 + background-color: rgba(209, 250, 229, 1);
188 + border-radius: 4px;
189 + height: 22px;
190 + margin-bottom: 6px;
191 + width: 82px;
192 + padding: 3px 8px 6px 8px;
193 +}
194 +
195 +.text_7 {
196 + overflow-wrap: break-word;
197 + color: rgba(5, 150, 105, 1);
198 + font-size: 11px;
199 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
200 + font-weight: normal;
201 + text-align: left;
202 + white-space: nowrap;
203 + line-height: 13px;
204 +}
205 +
206 +.text-wrapper_5 {
207 + background-color: rgba(219, 234, 254, 1);
208 + border-radius: 4px;
209 + height: 22px;
210 + margin-right: NaNpx;
211 + margin-bottom: 6px;
212 + width: 70px;
213 + padding: 3px 8px 3px 8px;
214 +}
215 +
216 +.text_8 {
217 + height: 16px;
218 + overflow-wrap: break-word;
219 + color: rgba(37, 99, 235, 1);
220 + font-size: 11px;
221 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
222 + font-weight: normal;
223 + text-align: left;
224 + white-space: nowrap;
225 + line-height: 13px;
226 +}
227 +
228 +.section_1 {
229 + width: 292px;
230 + margin-top: 12px;
231 +}
232 +
233 +.text-wrapper_6 {
234 + background-color: rgba(255, 255, 255, 1);
235 + border-radius: 8px;
236 + border: 1px solid rgba(37, 99, 235, 1);
237 + padding: 7px 44px 10px 44px;
238 +}
239 +
240 +.text_9 {
241 + overflow-wrap: break-word;
242 + color: rgba(37, 99, 235, 1);
243 + font-size: 13px;
244 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
245 + font-weight: normal;
246 + text-align: center;
247 + white-space: nowrap;
248 + line-height: 16px;
249 +}
250 +
251 +.text-wrapper_7 {
252 + background-color: rgba(37, 99, 235, 1);
253 + border-radius: 8px;
254 + padding: 8px 51px 11px 52px;
255 +}
256 +
257 +.text_10 {
258 + overflow-wrap: break-word;
259 + color: rgba(255, 255, 255, 1);
260 + font-size: 13px;
261 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
262 + font-weight: normal;
263 + text-align: center;
264 + white-space: nowrap;
265 + line-height: 16px;
266 +}
267 +
268 +.box_4 {
269 + background-color: rgba(249, 250, 251, 1);
270 + border-radius: 12px;
271 + margin-top: 12px;
272 + padding: 14px 15px 14px 14px;
273 +}
274 +
275 +.text_11 {
276 + overflow-wrap: break-word;
277 + color: rgba(31, 41, 55, 1);
278 + font-size: 14px;
279 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
280 + font-weight: normal;
281 + text-align: left;
282 + white-space: nowrap;
283 + line-height: 17px;
284 + margin-right: 110px;
285 +}
286 +
287 +.block_1 {
288 + width: 198px;
289 + margin: 13px 94px 0 0;
290 +}
291 +
292 +.text-wrapper_8 {
293 + background-color: rgba(254, 226, 226, 1);
294 + border-radius: 4px;
295 + padding: 3px 8px 3px 8px;
296 +}
297 +
298 +.text_12 {
299 + height: 16px;
300 + overflow-wrap: break-word;
301 + color: rgba(220, 38, 38, 1);
302 + font-size: 11px;
303 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
304 + font-weight: normal;
305 + text-align: left;
306 + white-space: nowrap;
307 + line-height: 13px;
308 +}
309 +
310 +.text-wrapper_9 {
311 + background-color: rgba(254, 215, 170, 1);
312 + border-radius: 4px;
313 + padding: 3px 8px 6px 8px;
314 +}
315 +
316 +.text_13 {
317 + overflow-wrap: break-word;
318 + color: rgba(234, 88, 12, 1);
319 + font-size: 11px;
320 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
321 + font-weight: normal;
322 + text-align: left;
323 + white-space: nowrap;
324 + line-height: 13px;
325 +}
326 +
327 +.text-wrapper_10 {
328 + background-color: rgba(209, 250, 229, 1);
329 + border-radius: 4px;
330 + padding: 3px 8px 6px 8px;
331 +}
332 +
333 +.text_14 {
334 + overflow-wrap: break-word;
335 + color: rgba(5, 150, 105, 1);
336 + font-size: 11px;
337 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
338 + font-weight: normal;
339 + text-align: left;
340 + white-space: nowrap;
341 + line-height: 13px;
342 +}
343 +
344 +.block_2 {
345 + width: 292px;
346 + margin-top: 12px;
347 +}
348 +
349 +.text-wrapper_11 {
350 + background-color: rgba(255, 255, 255, 1);
351 + border-radius: 8px;
352 + border: 1px solid rgba(37, 99, 235, 1);
353 + padding: 7px 44px 10px 44px;
354 +}
355 +
356 +.text_15 {
357 + overflow-wrap: break-word;
358 + color: rgba(37, 99, 235, 1);
359 + font-size: 13px;
360 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
361 + font-weight: normal;
362 + text-align: center;
363 + white-space: nowrap;
364 + line-height: 16px;
365 +}
366 +
367 +.text-wrapper_12 {
368 + background-color: rgba(37, 99, 235, 1);
369 + border-radius: 8px;
370 + padding: 8px 51px 11px 52px;
371 +}
372 +
373 +.text_16 {
374 + overflow-wrap: break-word;
375 + color: rgba(255, 255, 255, 1);
376 + font-size: 13px;
377 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
378 + font-weight: normal;
379 + text-align: center;
380 + white-space: nowrap;
381 + line-height: 16px;
382 +}
383 +
384 +.group_3 {
385 + box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
386 + background-color: rgba(255, 255, 255, 1);
387 + border-radius: 16px;
388 + width: 353px;
389 + align-self: center;
390 + margin-top: 16px;
391 + padding: 16px 16px 16px 16px;
392 +}
393 +
394 +.text-wrapper_13 {
395 + width: 321px;
396 +}
397 +
398 +.text_17 {
399 + overflow-wrap: break-word;
400 + color: rgba(31, 41, 55, 1);
401 + font-size: 16px;
402 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
403 + font-weight: normal;
404 + text-align: left;
405 + white-space: nowrap;
406 + line-height: 18px;
407 +}
408 +
409 +.text_18 {
410 + overflow-wrap: break-word;
411 + color: rgba(37, 99, 235, 1);
412 + font-size: 13px;
413 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
414 + font-weight: normal;
415 + text-align: left;
416 + white-space: nowrap;
417 + line-height: 16px;
418 + margin-top: 2px;
419 +}
420 +
421 +.group_4 {
422 + position: relative;
423 + width: 321px;
424 + margin-top: 22px;
425 + padding: 41px 0 1px 102px;
426 +}
427 +
428 +.image-text_2 {
429 + width: 72px;
430 + margin-top: 1px;
431 +}
432 +
433 +.thumbnail_1 {
434 + width: 12px;
435 + height: 12px;
436 + margin: 2px 0 3px 0;
437 +}
438 +
439 +.text-group_2 {
440 + height: 17px;
441 + overflow-wrap: break-word;
442 + color: rgba(156, 163, 175, 1);
443 + font-size: 12px;
444 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
445 + font-weight: normal;
446 + text-align: left;
447 + white-space: nowrap;
448 + line-height: 15px;
449 +}
450 +
451 +.text_19 {
452 + overflow-wrap: break-word;
453 + color: rgba(37, 99, 235, 1);
454 + font-size: 13px;
455 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
456 + font-weight: normal;
457 + text-align: left;
458 + white-space: nowrap;
459 + line-height: 16px;
460 +}
461 +
462 +.image-text_3 {
463 + position: absolute;
464 + left: 0;
465 + top: 0;
466 + width: 288px;
467 + height: 60px;
468 +}
469 +
470 +.image_3 {
471 + width: 90px;
472 + height: 60px;
473 +}
474 +
475 +.text-group_3 {
476 + overflow-wrap: break-word;
477 + color: rgba(31, 41, 55, 1);
478 + font-size: 14px;
479 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
480 + font-weight: normal;
481 + text-align: left;
482 + white-space: nowrap;
483 + line-height: 20px;
484 +}
485 +
486 +.image_4 {
487 + width: 321px;
488 + height: 1px;
489 + margin-top: 14px;
490 +}
491 +
492 +.group_5 {
493 + position: relative;
494 + margin-top: 14px;
495 + padding: 42px 147px 1px 102px;
496 +}
497 +
498 +.image-text_4 {
499 + width: 72px;
500 +}
501 +
502 +.thumbnail_2 {
503 + width: 12px;
504 + height: 12px;
505 + margin: 3px 0 2px 0;
506 +}
507 +
508 +.text-group_4 {
509 + height: 17px;
510 + overflow-wrap: break-word;
511 + color: rgba(156, 163, 175, 1);
512 + font-size: 12px;
513 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
514 + font-weight: normal;
515 + text-align: left;
516 + white-space: nowrap;
517 + line-height: 15px;
518 +}
519 +
520 +.image-text_5 {
521 + position: absolute;
522 + left: 0;
523 + top: 0;
524 + width: 321px;
525 + height: 60px;
526 +}
527 +
528 +.image_5 {
529 + width: 90px;
530 + height: 60px;
531 +}
532 +
533 +.text-group_5 {
534 +}
535 +
536 +.text_20 {
537 + overflow-wrap: break-word;
538 + color: rgba(31, 41, 55, 1);
539 + font-size: 14px;
540 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
541 + font-weight: normal;
542 + text-align: left;
543 + white-space: nowrap;
544 + line-height: 20px;
545 + margin-right: 23px;
546 +}
547 +
548 +.text_21 {
549 + height: 19px;
550 + overflow-wrap: break-word;
551 + color: rgba(37, 99, 235, 1);
552 + font-size: 13px;
553 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
554 + font-weight: normal;
555 + text-align: left;
556 + white-space: nowrap;
557 + line-height: 16px;
558 + margin: 21px 0 0 191px;
559 +}
560 +
561 +.image_6 {
562 + width: 321px;
563 + height: 1px;
564 + margin-top: 14px;
565 +}
566 +
567 +.group_6 {
568 + position: relative;
569 + width: 321px;
570 + margin-top: 14px;
571 + padding: 41px 0 1px 102px;
572 +}
573 +
574 +.image-text_6 {
575 + width: 72px;
576 + margin-top: 1px;
577 +}
578 +
579 +.thumbnail_3 {
580 + width: 12px;
581 + height: 12px;
582 + margin: 2px 0 3px 0;
583 +}
584 +
585 +.text-group_6 {
586 + height: 17px;
587 + overflow-wrap: break-word;
588 + color: rgba(156, 163, 175, 1);
589 + font-size: 12px;
590 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
591 + font-weight: normal;
592 + text-align: left;
593 + white-space: nowrap;
594 + line-height: 15px;
595 +}
596 +
597 +.text_22 {
598 + overflow-wrap: break-word;
599 + color: rgba(37, 99, 235, 1);
600 + font-size: 13px;
601 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
602 + font-weight: normal;
603 + text-align: left;
604 + white-space: nowrap;
605 + line-height: 16px;
606 +}
607 +
608 +.image-text_7 {
609 + position: absolute;
610 + left: 0;
611 + top: 0;
612 + width: 284px;
613 + height: 60px;
614 +}
615 +
616 +.image_7 {
617 + width: 90px;
618 + height: 60px;
619 +}
620 +
621 +.text-group_7 {
622 + overflow-wrap: break-word;
623 + color: rgba(31, 41, 55, 1);
624 + font-size: 14px;
625 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
626 + font-weight: normal;
627 + text-align: left;
628 + white-space: nowrap;
629 + line-height: 20px;
630 +}
631 +
632 +.group_7 {
633 + background-color: rgba(255, 255, 255, 1);
634 + margin-top: 7px;
635 + padding-bottom: 8px;
636 +}
637 +
638 +.image_8 {
639 + width: 393px;
640 + height: 1px;
641 +}
642 +
643 +.list_1 {
644 + width: 289px;
645 + height: 45px;
646 + align-self: center;
647 + margin-top: 9px;
648 + justify-content: space-between;
649 +}
650 +
651 +.image-text_8 {
652 + margin: 0 103px 2px 0;
653 +}
654 +
655 +.label_1 {
656 + width: 24px;
657 + height: 24px;
658 +}
659 +
660 +.text-group_8 {
661 + width: 35px;
662 + overflow-wrap: break-word;
663 + font-size: 12px;
664 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
665 + font-weight: normal;
666 + text-align: left;
667 + white-space: nowrap;
668 + line-height: 15px;
669 + margin-top: 4px;
670 +}
671 +
672 +.image_9 {
673 + width: 134px;
674 + height: 5px;
675 + align-self: center;
676 + margin-top: 5px;
677 +}
678 +
679 +.box_5 {
680 + position: absolute;
681 + left: 0;
682 + top: 44px;
683 + width: 393px;
684 + height: 136px;
685 + background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga686e6f82ccd9e11b8a596cdf8bab92f63b49a299048a9e4b8a59748f0495ebb)
686 + 100% no-repeat;
687 + background-size: 100% 100%;
688 + padding: 20px 20px 24px 20px;
689 +}
690 +
691 +.text_23 {
692 + height: 22px;
693 + overflow-wrap: break-word;
694 + color: rgba(255, 255, 255, 1);
695 + font-size: 22px;
696 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
697 + font-weight: normal;
698 + text-align: center;
699 + white-space: nowrap;
700 + line-height: 26px;
701 + align-self: center;
702 +}
703 +
704 +.box_6 {
705 + background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPngba3204d9119c95152a599037aa982624b235e9d764e91b8e429d9b1600b049f6)
706 + 100% no-repeat;
707 + background-size: 100% 100%;
708 + margin-top: 30px;
709 + padding: 10px 173px 11px 14px;
710 +}
711 +
712 +.image-text_9 {
713 + width: 166px;
714 +}
715 +
716 +.thumbnail_4 {
717 + width: 18px;
718 + height: 18px;
719 + margin-top: 1px;
720 +}
721 +
722 +.text-group_9 {
723 + overflow-wrap: break-word;
724 + color: rgba(255, 255, 255, 0.7);
725 + font-size: 14px;
726 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
727 + font-weight: normal;
728 + text-align: left;
729 + white-space: nowrap;
730 + line-height: 17px;
731 +}
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/SketchPng41ebf05313566695702fdc28688b6ed52dbbba555ddd1f6c423593ff63b3f65e"
9 + />
10 + </div>
11 + <div class="box_2 flex-col">
12 + <div class="group_1 flex-col">
13 + <div class="grid_1 flex-row">
14 + <div
15 + class="image-text_1 flex-col"
16 + v-for="(item, index) in loopData0"
17 + :key="index"
18 + >
19 + <img
20 + class="image_2"
21 + referrerpolicy="no-referrer"
22 + :src="item.lanhuimage0"
23 + />
24 + <span class="text-group_1" v-html="item.lanhutext0"></span>
25 + </div>
26 + </div>
27 + </div>
28 + <div class="group_2 flex-col">
29 + <div class="text-wrapper_1 flex-row justify-between">
30 + <span class="text_2">热卖产品:</span>
31 + <span class="text_3">查看更多</span>
32 + </div>
33 + <div class="box_3 flex-col">
34 + <span class="text_4">家庭财富传承保障计划(分红)</span>
35 + <div class="grid_2 flex-row">
36 + <div class="text-wrapper_2 flex-col">
37 + <span class="text_5">收益率3.5%</span>
38 + </div>
39 + <div class="text-wrapper_3 flex-col">
40 + <span class="text_6">5年超值</span>
41 + </div>
42 + <div class="text-wrapper_4 flex-col">
43 + <span class="text_7">保证收益万能</span>
44 + </div>
45 + <div class="text-wrapper_5 flex-col">
46 + <span class="text_8">限时2.00%</span>
47 + </div>
48 + </div>
49 + <div class="section_1 flex-row justify-between">
50 + <div class="text-wrapper_6 flex-col">
51 + <span class="text_9">产品资料</span>
52 + </div>
53 + <div class="text-wrapper_7 flex-col">
54 + <span class="text_10">计划书</span>
55 + </div>
56 + </div>
57 + </div>
58 + <div class="box_4 flex-col">
59 + <span class="text_11">儿童教育金储备方案(分红)</span>
60 + <div class="block_1 flex-row justify-between">
61 + <div class="text-wrapper_8 flex-col">
62 + <span class="text_12">收益率4.2%</span>
63 + </div>
64 + <div class="text-wrapper_9 flex-col">
65 + <span class="text_13">10年期</span>
66 + </div>
67 + <div class="text-wrapper_10 flex-col">
68 + <span class="text_14">教育专属</span>
69 + </div>
70 + </div>
71 + <div class="block_2 flex-row justify-between">
72 + <div class="text-wrapper_11 flex-col">
73 + <span class="text_15">产品资料</span>
74 + </div>
75 + <div class="text-wrapper_12 flex-col">
76 + <span class="text_16">计划书</span>
77 + </div>
78 + </div>
79 + </div>
80 + </div>
81 + <div class="group_3 flex-col">
82 + <div class="text-wrapper_13 flex-row justify-between">
83 + <span class="text_17">本周热门资料</span>
84 + <span class="text_18">查看更多</span>
85 + </div>
86 + <div class="group_4 flex-row justify-between">
87 + <div class="image-text_2 flex-row justify-between">
88 + <img
89 + class="thumbnail_1"
90 + referrerpolicy="no-referrer"
91 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbbfb74181183949bab3fd24840ff57318c45a0419d0256444fd1c4ef1a79c138"
92 + />
93 + <span class="text-group_2">256人学习</span>
94 + </div>
95 + <span class="text_19">78%</span>
96 + <div class="image-text_3 flex-row justify-between">
97 + <img
98 + class="image_3"
99 + referrerpolicy="no-referrer"
100 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng1be951f3bd8f40d9a448b411caf782306928530c03c5da114f9ce990a51f9c12"
101 + />
102 + <span class="text-group_3">2024年保险市场趋势分析报告</span>
103 + </div>
104 + </div>
105 + <img
106 + class="image_4"
107 + referrerpolicy="no-referrer"
108 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf546c69e1a7b33e53d1d0acd31c237f7b1c75a5bd856058be438277083ae4271"
109 + />
110 + <div class="group_5 flex-row">
111 + <div class="image-text_4 flex-row justify-between">
112 + <img
113 + class="thumbnail_2"
114 + referrerpolicy="no-referrer"
115 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbbfb74181183949bab3fd24840ff57318c45a0419d0256444fd1c4ef1a79c138"
116 + />
117 + <span class="text-group_4">189人学习</span>
118 + </div>
119 + <div class="image-text_5 flex-row justify-between">
120 + <img
121 + class="image_5"
122 + referrerpolicy="no-referrer"
123 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng7ed1867c614047c5556036c68d3e0bc23adeec0a03a1f93504a92bd2429e78d2"
124 + />
125 + <div class="text-group_5 flex-col">
126 + <span class="text_20">高净值客户需求分析与产品匹配</span>
127 + <span class="text_21">65%</span>
128 + </div>
129 + </div>
130 + </div>
131 + <img
132 + class="image_6"
133 + referrerpolicy="no-referrer"
134 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf546c69e1a7b33e53d1d0acd31c237f7b1c75a5bd856058be438277083ae4271"
135 + />
136 + <div class="group_6 flex-row justify-between">
137 + <div class="image-text_6 flex-row justify-between">
138 + <img
139 + class="thumbnail_3"
140 + referrerpolicy="no-referrer"
141 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbbfb74181183949bab3fd24840ff57318c45a0419d0256444fd1c4ef1a79c138"
142 + />
143 + <span class="text-group_6">142人学习</span>
144 + </div>
145 + <span class="text_22">52%</span>
146 + <div class="image-text_7 flex-row justify-between">
147 + <img
148 + class="image_7"
149 + referrerpolicy="no-referrer"
150 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng6e0e05483dc698cbc4497f50b3bd13605c7a742843afd58d656615bf0f12c3c9"
151 + />
152 + <span class="text-group_7">保险合同条款解读与风险提示</span>
153 + </div>
154 + </div>
155 + </div>
156 + <div class="group_7 flex-col">
157 + <img
158 + class="image_8"
159 + referrerpolicy="no-referrer"
160 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
161 + />
162 + <div class="list_1 flex-row">
163 + <div
164 + class="image-text_8 flex-col"
165 + v-for="(item, index) in loopData1"
166 + :key="index"
167 + >
168 + <img
169 + class="label_1"
170 + referrerpolicy="no-referrer"
171 + :src="item.lanhuimage0"
172 + />
173 + <span
174 + class="text-group_8"
175 + :style="{ color: item.lanhufontColor0 }"
176 + v-html="item.lanhutext0"
177 + ></span>
178 + </div>
179 + </div>
180 + <img
181 + class="image_9"
182 + referrerpolicy="no-referrer"
183 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd87bce34194e46404c7ac21a64bed8e9f8454451baaf336c5201241680a20c9d"
184 + />
185 + </div>
186 + </div>
187 + <div class="box_5 flex-col">
188 + <span class="text_23">臻奇智荟圈</span>
189 + <div class="box_6 flex-row">
190 + <div class="image-text_9 flex-row justify-between">
191 + <img
192 + class="thumbnail_4"
193 + referrerpolicy="no-referrer"
194 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge70b40998a55fd5afcd7af006a030581403739d95f19ae93ec445e2c7a3f394e"
195 + />
196 + <span class="text-group_9">搜索培训资料、案例...</span>
197 + </div>
198 + </div>
199 + </div>
200 + </div>
201 +</template>
202 +<script>
203 +export default {
204 + data() {
205 + return {
206 + loopData0: [
207 + {
208 + lanhuimage0:
209 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng1d33b0dff470a17d9a986f1713e25a3bd12449943610bdd67a96ca95cccab96e',
210 + lanhutext0: '计划书',
211 + },
212 + {
213 + lanhuimage0:
214 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng850afb7cff66e9825b628363734d7a475c4664cf264679159b1dfd5124b73113',
215 + lanhutext0: '入职相关',
216 + },
217 + {
218 + lanhuimage0:
219 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbe3ecbbad98de984b03f3b9ea90551034f64caaeb54fcb543509b2871f9e6e66',
220 + lanhutext0: '签单相关',
221 + },
222 + {
223 + lanhuimage0:
224 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb50c7f823c501e2898b6f1ca071b3695e9fefc551f83ff7c3c9797c92626916f',
225 + lanhutext0: '家办相关',
226 + },
227 + {
228 + lanhuimage0:
229 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge93be123da82ca55f1b40c63bcb07c7efd19985397de7666fcfa7d8202ca22df',
230 + lanhutext0: '产品知识库',
231 + },
232 + {
233 + lanhuimage0:
234 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf249d43500cae9c683301328abadc586ef23a2e14f09f226a4209bf5ca874717',
235 + lanhutext0: '工具箱',
236 + },
237 + ],
238 + loopData1: [
239 + {
240 + lanhuimage0:
241 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng720f91cb0b105e7be4aac241a0575bb0a7d3c26f39519a121ac7141bfe84c0c5',
242 + lanhutext0: '首页',
243 + lanhufontColor0: 'rgba(37,99,235,1.000000)',
244 + },
245 + {
246 + lanhuimage0:
247 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng355fd7cd6d5c986d30655db577fe8e511f878d37c9506e77dc53be60228d6453',
248 + lanhutext0: 'AI答疑',
249 + lanhufontColor0: 'rgba(156,163,175,1.000000)',
250 + },
251 + {
252 + lanhuimage0:
253 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng13ceb19b113cdc23fbf47e15ccf14d27aec044ad2c13f88539fc8459993ade6f',
254 + lanhutext0: '我的',
255 + lanhufontColor0: 'rgba(156,163,175,1.000000)',
256 + },
257 + ],
258 + constants: {},
259 + };
260 + },
261 + methods: {},
262 +};
263 +</script>
264 +<style src="./common.css" />
265 +<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-14 21:35:58 4 + * @LastEditTime: 2026-01-29 18:17:31
5 - * @FilePath: /xyxBooking-weapp/src/app.config.js 5 + * @FilePath: /manulife-weapp/src/app.config.js
6 * @Description: 小程序配置文件 6 * @Description: 小程序配置文件
7 */ 7 */
8 const pages = [ 8 const pages = [
9 'pages/index/index', 9 'pages/index/index',
10 'pages/auth/index', 10 'pages/auth/index',
11 - 'pages/notice/index',
12 - 'pages/booking/index',
13 - 'pages/submit/index',
14 - 'pages/addVisitor/index',
15 - 'pages/success/index',
16 - 'pages/bookingCode/index',
17 - 'pages/bookingList/index',
18 - 'pages/bookingDetail/index',
19 - 'pages/me/index',
20 - 'pages/search/index',
21 - 'pages/visitorList/index',
22 - 'pages/volunteerLogin/index',
23 - 'pages/verificationResult/index',
24 - 'pages/weakNetwork/index',
25 - 'pages/offlineBookingCode/index',
26 - 'pages/offlineBookingList/index',
27 - 'pages/offlineBookingDetail/index',
28 ] 11 ]
29 12
30 if (process.env.NODE_ENV === 'development') { 13 if (process.env.NODE_ENV === 'development') {
31 - pages.push('pages/nfcTest/index') 14 + // pages.push('pages/nfcTest/index')
32 - pages.push('pages/tailwindTest/index') 15 + // pages.push('pages/tailwindTest/index')
33 } 16 }
34 17
35 const subpackages = process.env.NODE_ENV === 'development' 18 const subpackages = process.env.NODE_ENV === 'development'
36 ? [ 19 ? [
37 - { 20 + // {
38 - root: 'pages/demo', 21 + // root: 'pages/demo',
39 - pages: ['index'], 22 + // pages: ['index'],
40 - }, 23 + // },
41 - {
42 - root: 'pages/examples',
43 - pages: ['api-demo/index'],
44 - },
45 ] 24 ]
46 : [] 25 : []
47 26
......
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-06 22:13:24 4 + * @LastEditTime: 2026-01-29 17:51:21
5 - * @FilePath: /xyxBooking-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 {
9 - navigationBarTitleText: '西园寺预约' 9 + navigationBarTitleText: '臻奇智荟圈'
10 } 10 }
......
1 -/**
2 - * index页面样式
3 - */
4 -.index {
5 - padding: 40rpx;
6 -
7 - .nut-button {
8 - margin-bottom: 40rpx;
9 - }
10 -}
1 -<!--
2 - * @Date: 2023-06-21 10:23:09
3 - * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-01-16 09:24:14
5 - * @FilePath: /xyxBooking-weapp/src/pages/index/index.vue
6 - * @Description: 预约页首页
7 --->
8 <template> 1 <template>
9 - <view class="index-page" :class="{ 'is-offline': is_offline }" :style="page_style"> 2 + <view class="relative w-full min-h-screen overflow-y-auto overflow-x-hidden bg-[#F9FAFB] pb-[200rpx]">
10 - <view v-if="is_offline" class="offline-banner mx-6 mt-4 rounded-xl px-4 py-3"> 3 + <!-- Header Section -->
11 - <view class="flex items-center"> 4 + <view class="absolute left-0 top-0 w-full h-[544rpx] z-0">
12 - <IconFont name="tips" size="14" /> 5 + <image class="w-full h-full" src="https://picsum.photos/seed/header/750/544" mode="aspectFill" />
13 - <text class="ml-2 font-medium">离线提示</text> 6 + <view class="absolute inset-0 bg-gradient-to-b from-blue-600/80 to-transparent"></view>
14 - </view>
15 - <view class="mt-1 text-sm opacity-80">{{ weak_network_banner_desc }}</view>
16 - </view>
17 - <view class="index-content">
18 - <view style="height: 28vh;">
19 - <swiper class="my-swipe" :autoplay="true" :interval="3000" indicator-dots indicator-color="white" :circular="true">
20 - <swiper-item>
21 - <image style="height: 28vh; width: 100vw;" :src="banner_url" />
22 - </swiper-item>
23 - </swiper>
24 </view> 7 </view>
25 8
26 - <view ref="root" class="index-circular"> 9 + <view class="relative z-10 px-[32rpx] pt-[180rpx]">
27 - <view class="booking-wrapper"> 10 + <text class="block text-white text-[44rpx] font-bold mb-[40rpx]">臻奇智荟圈</text>
28 - <view class="booking" @tap="toBooking"> 11 +
29 - <view><image :src="icon_1" style="width: 96rpx; height: 96rpx;" /></view> 12 + <!-- Search Bar -->
30 - <view style="color: #FFF;">开始预约</view> 13 + <view class="flex items-center w-full h-[88rpx] bg-white/20 backdrop-blur-md rounded-full px-[32rpx] border border-white/30">
14 + <Search class="text-white/80 mr-[16rpx]" size="18" />
15 + <text class="text-white/80 text-[28rpx]">搜索培训资料、案例...</text>
31 </view> 16 </view>
32 </view> 17 </view>
18 +
19 + <!-- Main Content -->
20 + <view class="relative z-10 mt-[40rpx] px-[24rpx]">
21 + <!-- Grid Icons -->
22 + <view class="bg-white rounded-[32rpx] shadow-sm p-[40rpx] mb-[24rpx]">
23 + <view class="flex flex-wrap">
24 + <view
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]">
30 + <component :is="item.icon" class="text-blue-600" size="24" />
31 + </view>
32 + <text class="text-gray-800 text-[26rpx]">{{ item.lanhutext0 }}</text>
33 </view> 33 </view>
34 - <view class="logo" :style="logo_style"></view>
35 </view> 34 </view>
36 - <indexNav
37 - :icons="nav_icons"
38 - active="home"
39 - position="absolute"
40 - center_variant="raised"
41 - @select="on_nav_select"
42 - />
43 </view> 35 </view>
44 -</template>
45 -
46 -<script setup>
47 -import Taro, { getCurrentInstance, useDidShow, useShareAppMessage } from '@tarojs/taro'
48 -import { IconFont } from '@nutui/icons-vue-taro'
49 -import { ref, onMounted, onUnmounted, computed } from 'vue'
50 -import { useGo } from '@/hooks/useGo'
51 -import { get_network_type, is_usable_network } from '@/utils/network'
52 -import { weak_network_text } from '@/utils/uiText'
53 -import indexNav from '@/components/indexNav.vue'
54 -
55 -import icon_1 from '@/assets/images/立即预约@2x.png'
56 -import icon_3 from '@/assets/images/首页02@2x.png'
57 -import icon_4 from '@/assets/images/二维码icon.png'
58 -import icon_5 from '@/assets/images/我的01@2x.png'
59 -
60 -const go = useGo();
61 -const is_offline = ref(false)
62 -const weak_network_banner_desc = weak_network_text.banner_desc
63 -// 背景图版本号, 用于刷新背景图
64 -const initial_t = Number(getCurrentInstance()?.router?.params?._t)
65 -const bg_version = ref(Number.isFinite(initial_t) ? initial_t : 0)
66 -let is_reloading = false
67 -
68 -const reload_page = () => {
69 - if (is_reloading) return
70 - is_reloading = true
71 - Taro.reLaunch({
72 - url: `/pages/index/index?_t=${Date.now()}`,
73 - })
74 -}
75 -
76 -const banner_url = computed(() => {
77 - return `https://cdn.ipadbiz.cn/xys/booking/banner01.png?imageMogr2/thumbnail/500x/strip/quality/100&v=${bg_version.value}`
78 -})
79 -const normal_bg_url = computed(() => {
80 - return `https://cdn.ipadbiz.cn/xys/booking/bg.jpg?imageMogr2/thumbnail/200x/strip/quality/50&v=${bg_version.value}`
81 -})
82 -const logo_url = computed(() => {
83 - return `https://cdn.ipadbiz.cn/xys/booking/logo.png?imageMogr2/thumbnail/50x/strip/quality/50&v=${bg_version.value}`
84 -})
85 -
86 -/**
87 - * 页面样式
88 - * - 离线状态: 背景颜色 + 背景图片 (包含渐变)
89 - * - 在线状态: 背景颜色 + 背景图片
90 - */
91 -
92 -const page_style = computed(() => {
93 - if (is_offline.value) {
94 - return {
95 - backgroundColor: '#F3EEE3',
96 - backgroundImage: `linear-gradient(180deg, rgba(166, 121, 57, 0.10) 0%, rgba(255, 255, 255, 0.90) 60%, rgba(243, 238, 227, 1) 100%), url('${normal_bg_url.value}')`,
97 - }
98 - }
99 - return {
100 - backgroundColor: '#F3EEE3',
101 - backgroundImage: `url('${normal_bg_url.value}')`,
102 - }
103 -})
104 -
105 -const logo_style = computed(() => {
106 - return {
107 - backgroundImage: `url('${logo_url.value}')`,
108 - }
109 -})
110 -
111 -/**
112 - * 应用离线状态
113 - * - 检查当前状态是否需要刷新
114 - * - 更新 is_offline 状态
115 - */
116 36
117 -const apply_offline_state = (next_offline) => { 37 + <!-- Hot Products -->
118 - if (is_offline.value === true && next_offline === false) { 38 + <view class="bg-white rounded-[32rpx] shadow-sm p-[32rpx] mb-[24rpx]">
119 - reload_page() 39 + <view class="flex justify-between items-center mb-[24rpx]">
120 - return true 40 + <text class="text-gray-900 text-[32rpx] font-bold">热卖产品:</text>
121 - } 41 + <view class="flex items-center text-blue-600">
122 - is_offline.value = next_offline 42 + <text class="text-[26rpx] mr-[4rpx]">查看更多</text>
123 - return false 43 + <RectRight size="12" />
124 -} 44 + </view>
45 + </view>
125 46
126 -/** 47 + <!-- Product Card 1 -->
127 - * 刷新离线状态 48 + <view class="bg-gray-50 rounded-[24rpx] p-[28rpx] mb-[24rpx]">
128 - * - 检查当前网络类型是否可用 49 + <text class="block text-gray-800 text-[28rpx] font-medium mb-[20rpx]">家庭财富传承保障计划(分红)</text>
129 - */ 50 + <view class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
130 -const refresh_offline_state = async () => { 51 + <view class="bg-red-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
131 - try { 52 + <text class="text-red-600 text-[22rpx]">收益率3.5%</text>
132 - const network_type = await get_network_type() 53 + </view>
133 - const next_offline = !is_usable_network(network_type) 54 + <view class="bg-orange-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
134 - apply_offline_state(next_offline) 55 + <text class="text-orange-600 text-[22rpx]">5年超值</text>
135 - } catch (e) { 56 + </view>
136 - console.error('refresh_offline_state failed:', e) 57 + <view class="bg-green-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
137 - } 58 + <text class="text-green-600 text-[22rpx]">保证收益万能</text>
138 -} 59 + </view>
60 + </view>
61 + <view class="flex justify-between gap-[24rpx]">
62 + <view class="flex-1 h-[64rpx] flex items-center justify-center border border-blue-600 rounded-[16rpx] bg-white">
63 + <text class="text-blue-600 text-[26rpx]">产品资料</text>
64 + </view>
65 + <view class="flex-1 h-[64rpx] flex items-center justify-center bg-blue-600 rounded-[16rpx]">
66 + <text class="text-white text-[26rpx]">计划书</text>
67 + </view>
68 + </view>
69 + </view>
139 70
140 -let has_network_listener = false 71 + <!-- Product Card 2 -->
141 -let network_listener = null 72 + <view class="bg-gray-50 rounded-[24rpx] p-[28rpx]">
73 + <text class="block text-gray-800 text-[28rpx] font-medium mb-[20rpx]">儿童教育金储备方案(分红)</text>
74 + <view class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
75 + <view class="bg-red-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
76 + <text class="text-red-600 text-[22rpx]">收益率4.2%</text>
77 + </view>
78 + <view class="bg-orange-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
79 + <text class="text-orange-600 text-[22rpx]">10年期</text>
80 + </view>
81 + <view class="bg-green-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
82 + <text class="text-green-600 text-[22rpx]">教育专属</text>
83 + </view>
84 + </view>
85 + <view class="flex justify-between gap-[24rpx]">
86 + <view class="flex-1 h-[64rpx] flex items-center justify-center border border-blue-600 rounded-[16rpx] bg-white">
87 + <text class="text-blue-600 text-[26rpx]">产品资料</text>
88 + </view>
89 + <view class="flex-1 h-[64rpx] flex items-center justify-center bg-blue-600 rounded-[16rpx]">
90 + <text class="text-white text-[26rpx]">计划书</text>
91 + </view>
92 + </view>
93 + </view>
94 + </view>
142 95
143 -/** 96 + <!-- Hot Materials -->
144 - * 设置网络状态变更监听器 97 + <view class="bg-white rounded-[32rpx] shadow-sm p-[32rpx]">
145 - * - 监听网络状态变化 98 + <view class="flex justify-between items-center mb-[24rpx]">
146 - * - 更新 is_offline 状态 99 + <text class="text-gray-900 text-[32rpx] font-bold">本周热门资料</text>
147 - */ 100 + <view class="flex items-center text-blue-600">
101 + <text class="text-[26rpx] mr-[4rpx]">查看更多</text>
102 + <RectRight size="12" />
103 + </view>
104 + </view>
148 105
149 -const setup_network_listener = () => { 106 + <!-- Material List -->
150 - if (has_network_listener) return 107 + <view class="flex flex-col gap-[32rpx]">
151 - has_network_listener = true 108 + <!-- Item 1 -->
152 - network_listener = (res) => { 109 + <view class="flex gap-[24rpx]">
153 - try { 110 + <image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200" src="https://picsum.photos/seed/mat1/200/140" mode="aspectFill" />
154 - const is_connected = res?.isConnected !== false 111 + <view class="flex-1 flex flex-col justify-between py-[4rpx]">
155 - const network_type = res?.networkType 112 + <text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">2024年保险市场趋势分析报告</text>
156 - if (typeof network_type === 'string' && network_type) { 113 + <view class="flex justify-between items-end">
157 - // 有网, 检查是否可用 114 + <text class="text-gray-400 text-[24rpx]">256人学习</text>
158 - const next_offline = !(is_connected && is_usable_network(network_type)) 115 + <text class="text-blue-600 text-[26rpx]">78%</text>
159 - // 检查是否需要刷新 116 + </view>
160 - const is_handled = apply_offline_state(next_offline) 117 + </view>
161 - if (is_handled) return 118 + </view>
162 - } 119 + <view class="h-[2rpx] bg-gray-100"></view>
163 - // 还没有网, 再次刷新 120 + <!-- Item 2 -->
164 - refresh_offline_state() 121 + <view class="flex gap-[24rpx]">
165 - } catch (e) { 122 + <image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200" src="https://picsum.photos/seed/mat2/200/140" mode="aspectFill" />
166 - console.error('network_listener failed:', e) 123 + <view class="flex-1 flex flex-col justify-between py-[4rpx]">
167 - } 124 + <text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">高净值客户需求分析与产品匹配</text>
168 - } 125 + <view class="flex justify-between items-end">
169 - Taro.onNetworkStatusChange(network_listener) 126 + <text class="text-gray-400 text-[24rpx]">189人学习</text>
170 -} 127 + <text class="text-blue-600 text-[26rpx]">65%</text>
128 + </view>
129 + </view>
130 + </view>
131 + <view class="h-[2rpx] bg-gray-100"></view>
132 + <!-- Item 3 -->
133 + <view class="flex gap-[24rpx]">
134 + <image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200" src="https://picsum.photos/seed/mat3/200/140" mode="aspectFill" />
135 + <view class="flex-1 flex flex-col justify-between py-[4rpx]">
136 + <text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">保险合同条款解读与风险提示</text>
137 + <view class="flex justify-between items-end">
138 + <text class="text-gray-400 text-[24rpx]">142人学习</text>
139 + <text class="text-blue-600 text-[26rpx]">52%</text>
140 + </view>
141 + </view>
142 + </view>
143 + </view>
144 + </view>
145 + </view>
171 146
172 -/** 147 + <!-- Bottom Tab Bar -->
173 - * 移除网络状态变更监听器 148 + <view class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-safe z-50">
174 - * - 移除网络状态变化监听 149 + <view class="flex h-[110rpx] items-center">
175 - */ 150 + <view
151 + class="flex-1 flex flex-col items-center justify-center"
152 + v-for="(item, index) in loopData1"
153 + :key="index"
154 + @tap="handleTabClick(item)"
155 + >
156 + <component
157 + :is="item.icon"
158 + :class="[item.key === 'home' ? 'text-blue-600' : 'text-gray-400']"
159 + size="24"
160 + />
161 + <text
162 + class="text-[20rpx] mt-[8rpx]"
163 + :class="[item.key === 'home' ? 'text-blue-600' : 'text-gray-400']"
164 + >{{ item.lanhutext0 }}</text>
165 + </view>
166 + </view>
167 + <view class="w-[268rpx] h-[10rpx] mx-auto bg-gray-200 rounded-full mb-[10rpx]" />
168 + </view>
169 + </view>
170 +</template>
176 171
177 -const teardown_network_listener = () => { 172 +<script setup>
178 - if (!has_network_listener) return 173 +import { ref } from 'vue';
179 - has_network_listener = false 174 +import Taro, { useShareAppMessage } from '@tarojs/taro';
180 - if (network_listener && typeof Taro.offNetworkStatusChange === 'function') { 175 +import { useGo } from '@/hooks/useGo';
181 - try { 176 +import {
182 - Taro.offNetworkStatusChange(network_listener) 177 + Search,
183 - } catch (e) { 178 + RectRight,
184 - console.error('offNetworkStatusChange failed:', e) 179 + Order,
185 - } 180 + My,
186 - } 181 + Cart,
187 - network_listener = null 182 + Home,
188 -} 183 + Category,
184 + Star,
185 + Service
186 +} from '@nutui/icons-vue-taro';
189 187
190 -useDidShow(() => { 188 +// Data
191 - refresh_offline_state() 189 +const loopData0 = ref([
192 -}) 190 + {
191 + icon: Order,
192 + lanhutext0: '计划书',
193 + },
194 + {
195 + icon: My,
196 + lanhutext0: '入职相关',
197 + },
198 + {
199 + icon: Cart,
200 + lanhutext0: '签单相关',
201 + },
202 + {
203 + icon: Home,
204 + lanhutext0: '家办相关',
205 + },
206 + {
207 + icon: Category,
208 + lanhutext0: '产品知识库',
209 + },
210 + {
211 + icon: Star,
212 + lanhutext0: '工具箱',
213 + },
214 +]);
193 215
194 -onMounted(() => { 216 +const loopData1 = ref([
195 - setup_network_listener() 217 + {
196 -}) 218 + icon: Home,
219 + lanhutext0: '首页',
220 + key: 'home'
221 + },
222 + {
223 + icon: Service,
224 + lanhutext0: 'AI答疑',
225 + key: 'ai'
226 + },
227 + {
228 + icon: My,
229 + lanhutext0: '我的',
230 + key: 'me'
231 + },
232 +]);
197 233
198 -onUnmounted(() => { 234 +// Navigation
199 - teardown_network_listener() 235 +const go = useGo();
200 -})
201 236
202 -const toBooking = () => { // 跳转到预约须知 237 +const handleTabClick = (item) => {
203 - // 如果是离线模式,不跳转 238 + if (item.key === 'me') {
204 - if (is_offline.value) { 239 + Taro.redirectTo({
240 + url: '/pages/me/index'
241 + });
242 + } else if (item.key === 'ai') {
205 Taro.showToast({ 243 Taro.showToast({
206 - title: weak_network_text.offline_mode_no_booking_toast, 244 + title: '功能开发中',
207 icon: 'none' 245 icon: 'none'
208 - }) 246 + });
209 - return
210 } 247 }
211 - go('/notice'); 248 +};
212 -}
213 -
214 -const toCode = () => { // 跳转到预约码
215 - Taro.redirectTo({
216 - url: '/pages/bookingCode/index'
217 - })
218 -}
219 -
220 -const toMy = () => { // 跳转到我的
221 - Taro.redirectTo({
222 - url: '/pages/me/index'
223 - })
224 -}
225 -
226 -const nav_icons = { home: icon_3, code: icon_4, me: icon_5 }
227 -
228 -const on_nav_select = (key) => {
229 - if (key === 'code') return toCode()
230 - if (key === 'me') return toMy()
231 -}
232 249
233 useShareAppMessage(() => { 250 useShareAppMessage(() => {
234 return { 251 return {
235 - title: '西园寺预约', 252 + title: '臻奇智荟圈',
236 path: '/pages/index/index' 253 path: '/pages/index/index'
237 - } 254 + };
238 -}) 255 +});
239 -
240 </script> 256 </script>
241 -
242 -<style lang="less">
243 -.index-page {
244 - position: relative;
245 - min-height: 100vh;
246 - background-repeat: no-repeat;
247 - background-position: center;
248 - background-size: cover; /* 确保背景覆盖 */
249 -
250 - &.is-offline {
251 - background-color: #F3EEE3;
252 - }
253 -
254 - .offline-banner {
255 - position: absolute;
256 - top: 24rpx;
257 - left: 24rpx;
258 - right: 24rpx;
259 - z-index: 10;
260 - background: rgba(255, 255, 255, 0.88);
261 - color: #A67939;
262 - border: 2rpx solid rgba(166, 121, 57, 0.25);
263 - box-shadow: 0 12rpx 30rpx rgba(166, 121, 57, 0.12);
264 - backdrop-filter: blur(6px);
265 - }
266 - .index-content {
267 - height: calc(100vh - 134rpx - constant(safe-area-inset-bottom));
268 - height: calc(100vh - 134rpx - env(safe-area-inset-bottom));
269 - .index-control {
270 - position: relative;
271 - display: flex;
272 - flex-direction: column;
273 - align-items: center;
274 - justify-content: center;
275 - margin-top: 130rpx;
276 - // font-weight: bold;
277 - font-size: 37rpx;
278 - .booking {
279 - display: flex;
280 - justify-content: center;
281 - align-items: center;
282 - background-color: #A67939;
283 - border-radius: 14rpx;
284 - color: #FFFFFF;
285 - padding: 22rpx 128rpx;
286 - border: 2rpx solid #A67939;
287 - }
288 - .record {
289 - display: flex;
290 - justify-content: center;
291 - align-items: center;
292 - color: #A67939;
293 - border-radius: 14rpx;
294 - padding: 22rpx 128rpx;
295 - border: 2rpx solid #A67939;
296 - margin-top: 48rpx;
297 - }
298 - .search {
299 - display: flex;
300 - justify-content: center;
301 - align-items: center;
302 - color: #A67939;
303 - border-radius: 14rpx;
304 - padding: 22rpx 128rpx;
305 - border: 2rpx solid #A67939;
306 - margin-top: 48rpx;
307 - }
308 - }
309 - .index-circular {
310 - position: relative;
311 - display: flex;
312 - align-items: center;
313 - justify-content: center;
314 - margin-top: 130rpx;
315 - // font-weight: bold;
316 - font-size: 35rpx;
317 -
318 - .booking-wrapper {
319 - height: 260rpx;
320 - width: 260rpx;
321 - border-radius: 50%;
322 - background-color: rgba(166, 121, 57, 0.26);
323 - display: flex;
324 - align-items: center;
325 - justify-content: center;
326 - .booking {
327 - height: 230rpx;
328 - width: 230rpx;
329 - border-radius: 50%;
330 - background-color: #A67939;
331 - display: flex;
332 - align-items: center;
333 - justify-content: center;
334 - flex-direction: column;
335 - }
336 - }
337 - }
338 - .logo {
339 - position: absolute;
340 - right: 0;
341 - bottom: 200rpx;
342 - height: 400rpx;
343 - width: 150rpx;
344 - background-repeat: no-repeat;
345 - background-size: contain;
346 - background-position: center;
347 - }
348 - }
349 - .my-swipe {
350 - height: 400rpx;
351 - swiper-item { /* Taro swiper-item 编译后 */
352 - height: 400rpx;
353 - width: 750rpx;
354 - background-size: cover;
355 - background-repeat: no-repeat;
356 - background-position: center;
357 - }
358 - }
359 -}
360 -</style>
......