82 lines
3.2 KiB
HTML
82 lines
3.2 KiB
HTML
<style>
|
|
.spy-wrap{padding:24px;max-width:900px;display:flex;flex-direction:column;gap:20px;}
|
|
.spy-card-hd{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
|
|
.spy-card-hd h3{font-size:16px;font-weight:600;color:var(--g-text);margin:0;}
|
|
.spy-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;}
|
|
.spy-upload-sm{width:100%;height:64px;display:flex;align-items:center;justify-content:center;gap:6px;}
|
|
.spy-upload-sm i{width:18px;height:18px;color:var(--g-text-muted);}
|
|
.spy-upload-sm span{font-size:12px;color:var(--g-text-muted);}
|
|
.spy-test-row{margin-top:16px;padding-top:16px;border-top:1px solid var(--g-border);}
|
|
.spy-footer{display:flex;justify-content:flex-end;gap:10px;padding:4px 0 0;}
|
|
</style>
|
|
|
|
<div class="spy-wrap">
|
|
<!-- 微信支付 -->
|
|
<div class="g-card" style="padding:24px;">
|
|
<div class="spy-card-hd">
|
|
<div class="g-toggle on" onclick="toggleSwitch(this)"></div>
|
|
<h3>微信支付</h3>
|
|
<span class="g-tag g-tag-green">已接入</span>
|
|
</div>
|
|
<div class="spy-grid">
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">商户号</label>
|
|
<input class="g-input" value="15xxxxx" placeholder="请输入微信支付商户号">
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">API密钥</label>
|
|
<input class="g-input" type="password" value="********" placeholder="请输入API密钥">
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label">证书上传</label>
|
|
<div class="g-upload-zone spy-upload-sm">
|
|
<i data-lucide="upload-cloud"></i>
|
|
<span>点击上传证书文件</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="spy-test-row">
|
|
<button class="g-btn"><i data-lucide="wifi" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>测试连接</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 支付宝 -->
|
|
<div class="g-card" style="padding:24px;">
|
|
<div class="spy-card-hd">
|
|
<div class="g-toggle" onclick="toggleSwitch(this)"></div>
|
|
<h3>支付宝</h3>
|
|
<span class="g-tag g-tag-gray">未接入</span>
|
|
</div>
|
|
<div class="spy-grid">
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">APPID</label>
|
|
<input class="g-input" placeholder="请输入支付宝APPID">
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">私钥</label>
|
|
<input class="g-input" type="password" placeholder="请输入应用私钥">
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label">证书上传</label>
|
|
<div class="g-upload-zone spy-upload-sm">
|
|
<i data-lucide="upload-cloud"></i>
|
|
<span>点击上传证书文件</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="spy-test-row">
|
|
<button class="g-btn"><i data-lucide="wifi" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>测试连接</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spy-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>
|