|
|
@@ -0,0 +1,609 @@
|
|
|
+<template>
|
|
|
+ <div class="help-list-page">
|
|
|
+ <!-- 左侧导航 -->
|
|
|
+ <aside class="help-sidebar">
|
|
|
+ <div class="sidebar-header">
|
|
|
+ <h2>帮助中心</h2>
|
|
|
+ </div>
|
|
|
+ <nav class="sidebar-nav">
|
|
|
+ <div v-for="category in categories" :key="category.id" class="nav-category">
|
|
|
+ <div class="category-title" :class="{ active: currentCategory === category.id }" @click="toggleCategory(category.id)">
|
|
|
+ <span>{{ category.name }}</span>
|
|
|
+ <el-icon v-if="category.children && category.children.length > 0">
|
|
|
+ <ArrowRight v-if="expandedCategory !== category.id" />
|
|
|
+ <ArrowDown v-else />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <transition name="slide-fade">
|
|
|
+ <div v-if="expandedCategory === category.id && category.children" class="category-children">
|
|
|
+ <a
|
|
|
+ v-for="child in category.children"
|
|
|
+ :key="child.id"
|
|
|
+ href="#"
|
|
|
+ class="child-item"
|
|
|
+ :class="{ active: currentChild === child.id }"
|
|
|
+ @click.prevent="selectChild(category.id, child.id)"
|
|
|
+ >
|
|
|
+ {{ child.name }}
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- 右侧内容区 -->
|
|
|
+ <main class="help-content">
|
|
|
+ <!-- 面包屑导航 -->
|
|
|
+ <div class="breadcrumb">
|
|
|
+ <span class="breadcrumb-item">帮助分类</span>
|
|
|
+ <el-icon><ArrowRight /></el-icon>
|
|
|
+ <span class="breadcrumb-item">{{ currentCategoryName }}</span>
|
|
|
+ <el-icon v-if="currentChildName"><ArrowRight /></el-icon>
|
|
|
+ <span v-if="currentChildName" class="breadcrumb-item">{{ currentChildName }}</span>
|
|
|
+ <el-icon v-if="currentDetailTitle"><ArrowRight /></el-icon>
|
|
|
+ <span v-if="currentDetailTitle" class="breadcrumb-item active">{{ currentDetailTitle }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 内容区域 -->
|
|
|
+ <div class="content-area">
|
|
|
+ <!-- 列表视图 -->
|
|
|
+ <div v-if="!currentDetailContent" class="list-view">
|
|
|
+ <h3 class="content-title">{{ currentChildName || '请选择具体问题' }}</h3>
|
|
|
+ <div v-if="currentContent" class="content-body">
|
|
|
+ <ul class="question-list">
|
|
|
+ <li v-for="(item, index) in currentContent" :key="index" class="question-item">
|
|
|
+ <span class="question-dot"></span>
|
|
|
+ <a href="#" class="question-link" @click.prevent="selectDetail(item)">{{ item }}</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div v-else class="empty-state">
|
|
|
+ <el-icon :size="64"><Document /></el-icon>
|
|
|
+ <p>请从左侧选择具体的帮助主题</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 详情视图 -->
|
|
|
+ <div v-else class="detail-view">
|
|
|
+ <div class="detail-header">
|
|
|
+ <el-button class="back-btn" @click="backToList">
|
|
|
+ <el-icon><ArrowLeft /></el-icon>
|
|
|
+ 返回列表
|
|
|
+ </el-button>
|
|
|
+ <h3 class="detail-title">{{ currentDetailTitle }}</h3>
|
|
|
+ </div>
|
|
|
+ <div class="detail-content">
|
|
|
+ <p>{{ currentDetailContent }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, computed } from 'vue';
|
|
|
+import { ArrowRight, ArrowDown, Document, ArrowLeft } from '@element-plus/icons-vue';
|
|
|
+
|
|
|
+const expandedCategory = ref<number | null>(null);
|
|
|
+const currentCategory = ref<number>(2);
|
|
|
+const currentChild = ref<number>(1);
|
|
|
+const currentDetailContent = ref<string>('');
|
|
|
+const currentDetailTitle = ref<string>('');
|
|
|
+
|
|
|
+const categories = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: '采购指南',
|
|
|
+ children: [
|
|
|
+ { id: 1, name: '注册流程' },
|
|
|
+ { id: 2, name: '实名认证' },
|
|
|
+ { id: 3, name: '资质审核' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '关于结算',
|
|
|
+ children: [
|
|
|
+ { id: 1, name: '支付方式' },
|
|
|
+ { id: 2, name: '发票管理' },
|
|
|
+ { id: 3, name: '信用管理' },
|
|
|
+ { id: 4, name: '退款管理' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: '配送服务',
|
|
|
+ children: [
|
|
|
+ { id: 1, name: '配送政策' },
|
|
|
+ { id: 2, name: '配送时效' },
|
|
|
+ { id: 3, name: '服务标准' },
|
|
|
+ { id: 4, name: '签收管理' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: '售后服务',
|
|
|
+ children: [
|
|
|
+ { id: 1, name: '退换货政策' },
|
|
|
+ { id: 2, name: '维修服务' },
|
|
|
+ { id: 3, name: '投诉建议' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: '对账管理',
|
|
|
+ children: [
|
|
|
+ { id: 1, name: '账单查询' },
|
|
|
+ { id: 2, name: '对账流程' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+];
|
|
|
+
|
|
|
+const contentData: Record<string, string[]> = {
|
|
|
+ '2-1': ['平台主要的支付方式', '信用支付实施方案', '在线支付操作指南'],
|
|
|
+ '2-2': ['发票申请流程', '发票类型说明', '电子发票下载'],
|
|
|
+ '2-3': ['信用额度申请', '信用支付条件', '信用记录查询'],
|
|
|
+ '2-4': ['退款申请条件', '退款流程说明', '退款进度查询'],
|
|
|
+ '3-1': ['配送范围说明', '运费计算规则', '特殊地区配送'],
|
|
|
+ '3-2': ['标准配送时效', '加急配送服务', '配送时间查询'],
|
|
|
+ '3-3': ['服务质量标准', '验货流程', '异常处理'],
|
|
|
+ '3-4': ['签收注意事项', '代签收规定', '拒收处理'],
|
|
|
+ '4-1': ['退换货条件', '退换货流程', '运费承担规则'],
|
|
|
+ '4-2': ['维修申请流程', '维修周期说明', '保修政策'],
|
|
|
+ '4-3': ['投诉渠道', '建议反馈', '处理时效']
|
|
|
+};
|
|
|
+
|
|
|
+const detailData: Record<string, string> = {
|
|
|
+ '平台主要的支付方式':
|
|
|
+ '本平台支持多种支付方式，包括在线支付、信用支付、线下转账等。在线支付支持支付宝、微信支付、银联卡等多种渠道，方便快捷。信用支付适用于已通过信用审核的企业用户，可享受先使用后付款的便利。',
|
|
|
+ '信用支付实施方案':
|
|
|
+ '信用支付需要企业完成实名认证和资质审核，审核通过后可获得相应的信用额度。信用额度根据企业资质、交易记录等因素综合评定，最高可达100万元。使用信用支付时，系统会自动冻结相应额度，确认收货后扣除。',
|
|
|
+ '在线支付操作指南':
|
|
|
+ '1. 选择商品并加入购物车\n2. 进入结算页面，选择"在线支付"\n3. 选择支付方式（支付宝/微信/银联）\n4. 点击"立即支付"按钮\n5. 扫码或输入账号密码完成支付\n6. 支付成功后可在订单详情中查看状态',
|
|
|
+ '发票申请流程':
|
|
|
+ '1. 登录账户，进入"我的订单"\n2. 找到需要开票的订单\n3. 点击"申请发票"按钮\n4. 填写发票信息（抬头、税号、地址等）\n5. 选择发票类型（增值税专用发票/普通发票）\n6. 提交申请，等待审核\n7. 审核通过后，电子发票将发送至指定邮箱',
|
|
|
+ '发票类型说明':
|
|
|
+ '本平台提供两种发票类型：增值税专用发票和普通发票。增值税专用发票适用于一般纳税人企业，可用于抵扣进项税额；普通发票适用于小规模纳税人和个人用户。申请时需准确填写相关信息，确保发票能够正常使用。',
|
|
|
+ '电子发票下载':
|
|
|
+ '电子发票申请审核通过后，系统会发送至您预留的邮箱。您也可以登录账户，在"发票管理"页面查看和下载已开具的电子发票。电子发票与纸质发票具有同等法律效力，可直接用于报销和记账。',
|
|
|
+ '信用额度申请':
|
|
|
+ '申请信用额度需要准备以下材料：营业执照、税务登记证、开户许可证、法人身份证等。登录账户后进入"信用管理"页面，上传相关材料并提交申请。审核周期一般为3-5个工作日，审核结果会通过站内信和短信通知。',
|
|
|
+ '信用支付条件':
|
|
|
+ '使用信用支付需满足以下条件：1. 已完成企业认证；2. 信用额度审核通过；3. 当前可用额度充足；4. 无逾期未还订单。系统会在结算时自动判断是否符合信用支付条件，符合条件时会显示信用支付选项。',
|
|
|
+ '信用记录查询':
|
|
|
+ '您可以在"信用管理"页面查看完整的信用记录，包括：历史信用额度、使用情况、还款记录、逾期情况等。良好的信用记录有助于提升信用额度，建议按时还款，保持良好的信用状况。',
|
|
|
+ '退款申请条件':
|
|
|
+ '申请退款需满足以下条件：1. 订单未确认收货或未超过售后期限；2. 商品存在质量问题或与描述不符；3. 未使用优惠券或积分兑换的商品；4. 定制类商品不支持无理由退款。申请时需提供相关证明材料，如照片、视频等。',
|
|
|
+ '退款流程说明':
|
|
|
+ '1. 进入"我的订单"，找到需要退款的订单\n2. 点击"申请退款"按钮\n3. 选择退款原因，填写详细说明\n4. 上传相关凭证（照片/视频）\n5. 提交申请，等待商家审核\n6. 审核通过后，退款将在1-3个工作日内原路返回',
|
|
|
+ '退款进度查询':
|
|
|
+ '您可以在"我的订单"或"退款管理"页面查看退款进度。退款状态包括：待审核、审核中、审核通过、退款中、已完成。如有疑问，可联系客服咨询具体进度和处理情况。'
|
|
|
+};
|
|
|
+
|
|
|
+const currentCategoryName = computed(() => {
|
|
|
+ const category = categories.find((c) => c.id === currentCategory.value);
|
|
|
+ return category ? category.name : '';
|
|
|
+});
|
|
|
+
|
|
|
+const currentChildName = computed(() => {
|
|
|
+ const category = categories.find((c) => c.id === currentCategory.value);
|
|
|
+ if (!category || !category.children) return '';
|
|
|
+ const child = category.children.find((ch) => ch.id === currentChild.value);
|
|
|
+ return child ? child.name : '';
|
|
|
+});
|
|
|
+
|
|
|
+const currentContent = computed(() => {
|
|
|
+ const key = `${currentCategory.value}-${currentChild.value}`;
|
|
|
+ return contentData[key] || null;
|
|
|
+});
|
|
|
+
|
|
|
+const toggleCategory = (categoryId: number) => {
|
|
|
+ const category = categories.find((c) => c.id === categoryId);
|
|
|
+ if (category && category.children && category.children.length > 0) {
|
|
|
+ expandedCategory.value = expandedCategory.value === categoryId ? null : categoryId;
|
|
|
+ currentCategory.value = categoryId;
|
|
|
+ // 重置详情状态
|
|
|
+ currentDetailContent.value = '';
|
|
|
+ currentDetailTitle.value = '';
|
|
|
+ } else {
|
|
|
+ currentCategory.value = categoryId;
|
|
|
+ currentChild.value = 0;
|
|
|
+ // 重置详情状态
|
|
|
+ currentDetailContent.value = '';
|
|
|
+ currentDetailTitle.value = '';
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const selectChild = (categoryId: number, childId: number) => {
|
|
|
+ currentCategory.value = categoryId;
|
|
|
+ currentChild.value = childId;
|
|
|
+ expandedCategory.value = categoryId;
|
|
|
+ // 重置详情状态
|
|
|
+ currentDetailContent.value = '';
|
|
|
+ currentDetailTitle.value = '';
|
|
|
+};
|
|
|
+
|
|
|
+const selectDetail = (item: string) => {
|
|
|
+ currentDetailTitle.value = item;
|
|
|
+ currentDetailContent.value = detailData[item] || '暂无详细内容';
|
|
|
+};
|
|
|
+
|
|
|
+const backToList = () => {
|
|
|
+ currentDetailContent.value = '';
|
|
|
+ currentDetailTitle.value = '';
|
|
|
+};
|
|
|
+
|
|
|
+// 默认展开第一个有子项的分类
|
|
|
+if (categories[0].children && categories[0].children.length > 0) {
|
|
|
+ expandedCategory.value = categories[0].id;
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.help-list-page {
|
|
|
+ width: clamp(1200px, 100%, 1500px);
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ gap: 24px;
|
|
|
+ min-height: calc(100vh - 300px);
|
|
|
+ padding-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+// 左侧导航
|
|
|
+.help-sidebar {
|
|
|
+ width: 280px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .sidebar-header {
|
|
|
+ padding: 14px 24px;
|
|
|
+ background: linear-gradient(135deg, #e7000b 0%, #c9000a 100%);
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sidebar-nav {
|
|
|
+ padding: 16px 0;
|
|
|
+
|
|
|
+ .nav-category {
|
|
|
+ .category-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 14px 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333;
|
|
|
+ border-left: 3px solid transparent;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ color: #e7000b;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background-color: #fff5f5;
|
|
|
+ color: #e7000b;
|
|
|
+ border-left-color: #e7000b;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
+ color: #999;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-children {
|
|
|
+ background-color: #fafafa;
|
|
|
+ padding: 8px 0;
|
|
|
+
|
|
|
+ .child-item {
|
|
|
+ display: block;
|
|
|
+ padding: 10px 24px 10px 48px;
|
|
|
+ color: #666;
|
|
|
+ text-decoration: none;
|
|
|
+ font-size: 14px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 32px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #ccc;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ color: #e7000b;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ background-color: #e7000b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background-color: #fff5f5;
|
|
|
+ color: #e7000b;
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ background-color: #e7000b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 右侧内容区
|
|
|
+.help-content {
|
|
|
+ flex: 1;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .breadcrumb {
|
|
|
+ padding: 16px 24px;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border-bottom: 1px solid #e9ecef;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ .breadcrumb-item {
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #e7000b;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-area {
|
|
|
+ padding: 32px;
|
|
|
+
|
|
|
+ // 列表视图样式
|
|
|
+ .list-view {
|
|
|
+ .content-title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin: 0 0 24px 0;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ border-bottom: 2px solid #e7000b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-body {
|
|
|
+ .question-list {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+
|
|
|
+ .question-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 16px;
|
|
|
+ background-color: #fafafa;
|
|
|
+ border-radius: 4px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+
|
|
|
+ .question-dot {
|
|
|
+ background-color: #e7000b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .question-link {
|
|
|
+ color: #e7000b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .question-dot {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #ccc;
|
|
|
+ margin-right: 12px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .question-link {
|
|
|
+ color: #666;
|
|
|
+ text-decoration: none;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5;
|
|
|
+ transition: color 0.3s ease;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 详情视图样式
|
|
|
+ .detail-view {
|
|
|
+ .detail-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ border-bottom: 2px solid #e7000b;
|
|
|
+
|
|
|
+ .back-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ border-color: #dcdfe6;
|
|
|
+ color: #606266;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #e7000b;
|
|
|
+ border-color: #e7000b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin: 0;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-content {
|
|
|
+ p {
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 1.8;
|
|
|
+ color: #666;
|
|
|
+ margin: 0;
|
|
|
+ white-space: pre-line;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-state {
|
|
|
+ text-align: center;
|
|
|
+ padding: 80px 20px;
|
|
|
+ color: #999;
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
+ color: #ddd;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 过渡动画
|
|
|
+.slide-fade-enter-active,
|
|
|
+.slide-fade-leave-active {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.slide-fade-enter-from,
|
|
|
+.slide-fade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(-10px);
|
|
|
+}
|
|
|
+
|
|
|
+// 响应式适配
|
|
|
+@media (max-width: 1400px) {
|
|
|
+ .help-sidebar {
|
|
|
+ width: 260px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 1280px) {
|
|
|
+ .help-list-page {
|
|
|
+ padding: 0 16px;
|
|
|
+ gap: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .help-sidebar {
|
|
|
+ width: 240px;
|
|
|
+
|
|
|
+ .sidebar-header {
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sidebar-nav {
|
|
|
+ padding: 12px 0;
|
|
|
+
|
|
|
+ .nav-category {
|
|
|
+ .category-title {
|
|
|
+ padding: 12px 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-children {
|
|
|
+ .child-item {
|
|
|
+ padding: 8px 20px 8px 40px;
|
|
|
+ font-size: 13px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ left: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .help-content {
|
|
|
+ .breadcrumb {
|
|
|
+ padding: 12px 20px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-area {
|
|
|
+ padding: 24px;
|
|
|
+
|
|
|
+ .content-title {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-body {
|
|
|
+ .question-list {
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ .question-item {
|
|
|
+ padding: 10px 14px;
|
|
|
+
|
|
|
+ .question-link {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
weixin_52219567