Hooke / jgdl

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

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

实现帮助中心页面的完整功能，包括：
- 添加搜索框支持关键词搜索帮助内容
- 实现分类筛选功能
- 创建帮助列表展示及详情弹窗
- 设计完整的UI样式和交互逻辑
- 添加示例数据展示功能效果
Inline Side-by-side
Showing 4 changed files with 802 additions and 16 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 }
......
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-02 14:50:57 4 + * @LastEditTime: 2025-07-03 20:52:12
5 - * @FilePath: /jgdl/src/pages/demo/index.vue 5 + * @FilePath: /jgdl/src/pages/helpCenter/index.vue
6 - * @Description: 文件描述 6 + * @Description: 帮助中心页面
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="red">{{ str }}</div> 9 + <view class="help-center-page">
10 + <!-- 搜索框 -->
11 + <view class="search-section">
12 + <view class="search-box">
13 + <input
14 + v-model="searchKeyword"
15 + placeholder="搜索帮助内容"
16 + class="search-input"
17 + @input="handleSearch"
18 + />
19 + </view>
20 + </view>
21 +
22 + <!-- 帮助分类 -->
23 + <view class="category-section">
24 + <view class="category-title">常见问题</view>
25 + <view class="category-grid">
26 + <view
27 + v-for="category in categories"
28 + :key="category.id"
29 + class="category-item"
30 + @click="filterByCategory(category.id)"
31 + :class="{ active: selectedCategory === category.id }"
32 + >
33 +
34 + <text class="category-name">{{ category.name }}</text>
35 + </view>
36 + </view>
37 + </view>
38 +
39 + <!-- 帮助列表 -->
40 + <view class="help-list-section">
41 + <scroll-view
42 + class="help-list"
43 + :scroll-y="true"
44 + :style="scrollStyle"
45 + >
46 + <view class="help-items">
47 + <view
48 + v-for="item in filteredHelpItems"
49 + :key="item.id"
50 + class="help-item"
51 + @click="showHelpDetail(item)"
52 + >
53 + <view class="help-item-left">
54 +
55 + <view class="help-content">
56 + <text class="help-title">{{ item.title }}</text>
57 + <text class="help-desc">{{ item.description }}</text>
58 + </view>
59 + </view>
60 + <view class="help-item-right">
61 + <text class="arrow-text"><RectRight /></text>
62 + </view>
63 + </view>
64 + </view>
65 +
66 + <!-- 空状态 -->
67 + <view
68 + v-if="filteredHelpItems.length === 0"
69 + class="empty-state"
70 + >
71 +
72 + <text class="empty-text">暂无相关帮助内容</text>
73 + </view>
74 + </scroll-view>
75 + </view>
76 +
77 + <!-- 右侧弹出详情 -->
78 + <nut-popup
79 + v-model:visible="showDetailPopup"
80 + position="right"
81 + :style="{ width: '85%', height: '100%' }"
82 + @close="closeDetail"
83 + >
84 + <view class="detail-popup">
85 + <!-- 详情头部 -->
86 + <view class="detail-header">
87 + <view class="detail-title">{{ currentHelpItem?.title }}</view>
88 + <view class="close-btn" @click="closeDetail">
89 + <text class="close-text">关闭</text>
90 + </view>
91 + </view>
92 +
93 + <!-- 详情内容 -->
94 + <scroll-view class="detail-content" :scroll-y="true">
95 + <view class="detail-body">
96 + <!-- 问题描述 -->
97 + <view class="detail-section">
98 + <view class="section-title">问题描述</view>
99 + <text class="section-content">{{ currentHelpItem?.description }}</text>
100 + </view>
101 +
102 + <!-- 解决方案 -->
103 + <view class="detail-section">
104 + <view class="section-title">解决方案</view>
105 + <view class="solution-content">
106 + <view
107 + v-for="(step, index) in currentHelpItem?.solution"
108 + :key="index"
109 + class="solution-step"
110 + >
111 + <view class="step-number">{{ index + 1 }}</view>
112 + <text class="step-content">{{ step }}</text>
113 + </view>
114 + </view>
115 + </view>
116 +
117 + <!-- 相关链接 -->
118 + <!-- <view v-if="currentHelpItem?.relatedLinks?.length" class="detail-section">
119 + <view class="section-title">相关链接</view>
120 + <view class="related-links">
121 + <view
122 + v-for="link in currentHelpItem.relatedLinks"
123 + :key="link.id"
124 + class="related-link"
125 + @click="openRelatedLink(link)"
126 + >
127 + <text class="link-text">{{ link.title }}</text>
128 + <text class="link-arrow">></text>
129 + </view>
130 + </view>
131 + </view> -->
132 +
133 + <!-- 联系客服 -->
134 + <!-- <view class="detail-section">
135 + <view class="section-title">还有问题？</view>
136 + <view class="contact-section">
137 + <button class="contact-btn" @click="contactService">
138 + <text>联系客服</text>
139 + </button>
140 + </view>
141 + </view> -->
142 + </view>
143 + </scroll-view>
144 + </view>
145 + </nut-popup>
146 +
147 + <!-- Toast提示 -->
148 + <nut-toast
149 + v-model:visible="toastVisible"
150 + :msg="toastMessage"
151 + :type="toastType"
152 + />
153 + </view>
10 </template> 154 </template>
11 155
12 <script setup> 156 <script setup>
13 -// import '@tarojs/taro/html.css' 157 +import { ref, computed, onMounted } from 'vue'
14 -import { ref } from "vue"; 158 +import Taro from '@tarojs/taro'
15 -import "./index.less"; 159 +
160 +import { RectRight } from '@nutui/icons-vue-taro'
161 +import './index.less'
162 +
163 +// ==================== 响应式数据 ====================
164 +/**
165 + * 搜索关键词
166 + */
167 +const searchKeyword = ref('')
168 +
169 +/**
170 + * 选中的分类
171 + */
172 +const selectedCategory = ref('all')
173 +
174 +/**
175 + * 详情弹窗显示状态
176 + */
177 +const showDetailPopup = ref(false)
178 +
179 +/**
180 + * 当前查看的帮助项
181 + */
182 +const currentHelpItem = ref(null)
183 +
184 +/**
185 + * Toast提示
186 + */
187 +const toastVisible = ref(false)
188 +const toastMessage = ref('')
189 +const toastType = ref('success')
190 +
191 +/**
192 + * 帮助分类数据
193 + */
194 +const categories = ref([
195 + { id: 'all', name: '全部', icon: 'Ask' },
196 + { id: 'buy', name: '购买相关', icon: 'Ask' },
197 + { id: 'sell', name: '出售相关', icon: 'Ask' },
198 + { id: 'account', name: '账户问题', icon: 'Ask' },
199 + { id: 'safety', name: '安全保障', icon: 'Ask' }
200 +])
201 +
202 +/**
203 + * 帮助事项数据
204 + */
205 +const helpItems = ref([
206 + {
207 + id: 'h001',
208 + category: 'buy',
209 + icon: 'Ask',
210 + title: '如何购买二手电动车？',
211 + description: '详细介绍购买二手电动车的完整流程',
212 + solution: [
213 + '浏览车辆列表，选择心仪的电动车',
214 + '查看车辆详情，包括图片、参数、价格等信息',
215 + '联系卖家，预约看车时间',
216 + '实地看车，检查车辆状况',
217 + '确认购买，完成交易支付',
218 + '办理过户手续，完成交易'
219 + ],
220 + relatedLinks: [
221 + { id: 'l001', title: '车辆检查指南', url: '/pages/guide/inspection' },
222 + { id: 'l002', title: '交易安全须知', url: '/pages/guide/safety' }
223 + ]
224 + },
225 + {
226 + id: 'h002',
227 + category: 'sell',
228 + icon: 'Ask',
229 + title: '如何发布车辆信息？',
230 + description: '学习如何正确发布您的二手电动车信息',
231 + solution: [
232 + '点击首页的"发布"按钮',
233 + '上传车辆照片（正面、侧面、细节图）',
234 + '填写车辆基本信息（品牌、型号、年份等）',
235 + '设置合理的售价',
236 + '添加车辆描述和联系方式',
237 + '提交审核，等待发布'
238 + ],
239 + relatedLinks: [
240 + { id: 'l003', title: '拍照技巧', url: '/pages/guide/photo' },
241 + { id: 'l004', title: '定价建议', url: '/pages/guide/pricing' }
242 + ]
243 + },
244 + {
245 + id: 'h003',
246 + category: 'buy',
247 + icon: 'Ask',
248 + title: '如何判断车辆质量？',
249 + description: '教您如何识别二手电动车的质量好坏',
250 + solution: [
251 + '检查车辆外观是否有明显损伤',
252 + '测试电池续航能力和充电效果',
253 + '检查刹车系统是否正常',
254 + '测试车辆行驶性能',
255 + '查看车辆保养记录',
256 + '确认车辆手续是否齐全'
257 + ]
258 + },
259 + {
260 + id: 'h004',
261 + category: 'account',
262 + icon: 'Ask',
263 + title: '如何完善个人资料？',
264 + description: '完善个人资料有助于提高交易成功率',
265 + solution: [
266 + '进入个人中心页面',
267 + '点击"编辑资料"按钮',
268 + '上传真实头像照片',
269 + '填写真实姓名和联系方式',
270 + '完成实名认证',
271 + '保存并提交资料'
272 + ]
273 + },
274 + {
275 + id: 'h005',
276 + category: 'safety',
277 + icon: 'Ask',
278 + title: '交易安全保障措施',
279 + description: '了解平台提供的安全保障措施',
280 + solution: [
281 + '平台提供实名认证服务',
282 + '支持第三方担保交易',
283 + '提供车辆质量检测报告',
284 + '建立用户信用评价体系',
285 + '设立客服投诉处理机制',
286 + '提供交易纠纷调解服务'
287 + ]
288 + },
289 + {
290 + id: 'h006',
291 + category: 'buy',
292 + icon: 'Ask',
293 + title: '如何预约看车？',
294 + description: '学习如何与卖家预约看车时间和地点',
295 + solution: [
296 + '在车辆详情页点击"联系卖家"',
297 + '通过平台消息或电话联系',
298 + '协商看车时间和地点',
299 + '确认看车安排',
300 + '按时到达约定地点',
301 + '仔细检查车辆状况'
302 + ]
303 + },
304 + {
305 + id: 'h007',
306 + category: 'sell',
307 + icon: 'Ask',
308 + title: '车辆过户流程',
309 + description: '了解二手电动车过户的详细流程',
310 + solution: [
311 + '准备车辆登记证书',
312 + '携带身份证和购车发票',
313 + '前往车管所办理过户',
314 + '填写过户申请表',
315 + '缴纳过户费用',
316 + '领取新的行驶证'
317 + ]
318 + },
319 + {
320 + id: 'h008',
321 + category: 'account',
322 + icon: 'Ask',
323 + title: '如何修改密码？',
324 + description: '保护账户安全，定期修改登录密码',
325 + solution: [
326 + '进入个人中心',
327 + '点击"账户设置"',
328 + '选择"修改密码"',
329 + '输入当前密码',
330 + '设置新密码（至少8位）',
331 + '确认新密码并保存'
332 + ]
333 + }
334 +])
335 +
336 +/**
337 + * 滚动样式
338 + */
339 +const scrollStyle = computed(() => {
340 + return {
341 + height: 'calc(100vh - 260rpx)' // 减去header、搜索框、分类的高度
342 + }
343 +})
344 +
345 +/**
346 + * 过滤后的帮助事项
347 + */
348 +const filteredHelpItems = computed(() => {
349 + let items = helpItems.value
350 +
351 + // 按分类过滤
352 + if (selectedCategory.value !== 'all') {
353 + items = items.filter(item => item.category === selectedCategory.value)
354 + }
355 +
356 + // 按搜索关键词过滤
357 + if (searchKeyword.value.trim()) {
358 + const keyword = searchKeyword.value.toLowerCase()
359 + items = items.filter(item =>
360 + item.title.toLowerCase().includes(keyword) ||
361 + item.description.toLowerCase().includes(keyword)
362 + )
363 + }
364 +
365 + return items
366 +})
367 +
368 +// ==================== 方法 ====================
369 +/**
370 + * 返回上一页
371 + */
372 +const goBack = () => {
373 + Taro.navigateBack()
374 +}
375 +
376 +/**
377 + * 处理搜索
378 + */
379 +const handleSearch = () => {
380 + // 搜索逻辑已在computed中处理
381 +}
382 +
383 +/**
384 + * 按分类过滤
385 + */
386 +const filterByCategory = (categoryId) => {
387 + selectedCategory.value = categoryId
388 +}
389 +
390 +/**
391 + * 显示帮助详情
392 + */
393 +const showHelpDetail = (item) => {
394 + currentHelpItem.value = item
395 + showDetailPopup.value = true
396 +}
397 +
398 +/**
399 + * 关闭详情
400 + */
401 +const closeDetail = () => {
402 + showDetailPopup.value = false
403 + currentHelpItem.value = null
404 +}
405 +
406 +/**
407 + * 打开相关链接
408 + */
409 +const openRelatedLink = (link) => {
410 + // TODO: 根据实际需求跳转到相关页面
411 + Toast.success(`即将跳转到：${link.title}`)
412 +}
413 +
414 +/**
415 + * 联系客服
416 + */
417 +const contactService = () => {
418 + // TODO: 实现联系客服功能
419 + Toast.success('正在为您转接客服...')
420 +}
421 +
422 +
16 423
17 -// 定义响应式数据 424 +// ==================== 生命周期 ====================
18 -const str = ref('Demo页面') 425 +onMounted(() => {
426 + // 页面初始化逻辑
427 +})
19 </script> 428 </script>
20 429
21 <script> 430 <script>
22 export default { 431 export default {
23 - name: "demoPage", 432 + name: 'HelpCenterPage'
24 -}; 433 +}
25 </script> 434 </script>
......
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>
......