Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4937f9c4 1 parent 92b507df

feat(helpCenter): 新增帮助中心页面及完整功能实现 

实现帮助中心页面的完整功能，包括：
- 添加搜索框支持关键词搜索帮助内容
- 实现分类筛选功能
- 创建帮助列表展示及详情弹窗
- 设计完整的UI样式和交互逻辑
- 添加示例数据展示功能效果
Expand all
Inline Side-by-side
Showing 4 changed files with 382 additions and 5 deletions
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-03 20:25:34 4 + * @LastEditTime: 2025-07-03 20:54:14
5 * @FilePath: /jgdl/src/pages/feedBack/index.vue 5 * @FilePath: /jgdl/src/pages/feedBack/index.vue
6 * @Description: 意见反馈页面 6 * @Description: 意见反馈页面
7 --> 7 -->
......
1 -.red { 1 +// 帮助中心页面样式
2 - color: red; 2 +.help-center-page {
3 + background-color: #f5f5f5;
4 + min-height: 100vh;
5 +
6 + // ==================== 头部导航 ====================
7 + .header {
8 + display: flex;
9 + align-items: center;
10 + justify-content: space-between;
11 + padding: 20rpx 30rpx;
12 + background-color: #fff;
13 + border-bottom: 1rpx solid #eee;
14 + position: sticky;
15 + top: 0;
16 + z-index: 100;
17 +
18 + .header-left {
19 + display: flex;
20 + align-items: center;
21 + padding: 10rpx;
22 +
23 + .back-text {
24 + font-size: 28rpx;
25 + color: #1890ff;
26 + }
27 + }
28 +
29 + .header-title {
30 + font-size: 36rpx;
31 + font-weight: 600;
32 + color: #333;
33 + }
34 +
35 + .header-right {
36 + width: 56rpx; // 保持布局平衡
37 + }
38 + }
39 +
40 + // ==================== 搜索框 ====================
41 + .search-section {
42 + padding: 30rpx;
43 + background-color: #fff;
44 + border-bottom: 1rpx solid #eee;
45 +
46 + .search-box {
47 + display: flex;
48 + align-items: center;
49 + background-color: #f8f8f8;
50 + border-radius: 50rpx;
51 + padding: 20rpx 30rpx;
52 + border: 1rpx solid #e0e0e0;
53 +
54 +
55 +
56 + .search-input {
57 + flex: 1;
58 + font-size: 28rpx;
59 + color: #333;
60 + background: transparent;
61 + border: none;
62 + outline: none;
63 +
64 + &::placeholder {
65 + color: #999;
66 + }
67 + }
68 + }
69 + }
70 +
71 + // ==================== 分类选择 ====================
72 + .category-section {
73 + padding: 30rpx;
74 + background-color: #fff;
75 + margin-bottom: 20rpx;
76 +
77 + .category-title {
78 + font-size: 32rpx;
79 + font-weight: 600;
80 + color: #333;
81 + margin-bottom: 30rpx;
82 + }
83 +
84 + .category-grid {
85 + display: flex;
86 + flex-wrap: wrap;
87 + gap: 20rpx;
88 +
89 + .category-item {
90 + display: flex;
91 + flex-direction: column;
92 + align-items: center;
93 + padding: 20rpx;
94 + background-color: #f8f8f8;
95 + border-radius: 20rpx;
96 + border: 2rpx solid transparent;
97 + transition: all 0.3s ease;
98 + min-width: 120rpx;
99 +
100 + &.active {
101 + background-color: #e8f4fd;
102 + border-color: #1890ff;
103 +
104 + .category-name {
105 + color: #1890ff;
106 + }
107 +
108 +
109 + }
110 +
111 +
112 +
113 + .category-name {
114 + font-size: 24rpx;
115 + color: #666;
116 + text-align: center;
117 + transition: color 0.3s ease;
118 + }
119 + }
120 + }
121 + }
122 +
123 + // ==================== 帮助列表 ====================
124 + .help-list-section {
125 + flex: 1;
126 + background-color: #fff;
127 + margin: 30rpx;
128 + border-radius: 20rpx;
129 + overflow: hidden;
130 +
131 + .help-list {
132 + .help-items {
133 + .help-item {
134 + display: flex;
135 + align-items: center;
136 + justify-content: space-between;
137 + padding: 30rpx;
138 + border-bottom: 1rpx solid #f0f0f0;
139 + transition: background-color 0.3s ease;
140 +
141 + &:last-child {
142 + border-bottom: none;
143 + }
144 +
145 + &:active {
146 + background-color: #f8f8f8;
147 + }
148 +
149 + .help-item-left {
150 + display: flex;
151 + align-items: center;
152 + flex: 1;
153 +
154 +
155 +
156 + .help-content {
157 + flex: 1;
158 +
159 + .help-title {
160 + display: block;
161 + font-size: 32rpx;
162 + font-weight: 500;
163 + color: #333;
164 + margin-bottom: 10rpx;
165 + line-height: 1.4;
166 + }
167 +
168 + .help-desc {
169 + display: block;
170 + font-size: 26rpx;
171 + color: #666;
172 + line-height: 1.4;
173 + overflow: hidden;
174 + text-overflow: ellipsis;
175 + white-space: nowrap;
176 + }
177 + }
178 + }
179 +
180 + .help-item-right {
181 + .arrow-text {
182 + font-size: 28rpx;
183 + color: #ccc;
184 + }
185 + }
186 + }
187 + }
188 +
189 + // 空状态
190 + .empty-state {
191 + display: flex;
192 + flex-direction: column;
193 + align-items: center;
194 + justify-content: center;
195 + padding: 100rpx 30rpx;
196 +
197 +
198 +
199 + .empty-text {
200 + font-size: 28rpx;
201 + color: #999;
202 + }
203 + }
204 + }
205 + }
206 +
207 + // ==================== 右侧弹出详情 ====================
208 + .detail-popup {
209 + height: 100%;
210 + background-color: #fff;
211 + display: flex;
212 + flex-direction: column;
213 +
214 + // 详情头部
215 + .detail-header {
216 + display: flex;
217 + align-items: center;
218 + justify-content: space-between;
219 + padding: 30rpx;
220 + border-bottom: 1rpx solid #eee;
221 + background-color: #fff;
222 + position: sticky;
223 + top: 0;
224 + z-index: 10;
225 +
226 + .detail-title {
227 + font-size: 36rpx;
228 + font-weight: 600;
229 + color: #333;
230 + flex: 1;
231 + margin-right: 20rpx;
232 + overflow: hidden;
233 + text-overflow: ellipsis;
234 + white-space: nowrap;
235 + }
236 +
237 + .close-btn {
238 + padding: 10rpx;
239 +
240 + .close-text {
241 + font-size: 28rpx;
242 + color: #1890ff;
243 + }
244 + }
245 + }
246 +
247 + // 详情内容
248 + .detail-content {
249 + flex: 1;
250 +
251 + .detail-body {
252 + padding: 30rpx;
253 +
254 + .detail-section {
255 + margin-bottom: 40rpx;
256 +
257 + &:last-child {
258 + margin-bottom: 0;
259 + }
260 +
261 + .section-title {
262 + font-size: 32rpx;
263 + font-weight: 600;
264 + color: #333;
265 + margin-bottom: 20rpx;
266 + padding-bottom: 10rpx;
267 + border-bottom: 2rpx solid #1890ff;
268 + display: inline-block;
269 + }
270 +
271 + .section-content {
272 + font-size: 28rpx;
273 + color: #666;
274 + line-height: 1.6;
275 + display: block;
276 + }
277 +
278 + // 解决方案步骤
279 + .solution-content {
280 + .solution-step {
281 + display: flex;
282 + align-items: flex-start;
283 + margin-bottom: 20rpx;
284 + padding: 20rpx;
285 + background-color: #f8f9fa;
286 + border-radius: 12rpx;
287 + border-left: 4rpx solid #1890ff;
288 +
289 + &:last-child {
290 + margin-bottom: 0;
291 + }
292 +
293 + .step-number {
294 + width: 40rpx;
295 + height: 40rpx;
296 + background-color: #1890ff;
297 + color: #fff;
298 + border-radius: 50%;
299 + display: flex;
300 + align-items: center;
301 + justify-content: center;
302 + font-size: 24rpx;
303 + font-weight: 600;
304 + margin-right: 20rpx;
305 + flex-shrink: 0;
306 + }
307 +
308 + .step-content {
309 + font-size: 28rpx;
310 + color: #333;
311 + line-height: 1.5;
312 + flex: 1;
313 + }
314 + }
315 + }
316 +
317 + // 相关链接
318 + .related-links {
319 + .related-link {
320 + display: flex;
321 + align-items: center;
322 + justify-content: space-between;
323 + padding: 20rpx;
324 + background-color: #f8f9fa;
325 + border-radius: 12rpx;
326 + margin-bottom: 15rpx;
327 + border: 1rpx solid #e9ecef;
328 + transition: all 0.3s ease;
329 +
330 + &:last-child {
331 + margin-bottom: 0;
332 + }
333 +
334 + &:active {
335 + background-color: #e9ecef;
336 + }
337 +
338 + .link-text {
339 + font-size: 28rpx;
340 + color: #1890ff;
341 + flex: 1;
342 + }
343 +
344 + .link-arrow {
345 + font-size: 24rpx;
346 + color: #1890ff;
347 + }
348 + }
349 + }
350 +
351 + // 联系客服
352 + .contact-section {
353 + .contact-btn {
354 + width: 100%;
355 + display: flex;
356 + align-items: center;
357 + justify-content: center;
358 + padding: 25rpx;
359 + background: linear-gradient(135deg, #1890ff, #40a9ff);
360 + color: #fff;
361 + border: none;
362 + border-radius: 50rpx;
363 + font-size: 30rpx;
364 + font-weight: 500;
365 + transition: all 0.3s ease;
366 + box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
367 +
368 + &:active {
369 + transform: translateY(2rpx);
370 + box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3);
371 + }
372 +
373 +
374 + }
375 + }
376 + }
377 + }
378 + }
379 + }
3 } 380 }
......
This diff is collapsed. Click to expand it.
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: 2025-07-03 17:58:15 4 + * @LastEditTime: 2025-07-03 21:01:21
5 * @FilePath: /jgdl/src/pages/index/index.vue 5 * @FilePath: /jgdl/src/pages/index/index.vue
6 * @Description: 捡个电驴首页 6 * @Description: 捡个电驴首页
7 --> 7 -->
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
131 </view> 131 </view>
132 <view class="flex-1 p-3 relative"> 132 <view class="flex-1 p-3 relative">
133 <view class="absolute top-2 right-2" @tap.stop="() => toggleFavorite(scooter.id)"> 133 <view class="absolute top-2 right-2" @tap.stop="() => toggleFavorite(scooter.id)">
134 - <Heart1 v-if="!favoriteIds.includes(scooter.id)" size="16" :color="'#ffffff'" /> 134 + <Heart1 v-if="!favoriteIds.includes(scooter.id)" size="16" :color="'#9ca3af'" />
135 <HeartFill v-else size="16" :color="'#ef4444'" /> 135 <HeartFill v-else size="16" :color="'#ef4444'" />
136 </view> 136 </view>
137 <text class="font-medium text-sm block">{{ scooter.name }}</text> 137 <text class="font-medium text-sm block">{{ scooter.name }}</text>
......