hookehuyr

feat(help-center): 新增帮助中心页面并更新导航链接

- 新增帮助中心页面 (`src/pages/help-center/index.vue`),包含搜索框、联系客服卡片和重点问题列表
- 添加页面配置文件 (`src/pages/help-center/index.config.js`)
- 在应用配置 (`src/app.config.js`) 中注册新页面路由
- 更新我的页面 (`src/pages/mine/index.vue`) 菜单项,将帮助中心链接指向实际页面
- 添加设计稿文件和相关代码文件至文档目录
- 更新更新日志 (`docs/CHANGELOG.md`) 记录新增功能
...@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. ...@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
4 4
5 ## [Unreleased] 5 ## [Unreleased]
6 6
7 +### Added
8 +- 新增 "帮助中心" 页面 (`src/pages/help-center`):
9 + - 还原设计稿 (`docs/design/manulife-V1/帮助中心`) 布局与交互
10 + - 使用 Tailwind CSS 实现页面样式,包括自定义搜索框、联系客服卡片及常见问题列表
11 + - 集成 `NavHeader``TabBar` 组件,保持全站导航一致性
12 + - 注册新页面路由至 `src/app.config.js`
13 + - 更新 "我的" 页面 (`src/pages/mine`) 菜单链接,指向帮助中心
14 +
7 ### Changed 15 ### Changed
8 - 优化 "资料列表" 页面 (`src/pages/material-list`): 16 - 优化 "资料列表" 页面 (`src/pages/material-list`):
9 - 替换页面内所有静态图片资源为 NutUI 图标组件 (`IconFont`),提升加载性能与视觉一致性 17 - 替换页面内所有静态图片资源为 NutUI 图标组件 (`IconFont`),提升加载性能与视觉一致性
......
1 +.page {
2 + background-color: rgba(249, 250, 251, 1);
3 + position: relative;
4 + width: 393px;
5 + height: 844px;
6 + overflow: hidden;
7 + padding-left: 0;
8 + padding-right: 0;
9 + padding-top: 0;
10 + padding-bottom: 3px;
11 +}
12 +
13 +.box_1 {
14 + background-color: rgba(30, 58, 138, 1);
15 + width: 393px;
16 + padding: 12px 20px 12px 20px;
17 +}
18 +
19 +.text_1 {
20 + overflow-wrap: break-word;
21 + color: rgba(255, 255, 255, 1);
22 + font-size: 14px;
23 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
24 + font-weight: normal;
25 + text-align: left;
26 + white-space: nowrap;
27 + line-height: 20px;
28 +}
29 +
30 +.image_1 {
31 + width: 64px;
32 + height: 16px;
33 + margin: 2px 0 2px 0;
34 +}
35 +
36 +.box_2 {
37 + padding-bottom: 13px;
38 +}
39 +
40 +.group_1 {
41 + width: 393px;
42 + background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8b2d54a24b64b70feddcc9b0ace1ad4824ac8f04fdb3df9070626abcd200601b)
43 + 100% no-repeat;
44 + background-size: 100% 100%;
45 + padding: 16px 157px 16px 20px;
46 +}
47 +
48 +.label_1 {
49 + width: 24px;
50 + height: 24px;
51 + margin: 2px 0 2px 0;
52 +}
53 +
54 +.text_2 {
55 + overflow-wrap: break-word;
56 + color: rgba(255, 255, 255, 1);
57 + font-size: 20px;
58 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
59 + font-weight: normal;
60 + text-align: left;
61 + white-space: nowrap;
62 + line-height: 28px;
63 +}
64 +
65 +.group_2 {
66 + width: 353px;
67 + background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4061f030adc6ea0e97eb9bb9f8e128a070e66c04c95623aeae39ab0e854b4be4) -2px -1px
68 + no-repeat;
69 + background-size: 357px 60px;
70 + align-self: center;
71 + margin-top: 20px;
72 + padding: 16px 177px 16px 16px;
73 +}
74 +
75 +.image-text_1 {
76 + width: 160px;
77 +}
78 +
79 +.thumbnail_1 {
80 + width: 20px;
81 + height: 20px;
82 + margin: 2px 0 2px 0;
83 +}
84 +
85 +.text-group_1 {
86 + overflow-wrap: break-word;
87 + color: rgba(156, 163, 175, 1);
88 + font-size: 16px;
89 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
90 + font-weight: normal;
91 + text-align: left;
92 + white-space: nowrap;
93 + line-height: 24px;
94 +}
95 +
96 +.group_3 {
97 + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
98 + border-radius: 12px;
99 + background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/31103214b74948f7bc538566a9008355_mergeImage.png);
100 + width: 353px;
101 + align-self: center;
102 + margin-top: 16px;
103 + padding: 18px 16px 16px 16px;
104 +}
105 +
106 +.image-text_2 {
107 + width: 116px;
108 +}
109 +
110 +.label_2 {
111 + width: 40px;
112 + height: 40px;
113 +}
114 +
115 +.text-group_2 {
116 + overflow-wrap: break-word;
117 + color: rgba(31, 41, 55, 1);
118 + font-size: 16px;
119 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
120 + font-weight: normal;
121 + text-align: center;
122 + white-space: nowrap;
123 + line-height: 24px;
124 + margin-top: 8px;
125 +}
126 +
127 +.thumbnail_2 {
128 + width: 20px;
129 + height: 20px;
130 + margin: 10px 0 10px 0;
131 +}
132 +
133 +.text_3 {
134 + overflow-wrap: break-word;
135 + color: rgba(31, 41, 55, 1);
136 + font-size: 16px;
137 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
138 + font-weight: normal;
139 + text-align: left;
140 + white-space: nowrap;
141 + line-height: 24px;
142 + margin: 16px 305px 0 24px;
143 +}
144 +
145 +.box_3 {
146 + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
147 + background-color: rgba(255, 255, 255, 1);
148 + border-radius: 12px;
149 + width: 353px;
150 + align-self: center;
151 + margin-top: -1px;
152 + padding: 16px 16px 16px 16px;
153 +}
154 +
155 +.group_4 {
156 + width: 321px;
157 +}
158 +
159 +.image-text_3 {
160 + width: 158px;
161 +}
162 +
163 +.thumbnail_3 {
164 + width: 6px;
165 + height: 6px;
166 + margin: 7px 0 7px 0;
167 +}
168 +
169 +.text-group_3 {
170 + overflow-wrap: break-word;
171 + color: rgba(31, 41, 55, 1);
172 + font-size: 14px;
173 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
174 + font-weight: normal;
175 + text-align: left;
176 + white-space: nowrap;
177 + line-height: 20px;
178 +}
179 +
180 +.thumbnail_4 {
181 + width: 16px;
182 + height: 16px;
183 + margin: 2px 0 2px 0;
184 +}
185 +
186 +.image_2 {
187 + width: 321px;
188 + height: 1px;
189 + margin-top: 16px;
190 +}
191 +
192 +.group_5 {
193 + width: 321px;
194 + margin-top: 16px;
195 +}
196 +
197 +.image-text_4 {
198 + width: 129px;
199 +}
200 +
201 +.thumbnail_5 {
202 + width: 6px;
203 + height: 6px;
204 + margin: 7px 0 7px 0;
205 +}
206 +
207 +.text-group_4 {
208 + overflow-wrap: break-word;
209 + color: rgba(31, 41, 55, 1);
210 + font-size: 14px;
211 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
212 + font-weight: normal;
213 + text-align: left;
214 + white-space: nowrap;
215 + line-height: 20px;
216 +}
217 +
218 +.thumbnail_6 {
219 + width: 16px;
220 + height: 16px;
221 + margin: 2px 0 2px 0;
222 +}
223 +
224 +.image_3 {
225 + width: 321px;
226 + height: 1px;
227 + margin-top: 16px;
228 +}
229 +
230 +.group_6 {
231 + width: 321px;
232 + margin-top: 16px;
233 +}
234 +
235 +.image-text_5 {
236 + width: 144px;
237 +}
238 +
239 +.thumbnail_7 {
240 + width: 6px;
241 + height: 6px;
242 + margin: 7px 0 7px 0;
243 +}
244 +
245 +.text-group_5 {
246 + overflow-wrap: break-word;
247 + color: rgba(31, 41, 55, 1);
248 + font-size: 14px;
249 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
250 + font-weight: normal;
251 + text-align: left;
252 + white-space: nowrap;
253 + line-height: 20px;
254 +}
255 +
256 +.thumbnail_8 {
257 + width: 16px;
258 + height: 16px;
259 + margin: 2px 0 2px 0;
260 +}
261 +
262 +.image_4 {
263 + width: 321px;
264 + height: 1px;
265 + margin-top: 16px;
266 +}
267 +
268 +.group_7 {
269 + width: 321px;
270 + margin-top: 16px;
271 +}
272 +
273 +.image-text_6 {
274 + width: 158px;
275 +}
276 +
277 +.thumbnail_9 {
278 + width: 6px;
279 + height: 6px;
280 + margin: 7px 0 7px 0;
281 +}
282 +
283 +.text-group_6 {
284 + overflow-wrap: break-word;
285 + color: rgba(31, 41, 55, 1);
286 + font-size: 14px;
287 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
288 + font-weight: normal;
289 + text-align: left;
290 + white-space: nowrap;
291 + line-height: 20px;
292 +}
293 +
294 +.thumbnail_10 {
295 + width: 16px;
296 + height: 16px;
297 + margin: 2px 0 2px 0;
298 +}
299 +
300 +.image_5 {
301 + width: 321px;
302 + height: 1px;
303 + margin-top: 16px;
304 +}
305 +
306 +.group_8 {
307 + width: 321px;
308 + margin-top: 16px;
309 +}
310 +
311 +.image-text_7 {
312 + width: 130px;
313 +}
314 +
315 +.thumbnail_11 {
316 + width: 6px;
317 + height: 6px;
318 + margin: 7px 0 7px 0;
319 +}
320 +
321 +.text-group_7 {
322 + overflow-wrap: break-word;
323 + color: rgba(31, 41, 55, 1);
324 + font-size: 14px;
325 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
326 + font-weight: normal;
327 + text-align: left;
328 + white-space: nowrap;
329 + line-height: 20px;
330 +}
331 +
332 +.thumbnail_12 {
333 + width: 16px;
334 + height: 16px;
335 + margin: 2px 0 2px 0;
336 +}
337 +
338 +.box_4 {
339 + background-color: rgba(255, 255, 255, 1);
340 + margin-top: 157px;
341 + padding-bottom: 9px;
342 +}
343 +
344 +.image_6 {
345 + width: 393px;
346 + height: 1px;
347 +}
348 +
349 +.box_5 {
350 + width: 269px;
351 + align-self: center;
352 + margin-top: 10px;
353 +}
354 +
355 +.image-text_8 {
356 +}
357 +
358 +.label_3 {
359 + width: 24px;
360 + height: 24px;
361 +}
362 +
363 +.text-group_8 {
364 + overflow-wrap: break-word;
365 + color: rgba(156, 163, 175, 1);
366 + font-size: 12px;
367 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
368 + font-weight: normal;
369 + text-align: center;
370 + white-space: nowrap;
371 + line-height: 16px;
372 + margin-top: 4px;
373 +}
374 +
375 +.image-text_9 {
376 +}
377 +
378 +.label_4 {
379 + width: 24px;
380 + height: 24px;
381 + align-self: center;
382 +}
383 +
384 +.text-group_9 {
385 + overflow-wrap: break-word;
386 + color: rgba(156, 163, 175, 1);
387 + font-size: 12px;
388 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
389 + font-weight: normal;
390 + text-align: center;
391 + white-space: nowrap;
392 + line-height: 16px;
393 + margin-top: 4px;
394 +}
395 +
396 +.image-text_10 {
397 +}
398 +
399 +.label_5 {
400 + width: 24px;
401 + height: 24px;
402 +}
403 +
404 +.text-group_10 {
405 + overflow-wrap: break-word;
406 + color: rgba(0, 122, 255, 1);
407 + font-size: 12px;
408 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
409 + font-weight: normal;
410 + text-align: center;
411 + white-space: nowrap;
412 + line-height: 16px;
413 + margin-top: 4px;
414 +}
415 +
416 +.image_7 {
417 + width: 393px;
418 + height: 34px;
419 +}
......
1 +<template>
2 + <div class="page flex-col">
3 + <div class="box_1 flex-row justify-between">
4 + <span class="text_1">9:41</span>
5 + <img
6 + class="image_1"
7 + referrerpolicy="no-referrer"
8 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng413f9d678a24a9b746fdc981fa579b56b2cbd98eddd024ab1279ef48ae59291e"
9 + />
10 + </div>
11 + <div class="box_2 flex-col">
12 + <div class="group_1 flex-row justify-between">
13 + <img
14 + class="label_1"
15 + referrerpolicy="no-referrer"
16 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8d9b1510cae8946e1251bb518347ad321d8ce71de7b15fe74d7322e00d291ac6"
17 + />
18 + <span class="text_2">帮助中心</span>
19 + </div>
20 + <div class="group_2 flex-row">
21 + <div class="image-text_1 flex-row justify-between">
22 + <img
23 + class="thumbnail_1"
24 + referrerpolicy="no-referrer"
25 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbb008ef38dbea4061d893137cdb5d5e77bb053a7ec4082623fdb29b05872cd56"
26 + />
27 + <span class="text-group_1">搜索问题或关键词</span>
28 + </div>
29 + </div>
30 + <div class="group_3 flex-row justify-between">
31 + <div class="image-text_2 flex-row justify-between">
32 + <img
33 + class="label_2"
34 + referrerpolicy="no-referrer"
35 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng0bb42ee0fac4d686bb6281afd8462142feb6a7fa9de1286674e2c2010583a3d1"
36 + />
37 + <span class="text-group_2">联系客服</span>
38 + </div>
39 + <img
40 + class="thumbnail_2"
41 + referrerpolicy="no-referrer"
42 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b"
43 + />
44 + </div>
45 + <span class="text_3">重点问题</span>
46 + </div>
47 + <div class="box_3 flex-col">
48 + <div class="group_4 flex-row justify-between">
49 + <div class="image-text_3 flex-row justify-between">
50 + <img
51 + class="thumbnail_3"
52 + referrerpolicy="no-referrer"
53 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng50a5f2c348150e89992cbf4740ca444f98d33de69e3f83abdadd5f70c70fa230"
54 + />
55 + <span class="text-group_3">如何创建新的计划书?</span>
56 + </div>
57 + <img
58 + class="thumbnail_4"
59 + referrerpolicy="no-referrer"
60 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb167b27c04628e64ec71e9d576dd8c1bcfe2666b25997aa38bf54c096f6d8152"
61 + />
62 + </div>
63 + <img
64 + class="image_2"
65 + referrerpolicy="no-referrer"
66 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57c4639b8bfeac9627fb7aedb8a38f4441026309724d794e28b0e35d1b620544"
67 + />
68 + <div class="group_5 flex-row justify-between">
69 + <div class="image-text_4 flex-row justify-between">
70 + <img
71 + class="thumbnail_5"
72 + referrerpolicy="no-referrer"
73 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng50a5f2c348150e89992cbf4740ca444f98d33de69e3f83abdadd5f70c70fa230"
74 + />
75 + <span class="text-group_4">AI答疑如何使用?</span>
76 + </div>
77 + <img
78 + class="thumbnail_6"
79 + referrerpolicy="no-referrer"
80 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb167b27c04628e64ec71e9d576dd8c1bcfe2666b25997aa38bf54c096f6d8152"
81 + />
82 + </div>
83 + <img
84 + class="image_3"
85 + referrerpolicy="no-referrer"
86 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57c4639b8bfeac9627fb7aedb8a38f4441026309724d794e28b0e35d1b620544"
87 + />
88 + <div class="group_6 flex-row justify-between">
89 + <div class="image-text_5 flex-row justify-between">
90 + <img
91 + class="thumbnail_7"
92 + referrerpolicy="no-referrer"
93 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng50a5f2c348150e89992cbf4740ca444f98d33de69e3f83abdadd5f70c70fa230"
94 + />
95 + <span class="text-group_5">如何修改个人信息?</span>
96 + </div>
97 + <img
98 + class="thumbnail_8"
99 + referrerpolicy="no-referrer"
100 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb167b27c04628e64ec71e9d576dd8c1bcfe2666b25997aa38bf54c096f6d8152"
101 + />
102 + </div>
103 + <img
104 + class="image_4"
105 + referrerpolicy="no-referrer"
106 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57c4639b8bfeac9627fb7aedb8a38f4441026309724d794e28b0e35d1b620544"
107 + />
108 + <div class="group_7 flex-row justify-between">
109 + <div class="image-text_6 flex-row justify-between">
110 + <img
111 + class="thumbnail_9"
112 + referrerpolicy="no-referrer"
113 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng50a5f2c348150e89992cbf4740ca444f98d33de69e3f83abdadd5f70c70fa230"
114 + />
115 + <span class="text-group_6">数据如何同步到云端?</span>
116 + </div>
117 + <img
118 + class="thumbnail_10"
119 + referrerpolicy="no-referrer"
120 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb167b27c04628e64ec71e9d576dd8c1bcfe2666b25997aa38bf54c096f6d8152"
121 + />
122 + </div>
123 + <img
124 + class="image_5"
125 + referrerpolicy="no-referrer"
126 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57c4639b8bfeac9627fb7aedb8a38f4441026309724d794e28b0e35d1b620544"
127 + />
128 + <div class="group_8 flex-row justify-between">
129 + <div class="image-text_7 flex-row justify-between">
130 + <img
131 + class="thumbnail_11"
132 + referrerpolicy="no-referrer"
133 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng50a5f2c348150e89992cbf4740ca444f98d33de69e3f83abdadd5f70c70fa230"
134 + />
135 + <span class="text-group_7">忘记密码怎么办?</span>
136 + </div>
137 + <img
138 + class="thumbnail_12"
139 + referrerpolicy="no-referrer"
140 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb167b27c04628e64ec71e9d576dd8c1bcfe2666b25997aa38bf54c096f6d8152"
141 + />
142 + </div>
143 + </div>
144 + <div class="box_4 flex-col">
145 + <img
146 + class="image_6"
147 + referrerpolicy="no-referrer"
148 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
149 + />
150 + <div class="box_5 flex-row justify-between">
151 + <div class="image-text_8 flex-col">
152 + <img
153 + class="label_3"
154 + referrerpolicy="no-referrer"
155 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng71c6e00bb581cef9f5efdb2e7b365981b8076e8bc6ea8d112cbdc366d37ac3bb"
156 + />
157 + <span class="text-group_8">首页</span>
158 + </div>
159 + <div class="image-text_9 flex-col">
160 + <img
161 + class="label_4"
162 + referrerpolicy="no-referrer"
163 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd589998343ea94a72ad8b84ad664f5e104af127cd653af352d451250d5426e7d"
164 + />
165 + <span class="text-group_9">AI答疑</span>
166 + </div>
167 + <div class="image-text_10 flex-col">
168 + <img
169 + class="label_5"
170 + referrerpolicy="no-referrer"
171 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga075aec18829793ac5bb3d4bada734dbd936e8d34c79c30583aa49fa2d58751b"
172 + />
173 + <span class="text-group_10">我的</span>
174 + </div>
175 + </div>
176 + </div>
177 + <img
178 + class="image_7"
179 + referrerpolicy="no-referrer"
180 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng830c4568c4d0141e1fa97f7fad1e075e2178ab08e5613734b08eaf46dcdd4207"
181 + />
182 + </div>
183 +</template>
184 +<script>
185 +export default {
186 + data() {
187 + return {
188 + constants: {},
189 + };
190 + },
191 + methods: {},
192 +};
193 +</script>
194 +<style src="./common.css" />
195 +<style src="./index.css" />
......
...@@ -24,6 +24,7 @@ const pages = [ ...@@ -24,6 +24,7 @@ const pages = [
24 'pages/avatar/index', 24 'pages/avatar/index',
25 'pages/feedback/index', 25 'pages/feedback/index',
26 'pages/login/index', 26 'pages/login/index',
27 + 'pages/help-center/index',
27 ] 28 ]
28 29
29 if (process.env.NODE_ENV === 'development') { 30 if (process.env.NODE_ENV === 'development') {
......
1 +export default {
2 + navigationBarTitleText: '帮助中心',
3 + enablePullDownRefresh: false,
4 + navigationStyle: 'custom'
5 +}
1 +<template>
2 + <view class="relative w-full min-h-screen bg-[#F9FAFB] pb-[200rpx]">
3 + <NavHeader title="帮助中心" />
4 +
5 + <!-- Content Section -->
6 + <view class="px-[32rpx] mt-[32rpx]">
7 + <!-- Search Bar -->
8 + <view class="flex items-center w-full h-[88rpx] bg-white rounded-full px-[32rpx] mb-[32rpx] shadow-sm">
9 + <IconFont name="Search" class="text-gray-400 mr-[16rpx]" size="18" />
10 + <input
11 + type="text"
12 + placeholder="搜索问题或关键词"
13 + placeholder-class="text-gray-400 text-[28rpx]"
14 + class="flex-1 text-[28rpx] text-gray-800 h-full"
15 + />
16 + </view>
17 +
18 + <!-- Contact Service -->
19 + <view class="flex items-center justify-between w-full bg-white rounded-[24rpx] p-[32rpx] mb-[40rpx] shadow-sm relative overflow-hidden">
20 + <!-- Background decoration if needed, or just white card -->
21 + <view class="flex items-center z-10">
22 + <image src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng0bb42ee0fac4d686bb6281afd8462142feb6a7fa9de1286674e2c2010583a3d1" class="w-[80rpx] h-[80rpx] mr-[24rpx]" />
23 + <text class="text-[32rpx] text-gray-900 font-medium">联系客服</text>
24 + </view>
25 + <view class="z-10">
26 + <IconFont name="RectRight" class="text-gray-400" size="16" />
27 + </view>
28 + </view>
29 +
30 + <!-- Important Questions -->
31 + <view>
32 + <text class="block text-[32rpx] text-gray-900 font-bold mb-[24rpx]">重点问题</text>
33 + <view class="bg-white rounded-[24rpx] shadow-sm overflow-hidden">
34 + <view
35 + v-for="(item, index) in questions"
36 + :key="index"
37 + class="flex items-center justify-between p-[32rpx] border-b border-gray-100 last:border-b-0 active:bg-gray-50 transition-colors"
38 + @tap="handleQuestionClick(item)"
39 + >
40 + <view class="flex items-center">
41 + <view class="w-[12rpx] h-[12rpx] rounded-full bg-blue-600 mr-[24rpx]"></view>
42 + <text class="text-[28rpx] text-gray-800">{{ item.title }}</text>
43 + </view>
44 + <IconFont name="RectRight" class="text-gray-400" size="16" />
45 + </view>
46 + </view>
47 + </view>
48 + </view>
49 +
50 + <TabBar current="me" />
51 + </view>
52 +</template>
53 +
54 +<script setup>
55 +import { ref } from 'vue'
56 +import NavHeader from '@/components/NavHeader.vue'
57 +import TabBar from '@/components/TabBar.vue'
58 +import IconFont from '@/components/IconFont.vue'
59 +import { useGo } from '@/hooks/useGo'
60 +
61 +const go = useGo()
62 +
63 +const questions = ref([
64 + { title: '如何创建新的计划书?', id: 1 },
65 + { title: 'AI答疑如何使用?', id: 2 },
66 + { title: '如何修改个人信息?', id: 3 },
67 + { title: '数据如何同步到云端?', id: 4 },
68 + { title: '忘记密码怎么办?', id: 5 }
69 +])
70 +
71 +const handleQuestionClick = (item) => {
72 + // Navigate to detail or show answer
73 + console.log('Clicked question:', item.title)
74 + // Example navigation (adjust path as needed)
75 + // go('/pages/help-detail/index', { id: item.id })
76 +}
77 +</script>
...@@ -79,7 +79,7 @@ const go = useGo() ...@@ -79,7 +79,7 @@ const go = useGo()
79 const menuItems = [ 79 const menuItems = [
80 { title: '我的计划书', icon: 'Order', path: '/pages/plan/index' }, 80 { title: '我的计划书', icon: 'Order', path: '/pages/plan/index' },
81 { title: '我的收藏', icon: 'Star', path: '/pages/favorites/index' }, 81 { title: '我的收藏', icon: 'Star', path: '/pages/favorites/index' },
82 - { title: '帮助中心', icon: 'Service', action: 'toast' }, 82 + { title: '帮助中心', icon: 'Service', path: '/pages/help-center/index' },
83 { title: '意见反馈', icon: 'Edit', path: '/pages/feedback/index' } 83 { title: '意见反馈', icon: 'Edit', path: '/pages/feedback/index' }
84 ] 84 ]
85 85
......