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`) 记录新增功能
Showing
8 changed files
with
706 additions
and
1 deletions
| ... | @@ -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" /> | ... | ... |
64.4 KB
| ... | @@ -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') { | ... | ... |
src/pages/help-center/index.config.js
0 → 100644
src/pages/help-center/index.vue
0 → 100644
| 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 | ... | ... |
-
Please register or login to post a comment