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
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 20:25:34
* @LastEditTime: 2025-07-03 20:54:14
* @FilePath: /jgdl/src/pages/feedBack/index.vue
* @Description: 意见反馈页面
-->
......
.red {
color: red;
// 帮助中心页面样式
.help-center-page {
background-color: #f5f5f5;
min-height: 100vh;
// ==================== 头部导航 ====================
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx;
background-color: #fff;
border-bottom: 1rpx solid #eee;
position: sticky;
top: 0;
z-index: 100;
.header-left {
display: flex;
align-items: center;
padding: 10rpx;
.back-text {
font-size: 28rpx;
color: #1890ff;
}
}
.header-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
.header-right {
width: 56rpx; // 保持布局平衡
}
}
// ==================== 搜索框 ====================
.search-section {
padding: 30rpx;
background-color: #fff;
border-bottom: 1rpx solid #eee;
.search-box {
display: flex;
align-items: center;
background-color: #f8f8f8;
border-radius: 50rpx;
padding: 20rpx 30rpx;
border: 1rpx solid #e0e0e0;
.search-input {
flex: 1;
font-size: 28rpx;
color: #333;
background: transparent;
border: none;
outline: none;
&::placeholder {
color: #999;
}
}
}
}
// ==================== 分类选择 ====================
.category-section {
padding: 30rpx;
background-color: #fff;
margin-bottom: 20rpx;
.category-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 30rpx;
}
.category-grid {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
.category-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
background-color: #f8f8f8;
border-radius: 20rpx;
border: 2rpx solid transparent;
transition: all 0.3s ease;
min-width: 120rpx;
&.active {
background-color: #e8f4fd;
border-color: #1890ff;
.category-name {
color: #1890ff;
}
}
.category-name {
font-size: 24rpx;
color: #666;
text-align: center;
transition: color 0.3s ease;
}
}
}
}
// ==================== 帮助列表 ====================
.help-list-section {
flex: 1;
background-color: #fff;
margin: 30rpx;
border-radius: 20rpx;
overflow: hidden;
.help-list {
.help-items {
.help-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1rpx solid #f0f0f0;
transition: background-color 0.3s ease;
&:last-child {
border-bottom: none;
}
&:active {
background-color: #f8f8f8;
}
.help-item-left {
display: flex;
align-items: center;
flex: 1;
.help-content {
flex: 1;
.help-title {
display: block;
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-bottom: 10rpx;
line-height: 1.4;
}
.help-desc {
display: block;
font-size: 26rpx;
color: #666;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.help-item-right {
.arrow-text {
font-size: 28rpx;
color: #ccc;
}
}
}
}
// 空状态
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 30rpx;
.empty-text {
font-size: 28rpx;
color: #999;
}
}
}
}
// ==================== 右侧弹出详情 ====================
.detail-popup {
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
// 详情头部
.detail-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1rpx solid #eee;
background-color: #fff;
position: sticky;
top: 0;
z-index: 10;
.detail-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
flex: 1;
margin-right: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.close-btn {
padding: 10rpx;
.close-text {
font-size: 28rpx;
color: #1890ff;
}
}
}
// 详情内容
.detail-content {
flex: 1;
.detail-body {
padding: 30rpx;
.detail-section {
margin-bottom: 40rpx;
&:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
padding-bottom: 10rpx;
border-bottom: 2rpx solid #1890ff;
display: inline-block;
}
.section-content {
font-size: 28rpx;
color: #666;
line-height: 1.6;
display: block;
}
// 解决方案步骤
.solution-content {
.solution-step {
display: flex;
align-items: flex-start;
margin-bottom: 20rpx;
padding: 20rpx;
background-color: #f8f9fa;
border-radius: 12rpx;
border-left: 4rpx solid #1890ff;
&:last-child {
margin-bottom: 0;
}
.step-number {
width: 40rpx;
height: 40rpx;
background-color: #1890ff;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-weight: 600;
margin-right: 20rpx;
flex-shrink: 0;
}
.step-content {
font-size: 28rpx;
color: #333;
line-height: 1.5;
flex: 1;
}
}
}
// 相关链接
.related-links {
.related-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx;
background-color: #f8f9fa;
border-radius: 12rpx;
margin-bottom: 15rpx;
border: 1rpx solid #e9ecef;
transition: all 0.3s ease;
&:last-child {
margin-bottom: 0;
}
&:active {
background-color: #e9ecef;
}
.link-text {
font-size: 28rpx;
color: #1890ff;
flex: 1;
}
.link-arrow {
font-size: 24rpx;
color: #1890ff;
}
}
}
// 联系客服
.contact-section {
.contact-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 25rpx;
background: linear-gradient(135deg, #1890ff, #40a9ff);
color: #fff;
border: none;
border-radius: 50rpx;
font-size: 30rpx;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
&:active {
transform: translateY(2rpx);
box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3);
}
}
}
}
}
}
}
}
......
This diff is collapsed. Click to expand it.
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 17:58:15
* @LastEditTime: 2025-07-03 21:01:21
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
......@@ -131,7 +131,7 @@
</view>
<view class="flex-1 p-3 relative">
<view class="absolute top-2 right-2" @tap.stop="() => toggleFavorite(scooter.id)">
<Heart1 v-if="!favoriteIds.includes(scooter.id)" size="16" :color="'#ffffff'" />
<Heart1 v-if="!favoriteIds.includes(scooter.id)" size="16" :color="'#9ca3af'" />
<HeartFill v-else size="16" :color="'#ef4444'" />
</view>
<text class="font-medium text-sm block">{{ scooter.name }}</text>
......