54 lines
1.4 KiB
HTML
54 lines
1.4 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>G3 组件 playground</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
background: #fff;
|
||
color: #18181b;
|
||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||
}
|
||
.page {
|
||
max-width: 1120px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
/* 只作用于页面自己的分区（`.page` 的直接子元素）。
|
||
不能用裸 `section` / `h2`：Drawer 的面板本体就是 `<section class="g3-drawer">`，
|
||
元素选择器会连它一起命中（曾把面板撑出 16px 的底部间距、还漏进虚线边框和 padding），
|
||
表现为「抽屉高度撑不满」。 */
|
||
.page > section {
|
||
margin-bottom: 16px;
|
||
padding: 12px 16px 16px;
|
||
border: 1px dashed #e5e7eb;
|
||
border-radius: 8px;
|
||
}
|
||
.page > section > h2 {
|
||
margin: 0 0 12px;
|
||
color: #52525b;
|
||
font-size: 15px;
|
||
}
|
||
.row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
.box {
|
||
display: flex;
|
||
height: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fafafa;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app"></div>
|
||
<script type="module" src="/main.ts"></script>
|
||
</body>
|
||
</html>
|