feat: init project with pages and index
This commit is contained in:
308
pages/ch-platform.html
Normal file
308
pages/ch-platform.html
Normal file
@@ -0,0 +1,308 @@
|
||||
<!-- 渠道管理 - 平台接入 -->
|
||||
<style>
|
||||
.chp-page { display:flex; flex-direction:column; gap:20px; }
|
||||
|
||||
/* 顶部统计条 */
|
||||
.chp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
|
||||
.chp-stat-item {
|
||||
background:#fff; border-radius:10px; padding:18px 22px;
|
||||
box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
|
||||
display:flex; align-items:center; gap:14px;
|
||||
}
|
||||
.chp-stat-item:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
||||
.chp-stat-icon {
|
||||
width:42px; height:42px; border-radius:10px; display:flex;
|
||||
align-items:center; justify-content:center; flex-shrink:0;
|
||||
}
|
||||
.chp-stat-icon.blue { background:color-mix(in srgb, var(--primary) 12%, #fff); color:var(--primary); }
|
||||
.chp-stat-icon.green { background:color-mix(in srgb, var(--g-success) 12%, #fff); color:var(--g-success); }
|
||||
.chp-stat-icon.orange { background:color-mix(in srgb, var(--g-warning) 12%, #fff); color:var(--g-warning); }
|
||||
.chp-stat-icon.teal { background:color-mix(in srgb, #06b6d4 12%, #fff); color:#06b6d4; }
|
||||
.chp-stat-label { font-size:13px; color:var(--g-text-muted); margin-bottom:4px; }
|
||||
.chp-stat-value { font-size:22px; font-weight:700; color:var(--g-text); }
|
||||
.chp-stat-value .unit { font-size:13px; font-weight:400; color:var(--g-text-muted); margin-left:2px; }
|
||||
.chp-sync-dot {
|
||||
display:inline-block; width:7px; height:7px; border-radius:50%;
|
||||
background:var(--g-success); margin-right:6px; vertical-align:middle;
|
||||
animation:chp-pulse 2s infinite;
|
||||
}
|
||||
@keyframes chp-pulse {
|
||||
0%,100% { opacity:1; }
|
||||
50% { opacity:.4; }
|
||||
}
|
||||
|
||||
/* Section 标题 */
|
||||
.chp-section-hd {
|
||||
font-size:15px; font-weight:600; color:var(--g-text);
|
||||
padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px;
|
||||
}
|
||||
|
||||
/* 已接入渠道卡片网格 */
|
||||
.chp-channel-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
|
||||
.chp-channel-card {
|
||||
background:#fff; border-radius:10px; padding:22px 24px;
|
||||
box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
|
||||
display:flex; flex-direction:column; gap:16px;
|
||||
}
|
||||
.chp-channel-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-2px); }
|
||||
|
||||
.chp-card-top { display:flex; align-items:center; justify-content:space-between; }
|
||||
.chp-card-top-left { display:flex; align-items:center; gap:12px; }
|
||||
.chp-logo {
|
||||
width:40px; height:40px; border-radius:10px; display:flex;
|
||||
align-items:center; justify-content:center;
|
||||
font-size:18px; font-weight:700; flex-shrink:0;
|
||||
}
|
||||
.chp-logo.meituan { background:#FFC107; color:#1a1a2e; }
|
||||
.chp-logo.eleme { background:#2563eb; color:#fff; }
|
||||
.chp-logo.mini { background:var(--primary); color:#fff; }
|
||||
.chp-logo.gray { background:#e5e7eb; color:#9ca3af; }
|
||||
|
||||
.chp-platform-name { font-size:15px; font-weight:600; color:var(--g-text); }
|
||||
.chp-shop-name { font-size:12px; color:var(--g-text-muted); margin-top:2px; }
|
||||
|
||||
.chp-data-row {
|
||||
display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
|
||||
background:#f8f9fb; border-radius:var(--g-radius); padding:14px 16px;
|
||||
}
|
||||
.chp-data-item { text-align:center; }
|
||||
.chp-data-label { font-size:11px; color:var(--g-text-muted); margin-bottom:4px; }
|
||||
.chp-data-val { font-size:18px; font-weight:700; color:var(--g-text); }
|
||||
.chp-data-val .small-unit { font-size:12px; font-weight:400; color:var(--g-text-muted); }
|
||||
|
||||
.chp-sync-time { font-size:12px; color:var(--g-text-muted); display:flex; align-items:center; gap:4px; }
|
||||
|
||||
.chp-card-actions {
|
||||
display:flex; align-items:center; gap:12px;
|
||||
padding-top:14px; border-top:1px solid var(--g-border);
|
||||
}
|
||||
.chp-card-actions .spacer { flex:1; }
|
||||
|
||||
/* 待接入渠道 */
|
||||
.chp-pending-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
|
||||
.chp-pending-card {
|
||||
border:2px dashed #d9d9d9; border-radius:10px; padding:22px 24px;
|
||||
display:flex; align-items:center; gap:16px; background:#fafafa;
|
||||
transition:var(--g-transition);
|
||||
}
|
||||
.chp-pending-card:hover { border-color:var(--primary); background:#fff; }
|
||||
.chp-pending-info { flex:1; }
|
||||
.chp-pending-name { font-size:14px; font-weight:600; color:var(--g-text); margin-bottom:4px; }
|
||||
.chp-pending-desc { font-size:12px; color:var(--g-text-muted); }
|
||||
.chp-btn-outline {
|
||||
padding:6px 16px; border-radius:var(--g-radius-sm); font-size:13px;
|
||||
border:1px solid var(--primary); color:var(--primary); background:#fff;
|
||||
cursor:pointer; transition:var(--g-transition); white-space:nowrap; font-weight:500;
|
||||
}
|
||||
.chp-btn-outline:hover { background:var(--primary-light); }
|
||||
|
||||
/* 底部提示条 */
|
||||
.chp-info-bar {
|
||||
background:color-mix(in srgb, var(--primary) 6%, #fff);
|
||||
border:1px solid color-mix(in srgb, var(--primary) 15%, #fff);
|
||||
border-radius:var(--g-radius); padding:14px 18px;
|
||||
font-size:13px; color:var(--g-text-secondary);
|
||||
display:flex; align-items:center; gap:8px;
|
||||
}
|
||||
.chp-info-bar i { color:var(--primary); flex-shrink:0; }
|
||||
</style>
|
||||
|
||||
<div class="chp-page">
|
||||
|
||||
<!-- 顶部统计条 -->
|
||||
<div class="chp-stats">
|
||||
<div class="chp-stat-item">
|
||||
<div class="chp-stat-icon blue"><i data-lucide="link" style="width:20px;height:20px"></i></div>
|
||||
<div>
|
||||
<div class="chp-stat-label">已接入渠道</div>
|
||||
<div class="chp-stat-value">3<span class="unit">个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chp-stat-item">
|
||||
<div class="chp-stat-icon orange"><i data-lucide="shopping-bag" style="width:20px;height:20px"></i></div>
|
||||
<div>
|
||||
<div class="chp-stat-label">今日全渠道订单</div>
|
||||
<div class="chp-stat-value">186<span class="unit">单</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chp-stat-item">
|
||||
<div class="chp-stat-icon green"><i data-lucide="banknote" style="width:20px;height:20px"></i></div>
|
||||
<div>
|
||||
<div class="chp-stat-label">今日全渠道营收</div>
|
||||
<div class="chp-stat-value">¥12,480</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chp-stat-item">
|
||||
<div class="chp-stat-icon teal"><i data-lucide="refresh-cw" style="width:20px;height:20px"></i></div>
|
||||
<div>
|
||||
<div class="chp-stat-label">数据最后同步</div>
|
||||
<div class="chp-stat-value" style="font-size:16px;"><span class="chp-sync-dot"></span>2 分钟前</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已接入渠道 -->
|
||||
<div>
|
||||
<div class="chp-section-hd">已接入渠道</div>
|
||||
<div class="chp-channel-grid">
|
||||
|
||||
<!-- 美团外卖 -->
|
||||
<div class="chp-channel-card">
|
||||
<div class="chp-card-top">
|
||||
<div class="chp-card-top-left">
|
||||
<div class="chp-logo meituan">美</div>
|
||||
<div>
|
||||
<div class="chp-platform-name">美团外卖</div>
|
||||
<div class="chp-shop-name">老三家·朝阳店</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="g-tag g-tag-green">已连接</span>
|
||||
</div>
|
||||
<div class="chp-data-row">
|
||||
<div class="chp-data-item">
|
||||
<div class="chp-data-label">今日订单</div>
|
||||
<div class="chp-data-val">68<span class="small-unit">单</span></div>
|
||||
</div>
|
||||
<div class="chp-data-item">
|
||||
<div class="chp-data-label">今日营收</div>
|
||||
<div class="chp-data-val">¥4,580</div>
|
||||
</div>
|
||||
<div class="chp-data-item">
|
||||
<div class="chp-data-label">好评率</div>
|
||||
<div class="chp-data-val">4.8<span class="small-unit">分</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chp-sync-time">
|
||||
<i data-lucide="clock" style="width:13px;height:13px"></i> 最后同步：3 分钟前
|
||||
</div>
|
||||
<div class="chp-card-actions">
|
||||
<button class="g-btn g-btn-sm"><i data-lucide="refresh-cw" style="width:13px;height:13px;margin-right:4px;vertical-align:-2px"></i>同步数据</button>
|
||||
<a class="g-action" href="javascript:;">查看详情</a>
|
||||
<span class="spacer"></span>
|
||||
<a class="g-action g-action-danger" href="javascript:;">断开连接</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 饿了么 -->
|
||||
<div class="chp-channel-card">
|
||||
<div class="chp-card-top">
|
||||
<div class="chp-card-top-left">
|
||||
<div class="chp-logo eleme">饿</div>
|
||||
<div>
|
||||
<div class="chp-platform-name">饿了么</div>
|
||||
<div class="chp-shop-name">老三家餐饮(朝阳路)</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="g-tag g-tag-green">已连接</span>
|
||||
</div>
|
||||
<div class="chp-data-row">
|
||||
<div class="chp-data-item">
|
||||
<div class="chp-data-label">今日订单</div>
|
||||
<div class="chp-data-val">52<span class="small-unit">单</span></div>
|
||||
</div>
|
||||
<div class="chp-data-item">
|
||||
<div class="chp-data-label">今日营收</div>
|
||||
<div class="chp-data-val">¥3,420</div>
|
||||
</div>
|
||||
<div class="chp-data-item">
|
||||
<div class="chp-data-label">好评率</div>
|
||||
<div class="chp-data-val">4.6<span class="small-unit">分</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chp-sync-time">
|
||||
<i data-lucide="clock" style="width:13px;height:13px"></i> 最后同步：5 分钟前
|
||||
</div>
|
||||
<div class="chp-card-actions">
|
||||
<button class="g-btn g-btn-sm"><i data-lucide="refresh-cw" style="width:13px;height:13px;margin-right:4px;vertical-align:-2px"></i>同步数据</button>
|
||||
<a class="g-action" href="javascript:;">查看详情</a>
|
||||
<span class="spacer"></span>
|
||||
<a class="g-action g-action-danger" href="javascript:;">断开连接</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 自有小程序 -->
|
||||
<div class="chp-channel-card">
|
||||
<div class="chp-card-top">
|
||||
<div class="chp-card-top-left">
|
||||
<div class="chp-logo mini">自</div>
|
||||
<div>
|
||||
<div class="chp-platform-name">自有小程序</div>
|
||||
<div class="chp-shop-name">老三家官方小程序</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="g-tag g-tag-blue">同步中</span>
|
||||
</div>
|
||||
<div class="chp-data-row">
|
||||
<div class="chp-data-item">
|
||||
<div class="chp-data-label">今日订单</div>
|
||||
<div class="chp-data-val">66<span class="small-unit">单</span></div>
|
||||
</div>
|
||||
<div class="chp-data-item">
|
||||
<div class="chp-data-label">今日营收</div>
|
||||
<div class="chp-data-val">¥4,480</div>
|
||||
</div>
|
||||
<div class="chp-data-item">
|
||||
<div class="chp-data-label">好评率</div>
|
||||
<div class="chp-data-val">4.9<span class="small-unit">分</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chp-sync-time">
|
||||
<i data-lucide="clock" style="width:13px;height:13px"></i> 最后同步：实时同步
|
||||
</div>
|
||||
<div class="chp-card-actions">
|
||||
<button class="g-btn g-btn-sm"><i data-lucide="refresh-cw" style="width:13px;height:13px;margin-right:4px;vertical-align:-2px"></i>同步数据</button>
|
||||
<a class="g-action" href="javascript:;">查看详情</a>
|
||||
<span class="spacer"></span>
|
||||
<a class="g-action g-action-danger" href="javascript:;">断开连接</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待接入渠道 -->
|
||||
<div>
|
||||
<div class="chp-section-hd">更多渠道</div>
|
||||
<div class="chp-pending-grid">
|
||||
|
||||
<div class="chp-pending-card">
|
||||
<div class="chp-logo gray" style="font-size:16px;">抖</div>
|
||||
<div class="chp-pending-info">
|
||||
<div class="chp-pending-name">抖音团购</div>
|
||||
<div class="chp-pending-desc">接入抖音本地生活，获取短视频流量</div>
|
||||
</div>
|
||||
<button class="chp-btn-outline">立即接入</button>
|
||||
</div>
|
||||
|
||||
<div class="chp-pending-card">
|
||||
<div class="chp-logo gray" style="font-size:16px;">快</div>
|
||||
<div class="chp-pending-info">
|
||||
<div class="chp-pending-name">快手本地生活</div>
|
||||
<div class="chp-pending-desc">接入快手同城，覆盖下沉市场</div>
|
||||
</div>
|
||||
<button class="chp-btn-outline">立即接入</button>
|
||||
</div>
|
||||
|
||||
<div class="chp-pending-card">
|
||||
<div class="chp-logo gray" style="font-size:16px;">点</div>
|
||||
<div class="chp-pending-info">
|
||||
<div class="chp-pending-name">大众点评</div>
|
||||
<div class="chp-pending-desc">同步大众点评店铺，管理团购套餐</div>
|
||||
</div>
|
||||
<button class="chp-btn-outline">立即接入</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部提示条 -->
|
||||
<div class="chp-info-bar">
|
||||
<i data-lucide="info" style="width:16px;height:16px"></i>
|
||||
接入新渠道后，该渠道的订单将自动同步到「订单聚合」页面，菜单可通过「菜单同步」统一管理。
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
||||
</script>
|
||||
Reference in New Issue
Block a user