180 lines
7.6 KiB
HTML
180 lines
7.6 KiB
HTML
<!-- 帮助中心 -->
|
|
<style>
|
|
.hlp-page { display:flex; flex-direction:column; gap:24px; }
|
|
.hlp-search-area { display:flex; justify-content:center; padding:20px 0 8px; }
|
|
.hlp-search-box {
|
|
width:500px; position:relative;
|
|
}
|
|
.hlp-search-box input {
|
|
width:100%; height:44px; padding:0 16px 0 42px; border:1px solid var(--g-border);
|
|
border-radius:var(--g-radius-lg); font-size:14px; outline:none; transition:var(--g-transition);
|
|
background:#fff; box-shadow:var(--g-shadow-sm);
|
|
}
|
|
.hlp-search-box input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
|
.hlp-search-icon {
|
|
position:absolute; left:14px; top:50%; transform:translateY(-50%);
|
|
color:var(--g-text-muted); pointer-events:none;
|
|
}
|
|
.hlp-search-icon svg { width:18px; height:18px; }
|
|
|
|
.hlp-shortcuts { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
|
|
.hlp-shortcut-card {
|
|
background:#fff; border-radius:var(--g-radius); padding:24px 20px;
|
|
display:flex; flex-direction:column; align-items:center; text-align:center;
|
|
gap:10px; box-shadow:var(--g-shadow-sm); transition:var(--g-transition); cursor:pointer;
|
|
}
|
|
.hlp-shortcut-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
|
.hlp-shortcut-icon {
|
|
width:48px; height:48px; border-radius:12px; display:flex; align-items:center;
|
|
justify-content:center; color:#fff;
|
|
}
|
|
.hlp-shortcut-icon svg { width:22px; height:22px; }
|
|
.hlp-shortcut-icon.hlp-c1 { background:var(--primary); }
|
|
.hlp-shortcut-icon.hlp-c2 { background:var(--g-success); }
|
|
.hlp-shortcut-icon.hlp-c3 { background:var(--g-warning); }
|
|
.hlp-shortcut-icon.hlp-c4 { background:#722ed1; }
|
|
.hlp-shortcut-title { font-size:14px; font-weight:600; color:var(--g-text); }
|
|
.hlp-shortcut-desc { font-size:12px; color:var(--g-text-muted); line-height:1.5; }
|
|
|
|
.hlp-section-hd {
|
|
font-size:15px; font-weight:600; color:var(--g-text);
|
|
padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px;
|
|
}
|
|
.hlp-faq-list { display:flex; flex-direction:column; gap:6px; }
|
|
.hlp-faq-item {
|
|
display:flex; align-items:center; gap:10px; padding:12px 16px;
|
|
background:#fff; border-radius:var(--g-radius-sm); box-shadow:var(--g-shadow-sm);
|
|
transition:var(--g-transition); cursor:pointer;
|
|
}
|
|
.hlp-faq-item:hover { box-shadow:var(--g-shadow-md); background:color-mix(in srgb, var(--primary) 3%, #fff); }
|
|
.hlp-faq-item svg { width:16px; height:16px; color:var(--g-text-muted); flex-shrink:0; }
|
|
.hlp-faq-text { flex:1; font-size:13px; color:var(--g-text); }
|
|
.hlp-faq-views { font-size:12px; color:var(--g-text-muted); white-space:nowrap; }
|
|
|
|
.hlp-contact { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
|
|
.hlp-contact-item {
|
|
display:flex; align-items:center; gap:14px; padding:20px;
|
|
}
|
|
.hlp-contact-icon {
|
|
width:44px; height:44px; border-radius:10px; display:flex; align-items:center;
|
|
justify-content:center; background:var(--primary-light); color:var(--primary); flex-shrink:0;
|
|
}
|
|
.hlp-contact-icon svg { width:20px; height:20px; }
|
|
.hlp-contact-info { display:flex; flex-direction:column; gap:2px; }
|
|
.hlp-contact-label { font-size:12px; color:var(--g-text-muted); }
|
|
.hlp-contact-value { font-size:14px; font-weight:600; color:var(--g-text); }
|
|
</style>
|
|
|
|
<div class="hlp-page">
|
|
<!-- 搜索区 -->
|
|
<div class="hlp-search-area">
|
|
<div class="hlp-search-box">
|
|
<span class="hlp-search-icon"><i data-lucide="search"></i></span>
|
|
<input class="g-input" placeholder="搜索常见问题..." style="padding-left:42px;height:44px;border-radius:var(--g-radius-lg);">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 快捷入口 -->
|
|
<div class="hlp-shortcuts">
|
|
<div class="hlp-shortcut-card">
|
|
<div class="hlp-shortcut-icon hlp-c1"><i data-lucide="book-open"></i></div>
|
|
<div class="hlp-shortcut-title">新手指南</div>
|
|
<div class="hlp-shortcut-desc">快速上手平台核心功能</div>
|
|
</div>
|
|
<div class="hlp-shortcut-card">
|
|
<div class="hlp-shortcut-icon hlp-c2"><i data-lucide="help-circle"></i></div>
|
|
<div class="hlp-shortcut-title">常见问题</div>
|
|
<div class="hlp-shortcut-desc">查看高频问题解答</div>
|
|
</div>
|
|
<div class="hlp-shortcut-card">
|
|
<div class="hlp-shortcut-icon hlp-c3"><i data-lucide="play-circle"></i></div>
|
|
<div class="hlp-shortcut-title">操作教程</div>
|
|
<div class="hlp-shortcut-desc">图文视频操作演示</div>
|
|
</div>
|
|
<div class="hlp-shortcut-card">
|
|
<div class="hlp-shortcut-icon hlp-c4"><i data-lucide="headphones"></i></div>
|
|
<div class="hlp-shortcut-title">联系客服</div>
|
|
<div class="hlp-shortcut-desc">在线客服实时响应</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 热门问题 -->
|
|
<div>
|
|
<div class="hlp-section-hd">热门问题</div>
|
|
<div class="hlp-faq-list">
|
|
<div class="hlp-faq-item">
|
|
<i data-lucide="chevron-right"></i>
|
|
<span class="hlp-faq-text">如何添加新商品？</span>
|
|
<span class="hlp-faq-views">3,842 次浏览</span>
|
|
</div>
|
|
<div class="hlp-faq-item">
|
|
<i data-lucide="chevron-right"></i>
|
|
<span class="hlp-faq-text">如何设置配送范围？</span>
|
|
<span class="hlp-faq-views">2,715 次浏览</span>
|
|
</div>
|
|
<div class="hlp-faq-item">
|
|
<i data-lucide="chevron-right"></i>
|
|
<span class="hlp-faq-text">如何开通微信支付？</span>
|
|
<span class="hlp-faq-views">2,308 次浏览</span>
|
|
</div>
|
|
<div class="hlp-faq-item">
|
|
<i data-lucide="chevron-right"></i>
|
|
<span class="hlp-faq-text">如何查看经营报表？</span>
|
|
<span class="hlp-faq-views">1,956 次浏览</span>
|
|
</div>
|
|
<div class="hlp-faq-item">
|
|
<i data-lucide="chevron-right"></i>
|
|
<span class="hlp-faq-text">如何管理员工权限？</span>
|
|
<span class="hlp-faq-views">1,623 次浏览</span>
|
|
</div>
|
|
<div class="hlp-faq-item">
|
|
<i data-lucide="chevron-right"></i>
|
|
<span class="hlp-faq-text">如何申请发票？</span>
|
|
<span class="hlp-faq-views">1,247 次浏览</span>
|
|
</div>
|
|
<div class="hlp-faq-item">
|
|
<i data-lucide="chevron-right"></i>
|
|
<span class="hlp-faq-text">如何对接美团/饿了么？</span>
|
|
<span class="hlp-faq-views">1,102 次浏览</span>
|
|
</div>
|
|
<div class="hlp-faq-item">
|
|
<i data-lucide="chevron-right"></i>
|
|
<span class="hlp-faq-text">如何使用库存管理？</span>
|
|
<span class="hlp-faq-views">986 次浏览</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 联系我们 -->
|
|
<div>
|
|
<div class="hlp-section-hd">联系我们</div>
|
|
<div class="g-card hlp-contact">
|
|
<div class="hlp-contact-item">
|
|
<div class="hlp-contact-icon"><i data-lucide="message-circle"></i></div>
|
|
<div class="hlp-contact-info">
|
|
<span class="hlp-contact-label">在线客服</span>
|
|
<span class="hlp-contact-value">工作时间 9:00-21:00</span>
|
|
</div>
|
|
</div>
|
|
<div class="hlp-contact-item">
|
|
<div class="hlp-contact-icon"><i data-lucide="phone"></i></div>
|
|
<div class="hlp-contact-info">
|
|
<span class="hlp-contact-label">客服电话</span>
|
|
<span class="hlp-contact-value">400-888-6666</span>
|
|
</div>
|
|
</div>
|
|
<div class="hlp-contact-item">
|
|
<div class="hlp-contact-icon"><i data-lucide="mail"></i></div>
|
|
<div class="hlp-contact-info">
|
|
<span class="hlp-contact-label">邮箱</span>
|
|
<span class="hlp-contact-value">support@takeoutsaas.com</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
if(typeof lucide!=='undefined'){lucide.createIcons();}
|
|
</script>
|