99 lines
6.0 KiB
HTML
99 lines
6.0 KiB
HTML
<!-- 续费升级 -->
|
||
<style>
|
||
.sup-page { display:flex; flex-direction:column; gap:20px; }
|
||
|
||
/* 套餐卡片 */
|
||
.sup-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
|
||
.sup-card { background:#fff; border-radius:var(--g-radius-lg); border:1px solid var(--g-border); padding:28px 24px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; transition:var(--g-transition); }
|
||
.sup-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
||
.sup-card.current { border:2px solid var(--primary); }
|
||
.sup-ribbon { position:absolute; top:12px; right:12px; }
|
||
.sup-plan-name { font-size:20px; font-weight:700; color:var(--g-text); margin-bottom:8px; }
|
||
.sup-price { font-size:28px; font-weight:800; color:var(--primary); margin-bottom:4px; letter-spacing:-0.5px; }
|
||
.sup-price-unit { font-size:14px; font-weight:400; color:var(--g-text-muted); }
|
||
.sup-features { list-style:none; padding:0; margin:20px 0 24px; width:100%; text-align:left; display:flex; flex-direction:column; gap:10px; }
|
||
.sup-features li { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--g-text-secondary); }
|
||
.sup-features li i { width:16px; height:16px; color:var(--g-success); flex-shrink:0; }
|
||
.sup-card .g-btn { width:100%; }
|
||
|
||
/* Section 标题 */
|
||
.sup-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
|
||
|
||
/* 对比表 */
|
||
.sup-compare { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:20px 24px; }
|
||
.sup-compare .g-table th:not(:first-child),
|
||
.sup-compare .g-table td:not(:first-child) { text-align:center; }
|
||
.sup-compare .g-table th:first-child { min-width:140px; }
|
||
</style>
|
||
|
||
<div class="sup-page">
|
||
<!-- 套餐卡片 -->
|
||
<div class="sup-plans">
|
||
<!-- 基础版 -->
|
||
<div class="sup-card">
|
||
<div class="sup-plan-name">基础版</div>
|
||
<div class="sup-price">¥1,980<span class="sup-price-unit">/年</span></div>
|
||
<ul class="sup-features">
|
||
<li><i data-lucide="check"></i>1 个门店</li>
|
||
<li><i data-lucide="check"></i>3 个子账号</li>
|
||
<li><i data-lucide="check"></i>5GB 存储空间</li>
|
||
<li><i data-lucide="check"></i>基础功能</li>
|
||
</ul>
|
||
<button class="g-btn">降级</button>
|
||
</div>
|
||
<!-- 专业版 -->
|
||
<div class="sup-card current">
|
||
<div class="sup-ribbon"><span class="g-tag g-tag-blue">当前套餐</span></div>
|
||
<div class="sup-plan-name">专业版</div>
|
||
<div class="sup-price">¥4,980<span class="sup-price-unit">/年</span></div>
|
||
<ul class="sup-features">
|
||
<li><i data-lucide="check"></i>5 个门店</li>
|
||
<li><i data-lucide="check"></i>10 个子账号</li>
|
||
<li><i data-lucide="check"></i>10GB 存储空间</li>
|
||
<li><i data-lucide="check"></i>全部功能（不含AI和连锁）</li>
|
||
</ul>
|
||
<button class="g-btn" disabled>当前套餐</button>
|
||
</div>
|
||
<!-- 旗舰版 -->
|
||
<div class="sup-card">
|
||
<div class="sup-plan-name">旗舰版</div>
|
||
<div class="sup-price">¥9,980<span class="sup-price-unit">/年</span></div>
|
||
<ul class="sup-features">
|
||
<li><i data-lucide="check"></i>不限门店</li>
|
||
<li><i data-lucide="check"></i>不限子账号</li>
|
||
<li><i data-lucide="check"></i>50GB 存储空间</li>
|
||
<li><i data-lucide="check"></i>全部功能</li>
|
||
</ul>
|
||
<button class="g-btn g-btn-primary">立即升级</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="g-divider"></div>
|
||
|
||
<!-- 功能对比 -->
|
||
<div class="sup-compare">
|
||
<div class="sup-section-hd">功能对比</div>
|
||
<table class="g-table">
|
||
<thead>
|
||
<tr><th>功能</th><th>基础版</th><th>专业版</th><th>旗舰版</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>门店数量</td><td>1</td><td>5</td><td>不限</td></tr>
|
||
<tr><td>子账号</td><td>3</td><td>10</td><td>不限</td></tr>
|
||
<tr><td>存储空间</td><td>5GB</td><td>10GB</td><td>50GB</td></tr>
|
||
<tr><td>商品管理</td><td><i data-lucide="check" style="color:var(--g-success);width:16px;height:16px;"></i></td><td><i data-lucide="check" style="color:var(--g-success);width:16px;height:16px;"></i></td><td><i data-lucide="check" style="color:var(--g-success);width:16px;height:16px;"></i></td></tr>
|
||
<tr><td>订单管理</td><td><i data-lucide="check" style="color:var(--g-success);width:16px;height:16px;"></i></td><td><i data-lucide="check" style="color:var(--g-success);width:16px;height:16px;"></i></td><td><i data-lucide="check" style="color:var(--g-success);width:16px;height:16px;"></i></td></tr>
|
||
<tr><td>数据统计</td><td>基础</td><td>高级</td><td>高级</td></tr>
|
||
<tr><td>多渠道整合</td><td><i data-lucide="x" style="color:var(--g-text-muted);width:16px;height:16px;"></i></td><td><i data-lucide="check" style="color:var(--g-success);width:16px;height:16px;"></i></td><td><i data-lucide="check" style="color:var(--g-success);width:16px;height:16px;"></i></td></tr>
|
||
<tr><td>AI智能</td><td><i data-lucide="x" style="color:var(--g-text-muted);width:16px;height:16px;"></i></td><td><i data-lucide="x" style="color:var(--g-text-muted);width:16px;height:16px;"></i></td><td><i data-lucide="check" style="color:var(--g-success);width:16px;height:16px;"></i></td></tr>
|
||
<tr><td>连锁管理</td><td><i data-lucide="x" style="color:var(--g-text-muted);width:16px;height:16px;"></i></td><td><i data-lucide="x" style="color:var(--g-text-muted);width:16px;height:16px;"></i></td><td><i data-lucide="check" style="color:var(--g-success);width:16px;height:16px;"></i></td></tr>
|
||
<tr><td>专属客服</td><td><i data-lucide="x" style="color:var(--g-text-muted);width:16px;height:16px;"></i></td><td><i data-lucide="x" style="color:var(--g-text-muted);width:16px;height:16px;"></i></td><td><i data-lucide="check" style="color:var(--g-success);width:16px;height:16px;"></i></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
if(typeof lucide!=='undefined'){lucide.createIcons();}
|
||
</script>
|