900 lines
22 KiB
HTML
900 lines
22 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>EasyCode 页面设计器原型</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f4f7fb;
|
|
--panel: #ffffff;
|
|
--line: #dfe6f0;
|
|
--soft: #f8fafc;
|
|
--text: #172033;
|
|
--muted: #667085;
|
|
--faint: #98a2b3;
|
|
--primary: #2563eb;
|
|
--primary-soft: #eaf2ff;
|
|
--green: #0f9f6e;
|
|
--amber: #b7791f;
|
|
--danger: #dc2626;
|
|
--radius: 8px;
|
|
font-family: "Inter", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
.app-shell {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-rows: 64px minmax(0, 1fr);
|
|
}
|
|
|
|
.app-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
padding: 0 28px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--panel);
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 240px;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 8px;
|
|
background: #2563eb;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.brand strong {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.top-nav {
|
|
display: flex;
|
|
gap: 26px;
|
|
color: #475467;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.top-nav span.active {
|
|
color: var(--primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.user-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: #475467;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.designer-page {
|
|
padding: 20px 24px 24px;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
gap: 14px;
|
|
}
|
|
|
|
.designer-head {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 16px 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--panel);
|
|
}
|
|
|
|
.head-row,
|
|
.toolbar-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
}
|
|
|
|
.crumb {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.title-stack {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.title-stack h1 {
|
|
margin: 0;
|
|
font-size: 22px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.title-stack p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.head-actions,
|
|
.scope-switch,
|
|
.mini-tabs,
|
|
.canvas-tools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
min-height: 36px;
|
|
padding: 7px 13px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: #344054;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn.primary {
|
|
border-color: var(--primary);
|
|
background: var(--primary);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.btn.ghost {
|
|
background: var(--soft);
|
|
}
|
|
|
|
.seg {
|
|
min-height: 34px;
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.seg.active {
|
|
border-color: var(--primary);
|
|
background: var(--primary-soft);
|
|
color: var(--primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dirty {
|
|
padding: 5px 9px;
|
|
border-radius: 999px;
|
|
background: #fff8e6;
|
|
color: var(--amber);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.designer-grid {
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: 292px minmax(520px, 1fr) 344px;
|
|
gap: 14px;
|
|
}
|
|
|
|
.panel {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--panel);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.left-panel,
|
|
.right-panel {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.panel-head {
|
|
padding: 13px 14px;
|
|
border-bottom: 1px solid var(--line);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.panel-head strong {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.panel-body {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 14px;
|
|
}
|
|
|
|
.left-section {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.page-item {
|
|
width: 100%;
|
|
display: grid;
|
|
gap: 3px;
|
|
padding: 11px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 7px;
|
|
background: var(--soft);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.page-item.active {
|
|
border-color: var(--primary);
|
|
background: var(--primary-soft);
|
|
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
|
|
}
|
|
|
|
.page-item strong {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.page-item span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.material-tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 6px;
|
|
}
|
|
|
|
.material-tabs button {
|
|
min-height: 30px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.material-tabs button.active {
|
|
border-color: var(--primary);
|
|
background: var(--primary-soft);
|
|
color: var(--primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.material-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.material-item {
|
|
min-height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 9px 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
cursor: grab;
|
|
}
|
|
|
|
.material-item span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.canvas-panel {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
background: #f9fbff;
|
|
}
|
|
|
|
.canvas-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: #fff;
|
|
}
|
|
|
|
.canvas-head h2 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.canvas-head small {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.canvas-body {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 22px;
|
|
display: grid;
|
|
justify-items: center;
|
|
}
|
|
|
|
.page-frame {
|
|
width: min(100%, 920px);
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.canvas-band {
|
|
border: 1px solid #dce6f3;
|
|
border-radius: var(--radius);
|
|
background: #fff;
|
|
padding: 14px;
|
|
}
|
|
|
|
.canvas-band.active {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
|
|
}
|
|
|
|
.band-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.band-title strong {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.band-title span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.drop-area {
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
border: 1px dashed #c8d4e4;
|
|
border-radius: 7px;
|
|
background: #fbfdff;
|
|
}
|
|
|
|
.block-chip,
|
|
.field-chip,
|
|
.action-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 32px;
|
|
padding: 6px 10px;
|
|
border: 1px solid #cfe0f5;
|
|
border-radius: 6px;
|
|
background: #f5f9ff;
|
|
color: #1d4ed8;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.field-chip {
|
|
color: #344054;
|
|
background: #fff;
|
|
border-color: var(--line);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.action-chip {
|
|
color: var(--green);
|
|
background: #ecfdf5;
|
|
border-color: #bbf7d0;
|
|
}
|
|
|
|
.query-preview {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
|
|
gap: 10px;
|
|
}
|
|
|
|
.input-preview {
|
|
min-height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
color: var(--muted);
|
|
background: #fff;
|
|
}
|
|
|
|
.card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.book-card {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.cover {
|
|
height: 76px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 6px;
|
|
background: #eaf2ff;
|
|
color: var(--primary);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.book-card strong {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.book-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.book-meta span {
|
|
padding: 4px 7px;
|
|
border-radius: 5px;
|
|
background: #f2f4f7;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.right-panel .panel-body {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 14px;
|
|
}
|
|
|
|
.inspector-title {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.inspector-title strong {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.inspector-title span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.field {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.field label {
|
|
color: #344054;
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.field input,
|
|
.field select {
|
|
width: 100%;
|
|
min-height: 36px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
padding: 0 10px;
|
|
background: #fff;
|
|
color: #344054;
|
|
}
|
|
|
|
.inline-fields {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.config-box {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--soft);
|
|
}
|
|
|
|
.config-box strong {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.json-line {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 12px 0 0;
|
|
border-top: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
@media (max-width: 1280px) {
|
|
.designer-grid {
|
|
grid-template-columns: 260px minmax(420px, 1fr);
|
|
}
|
|
|
|
.right-panel {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.app-bar,
|
|
.head-row,
|
|
.toolbar-row,
|
|
.canvas-head {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.designer-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.query-preview,
|
|
.card-grid,
|
|
.inline-fields {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<header class="app-bar">
|
|
<div class="brand">
|
|
<div class="brand-mark">EC</div>
|
|
<strong>EasyCode</strong>
|
|
</div>
|
|
<nav class="top-nav">
|
|
<span>主页</span>
|
|
<span class="active">工作台</span>
|
|
<span>源码库</span>
|
|
<span>我的项目</span>
|
|
</nav>
|
|
<div class="user-bar">
|
|
<span>wangpeng</span>
|
|
<button class="btn">退出</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="designer-page">
|
|
<section class="designer-head">
|
|
<div class="head-row">
|
|
<div class="title-stack">
|
|
<div class="crumb">图书借阅系统 / 页面设计器</div>
|
|
<h1>前台页面设计</h1>
|
|
<p>专注配置页面结构、字段、按钮和业务块。工作台只保留入口，细节都在这里处理。</p>
|
|
</div>
|
|
<div class="head-actions">
|
|
<span class="dirty">有未保存修改</span>
|
|
<button class="btn ghost">预览页面</button>
|
|
<button class="btn primary">保存设计</button>
|
|
<button class="btn">返回工作台</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toolbar-row">
|
|
<div class="scope-switch">
|
|
<button class="seg active">前台</button>
|
|
<button class="seg">后台</button>
|
|
</div>
|
|
<div class="mini-tabs">
|
|
<button class="seg active">结构设计</button>
|
|
<button class="seg">数据绑定</button>
|
|
<button class="seg">生成预览</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="designer-grid">
|
|
<aside class="panel left-panel">
|
|
<div class="panel-head">
|
|
<strong>页面与物料</strong>
|
|
<button class="btn">新增页面</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
<section class="left-section">
|
|
<div class="section-title">
|
|
<span>页面列表</span>
|
|
<span>4 个页面</span>
|
|
</div>
|
|
<button class="page-item active">
|
|
<strong>图书目录</strong>
|
|
<span>/books · 卡片列表</span>
|
|
</button>
|
|
<button class="page-item">
|
|
<strong>图书详情</strong>
|
|
<span>/books/:id · 详情页</span>
|
|
</button>
|
|
<button class="page-item">
|
|
<strong>我的借阅</strong>
|
|
<span>/borrowings · 当前用户列表</span>
|
|
</button>
|
|
<button class="page-item">
|
|
<strong>我的预约</strong>
|
|
<span>/reservations · 当前用户列表</span>
|
|
</button>
|
|
</section>
|
|
|
|
<section class="left-section">
|
|
<div class="section-title">
|
|
<span>物料库</span>
|
|
<span>拖入画布</span>
|
|
</div>
|
|
<div class="material-tabs">
|
|
<button>结构</button>
|
|
<button class="active">字段</button>
|
|
<button>按钮</button>
|
|
<button>业务块</button>
|
|
</div>
|
|
<div class="material-list">
|
|
<div class="material-item">
|
|
<strong>书名</strong>
|
|
<span>字段</span>
|
|
</div>
|
|
<div class="material-item">
|
|
<strong>作者</strong>
|
|
<span>字段</span>
|
|
</div>
|
|
<div class="material-item">
|
|
<strong>封面图片URL</strong>
|
|
<span>图片字段</span>
|
|
</div>
|
|
<div class="material-item">
|
|
<strong>公告信息</strong>
|
|
<span>可嵌入业务块</span>
|
|
</div>
|
|
<div class="material-item">
|
|
<strong>轮播图</strong>
|
|
<span>可嵌入业务块</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="panel canvas-panel">
|
|
<div class="canvas-head">
|
|
<div>
|
|
<h2>图书目录</h2>
|
|
<small>页面类型：列表页 · 布局：卡片列表 · 绑定数据表：图书信息表</small>
|
|
</div>
|
|
<div class="canvas-tools">
|
|
<button class="seg active">桌面</button>
|
|
<button class="seg">手机</button>
|
|
<button class="btn">撤销</button>
|
|
<button class="btn">重做</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="canvas-body">
|
|
<div class="page-frame">
|
|
<section class="canvas-band active">
|
|
<div class="band-title">
|
|
<strong>顶部业务块</strong>
|
|
<span>选中：轮播图</span>
|
|
</div>
|
|
<div class="drop-area">
|
|
<span class="block-chip">轮播图</span>
|
|
<span class="block-chip">公告信息</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="canvas-band">
|
|
<div class="band-title">
|
|
<strong>查询区</strong>
|
|
<span>3 个条件</span>
|
|
</div>
|
|
<div class="query-preview">
|
|
<div class="input-preview">书名</div>
|
|
<div class="input-preview">作者</div>
|
|
<div class="input-preview">图书分类</div>
|
|
<button class="btn primary">搜索</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="canvas-band">
|
|
<div class="band-title">
|
|
<strong>卡片列表</strong>
|
|
<span>封面 + 主标题 + 操作按钮</span>
|
|
</div>
|
|
<div class="card-grid">
|
|
<article class="book-card">
|
|
<div class="cover">封面图片URL</div>
|
|
<strong>书名</strong>
|
|
<div class="book-meta">
|
|
<span>作者</span>
|
|
<span>出版社</span>
|
|
<span>可借副本数</span>
|
|
</div>
|
|
<div>
|
|
<span class="action-chip">借书</span>
|
|
<span class="action-chip">预约</span>
|
|
</div>
|
|
</article>
|
|
<article class="book-card">
|
|
<div class="cover">封面图片URL</div>
|
|
<strong>书名</strong>
|
|
<div class="book-meta">
|
|
<span>作者</span>
|
|
<span>出版社</span>
|
|
<span>可借副本数</span>
|
|
</div>
|
|
<div>
|
|
<span class="action-chip">借书</span>
|
|
<span class="action-chip">预约</span>
|
|
</div>
|
|
</article>
|
|
<article class="book-card">
|
|
<div class="cover">封面图片URL</div>
|
|
<strong>书名</strong>
|
|
<div class="book-meta">
|
|
<span>作者</span>
|
|
<span>出版社</span>
|
|
<span>可借副本数</span>
|
|
</div>
|
|
<div>
|
|
<span class="action-chip">借书</span>
|
|
<span class="action-chip">预约</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="canvas-band">
|
|
<div class="band-title">
|
|
<strong>底部业务块</strong>
|
|
<span>可拖入公告、轮播等</span>
|
|
</div>
|
|
<div class="drop-area">
|
|
<span class="field-chip">拖入可嵌入业务块</span>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="panel right-panel">
|
|
<div class="panel-head">
|
|
<strong>属性配置</strong>
|
|
<button class="btn">高级</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="inspector-title">
|
|
<strong>业务块配置：轮播图</strong>
|
|
<span>选中画布中的业务块后，只显示这个块需要配置的数据表和字段。</span>
|
|
</div>
|
|
|
|
<div class="mini-tabs">
|
|
<button class="seg">页面</button>
|
|
<button class="seg">字段</button>
|
|
<button class="seg">按钮</button>
|
|
<button class="seg active">业务块</button>
|
|
</div>
|
|
|
|
<div class="config-box">
|
|
<strong>基础映射</strong>
|
|
<div class="form-grid">
|
|
<div class="field">
|
|
<label>轮播图表</label>
|
|
<select>
|
|
<option>首页轮播表</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>图片字段</label>
|
|
<select>
|
|
<option>封面图片URL</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>标题字段</label>
|
|
<select>
|
|
<option>书名</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>跳转链接字段</label>
|
|
<select>
|
|
<option>详情页路径</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="config-box">
|
|
<strong>展示设置</strong>
|
|
<div class="inline-fields">
|
|
<div class="field">
|
|
<label>显示数量</label>
|
|
<input value="5" />
|
|
</div>
|
|
<div class="field">
|
|
<label>自动播放</label>
|
|
<select>
|
|
<option>开启</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="json-line">
|
|
<span>JSON 高级设置默认收起</span>
|
|
<button class="btn">展开</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|