65 lines
3.2 KiB
HTML
65 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-slug="tree">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>tree · 组合场景</title>
|
||
<!-- 组合场景预览：外层是脚手架外壳，组件外观全部来自下面这些框架 CSS。
|
||
产物由 tools/build-scenes.mjs 生成；真源是 site/scenes/tree.json。 -->
|
||
<link rel="stylesheet" href="../../frameworks/Tree.css">
|
||
<link rel="stylesheet" href="../../frameworks/Card.css">
|
||
<link rel="stylesheet" href="../../frameworks/Tag.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="tree" data-uses="card,tag">
|
||
<div class="ksc-card">
|
||
<h3 class="ksc-title">详情</h3>
|
||
<p class="ksc-sub">Kole UI · Tree 组件（纯 H5）</p>
|
||
<div class="kole-tree">Kole UI · Tree 组件（纯 H5）</div>
|
||
<div class="ksc-row">
|
||
<span class="kole-tag">已完成</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|