You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
201 lines
8.5 KiB
HTML
201 lines
8.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0"
|
|
/>
|
|
<title>网页布局生成</title>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="css/index.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="./css/gridstack.min.css"
|
|
/>
|
|
<script src="./js/gridstack-all.js"></script>
|
|
<script src="./js/jquery.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="header">
|
|
<h1>可视化布局编辑器</h1>
|
|
<div class="header-actions">
|
|
<span>拖拽组件到画布区域</span>
|
|
</div>
|
|
</div>
|
|
<div id="main">
|
|
<!-- 组件列表 -->
|
|
<div id="components-panel">
|
|
<div class="panel-title">
|
|
<span>组件列表</span>
|
|
</div>
|
|
<div class="components-list">
|
|
<div class="component-item grid-stack-item">
|
|
<div class="grid-stack-item-content"><span>图片</span></div>
|
|
</div>
|
|
<div class="component-item grid-stack-item">
|
|
<div class="grid-stack-item-content"><span>文字</span></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="action-btn"
|
|
id="trash"
|
|
>
|
|
<div class="trash-container">
|
|
<i class="fas fa-trash"></i>
|
|
<span>拖动删除</span>
|
|
</div>
|
|
<div class="save-container">
|
|
<i class="fas fa-trash"></i>
|
|
<span>保存布局</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 画布容器 -->
|
|
<div id="canvas-panel">
|
|
<!-- <div class="global-save-button-container">
|
|
<button class="global-save-button">保存布局</button>
|
|
</div> -->
|
|
<div class="grid-stack"></div>
|
|
</div>
|
|
<!-- 当前选中组件属性 -->
|
|
<div id="props-panel">
|
|
<div class="panel-title">
|
|
<span>组件属性</span>
|
|
</div>
|
|
<div class="wait-box">请选择组件</div>
|
|
<form class="hidden">
|
|
<div class="form-item">
|
|
<label for="childrenType">组件子类型</label>
|
|
<input
|
|
type="text"
|
|
id="childrenType"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="name">组件名称</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="image">背景图片</label>
|
|
<select id="image">
|
|
<option value="">请选择</option>
|
|
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png">图片一</option>
|
|
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/2.jpg">图片二</option>
|
|
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/3.jpg">图片三</option>
|
|
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/4.jpg">图片四</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="background">背景颜色</label>
|
|
<input
|
|
type="text"
|
|
id="background"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="fontSize">文字大小</label>
|
|
<input
|
|
type="text"
|
|
id="fontSize"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="color">文字颜色</label>
|
|
<input
|
|
type="text"
|
|
id="color"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="text">文字内容</label>
|
|
<input
|
|
type="text"
|
|
id="text"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="fontWeight">文字宽度</label>
|
|
<input
|
|
type="text"
|
|
id="fontWeight"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="eventsType">事件类型</label>
|
|
<input
|
|
type="text"
|
|
id="eventsType"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="eventsAction">事件动作</label>
|
|
<input
|
|
type="text"
|
|
id="eventsAction"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="defaultFocus">默认聚焦</label>
|
|
<input
|
|
type="text"
|
|
id="defaultFocus"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="leftId">向左侧移动组件ID</label>
|
|
<select id="leftId">
|
|
<option value="">请选择</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="rightId">向右侧移动组件ID</label>
|
|
<select id="rightId">
|
|
<option value="">请选择</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="upId">向上侧移动组件ID</label>
|
|
<select id="upId">
|
|
<option value="">请选择</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="downId">向下侧移动组件ID</label>
|
|
<select id="downId">
|
|
<option value="">请选择</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- <div class="form-actions">
|
|
<button
|
|
type="button"
|
|
class="save-button"
|
|
>
|
|
保存组件
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="delete-button"
|
|
>
|
|
删除组件
|
|
</button>
|
|
</div> -->
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<script src="./js/index.js"></script>
|