70 lines
3.5 KiB
HTML
70 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" data-slug="select">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>select · 组合场景</title>
|
|
<!-- 组合场景预览：外层是脚手架外壳，组件外观全部来自下面这些框架 CSS。
|
|
产物由 tools/build-scenes.mjs 生成；真源是 site/scenes/select.json。 -->
|
|
<link rel="stylesheet" href="../../frameworks/Select.css">
|
|
<link rel="stylesheet" href="../../frameworks/Card.css">
|
|
<link rel="stylesheet" href="../../frameworks/Input.css">
|
|
<link rel="stylesheet" href="../../frameworks/Button.css">
|
|
<style>
|
|
:root { color-scheme: light dark; }
|
|
body {
|
|
margin: 0; padding: var(--kole-space-24, 24px);
|
|
background: var(--kole-color-page-bg, #f5f6fa);
|
|
color: var(--kole-color-text-body, #1f2329);
|
|
font-family: var(--kole-font-family-cn, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
|
|
font-size: 14px; line-height: 1.6;
|
|
}
|
|
#kole-scene { max-width: 720px; margin: 0 auto; }
|
|
.ksc-canvas { display: block; }
|
|
.ksc-card {
|
|
background: var(--kole-color-card-bg, #fff);
|
|
border: 1px solid var(--kole-color-border, #e5e6eb);
|
|
border-radius: var(--kole-radius-large, 8px);
|
|
padding: var(--kole-space-24, 24px);
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.04);
|
|
}
|
|
.ksc-title { margin: 0 0 var(--kole-space-4, 4px); font-size: 16px; font-weight: 600; color: var(--kole-color-text-title, #1f2329); }
|
|
.ksc-sub { margin: 0 0 var(--kole-space-20, 20px); font-size: 13px; color: var(--kole-color-text-secondary, #4e5969); }
|
|
.ksc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kole-space-12, 12px); }
|
|
.ksc-col { display: flex; flex-direction: column; gap: var(--kole-space-16, 16px); }
|
|
.ksc-field { display: flex; flex-direction: column; gap: var(--kole-space-8, 8px); }
|
|
.ksc-field-label { font-size: 13px; color: var(--kole-color-text-secondary, #4e5969); }
|
|
.ksc-actions { display: flex; justify-content: flex-end; gap: var(--kole-space-12, 12px); margin-top: var(--kole-space-20, 20px); }
|
|
.ksc-brand { display: flex; align-items: center; gap: var(--kole-space-8, 8px); margin-bottom: var(--kole-space-20, 20px); }
|
|
.ksc-brand-mark {
|
|
width: 28px; height: 28px; border-radius: var(--kole-radius-medium, 6px);
|
|
background: var(--kole-color-brand, #2f54eb); color: #fff;
|
|
display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
|
|
}
|
|
.ksc-brand-name { font-size: 15px; font-weight: 600; color: var(--kole-color-text-title, #1f2329); }
|
|
.ksc-hint { margin: var(--kole-space-12, 12px) 0 0; font-size: 12px; color: var(--kole-color-text-tertiary, #86909c); }
|
|
@media (prefers-color-scheme: dark) {
|
|
body { background: var(--kole-color-page-bg, #17171a); }
|
|
.ksc-card { background: var(--kole-color-card-bg, #232324); border-color: var(--kole-color-border, #333); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="kole-scene-body">
|
|
<div id="kole-scene" data-slug="select" data-uses="card,input">
|
|
<div class="ksc-card">
|
|
<h3 class="ksc-title">项目设置</h3>
|
|
<p class="ksc-sub">改动会立即生效，取消则放弃本次编辑。</p>
|
|
<div class="ksc-field">
|
|
<label class="ksc-field-label">请选择城市</label>
|
|
<div class="kole-select"><input type="text" placeholder="请选择城市" /></div>
|
|
</div>
|
|
<p class="ksc-hint">填写后按保存生效。</p>
|
|
<div class="ksc-actions">
|
|
<button class="btn btn-default btn-md" type="button">取消</button>
|
|
<button class="btn btn-primary btn-md" type="button">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|