101 lines
4.1 KiB
HTML
101 lines
4.1 KiB
HTML
<style>
|
|
.spr-wrap{padding:24px;max-width:960px;display:flex;flex-direction:column;gap:20px;}
|
|
.spr-section-hd{font-size:15px;font-weight:600;color:var(--g-text);padding-left:10px;border-left:3px solid var(--primary);margin-bottom:16px;}
|
|
.spr-card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
|
.spr-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--g-border);}
|
|
.spr-toggle-row:last-child{border-bottom:none;}
|
|
.spr-toggle-left{display:flex;flex-direction:column;gap:2px;}
|
|
.spr-toggle-label{font-size:14px;color:var(--g-text);font-weight:500;}
|
|
.spr-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;}
|
|
.spr-offline{opacity:0.5;}
|
|
.spr-footer{display:flex;justify-content:flex-end;gap:10px;padding:4px 0 0;}
|
|
</style>
|
|
|
|
<div class="spr-wrap">
|
|
<!-- 打印机列表 -->
|
|
<div class="g-card" style="padding:24px;">
|
|
<div class="spr-card-hd">
|
|
<div class="spr-section-hd" style="margin-bottom:0;">打印机管理</div>
|
|
<button class="g-btn g-btn-primary g-btn-sm"><i data-lucide="plus" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>添加打印机</button>
|
|
</div>
|
|
<table class="g-table">
|
|
<thead>
|
|
<tr><th>名称</th><th>型号</th><th>连接方式</th><th>IP/端口</th><th>状态</th><th>操作</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>前台打印机</td><td>飞鹅 FP-58</td><td>WiFi</td><td>192.168.1.101</td>
|
|
<td><span class="g-tag g-tag-green">在线</span></td>
|
|
<td><a class="g-action">编辑</a><a class="g-action g-action-danger">删除</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>后厨打印机</td><td>商米 T2</td><td>USB</td><td>—</td>
|
|
<td><span class="g-tag g-tag-green">在线</span></td>
|
|
<td><a class="g-action">编辑</a><a class="g-action g-action-danger">删除</a></td>
|
|
</tr>
|
|
<tr class="spr-offline">
|
|
<td>标签打印机</td><td>佳博 GP-3120</td><td>蓝牙</td><td>—</td>
|
|
<td><span class="g-tag g-tag-gray">离线</span></td>
|
|
<td><a class="g-action">编辑</a><a class="g-action g-action-danger">删除</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 小票设置 -->
|
|
<div class="g-card" style="padding:24px;">
|
|
<div class="spr-section-hd">小票设置</div>
|
|
<div class="spr-toggle-row">
|
|
<span class="spr-toggle-label">自动打印</span>
|
|
<div class="g-toggle on" onclick="toggleSwitch(this)"></div>
|
|
</div>
|
|
<div style="margin-top:16px;">
|
|
<div class="spr-grid">
|
|
<div class="g-form-group">
|
|
<label class="g-form-label">打印份数</label>
|
|
<select class="g-select">
|
|
<option>1</option>
|
|
<option selected>2</option>
|
|
<option>3</option>
|
|
</select>
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label">小票宽度</label>
|
|
<select class="g-select">
|
|
<option>58mm</option>
|
|
<option selected>80mm</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="g-divider" style="margin:20px 0;"></div>
|
|
<div class="spr-section-hd">打印内容</div>
|
|
<div class="spr-toggle-row">
|
|
<span class="spr-toggle-label">订单详情</span>
|
|
<div class="g-toggle on" onclick="toggleSwitch(this)"></div>
|
|
</div>
|
|
<div class="spr-toggle-row">
|
|
<span class="spr-toggle-label">商品明细</span>
|
|
<div class="g-toggle on" onclick="toggleSwitch(this)"></div>
|
|
</div>
|
|
<div class="spr-toggle-row">
|
|
<span class="spr-toggle-label">配送信息</span>
|
|
<div class="g-toggle on" onclick="toggleSwitch(this)"></div>
|
|
</div>
|
|
<div class="spr-toggle-row">
|
|
<span class="spr-toggle-label">二维码</span>
|
|
<div class="g-toggle" onclick="toggleSwitch(this)"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spr-footer">
|
|
<button class="g-btn">重置</button>
|
|
<button class="g-btn g-btn-primary">保存</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleSwitch(el){el.classList.toggle('on');}
|
|
if(typeof lucide!=='undefined'){lucide.createIcons();}
|
|
</script>
|