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.
237 lines
12 KiB
HTML
237 lines
12 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="./layui/css/layui.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="./css/gridstack.min.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="./css/index.css"
|
|
/>
|
|
<script src="./js/color.js"></script>
|
|
<script src="./js/i18n.js"></script>
|
|
<script src="./js/gridstack-all.js"></script>
|
|
<script src="./js/jquery.min.js"></script>
|
|
<script src="./layui/layui.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<template id="template">
|
|
{{ const i18n = layui.i18n; }}
|
|
<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>{{= i18n.$t('user.component_list') }}</span>
|
|
</div>
|
|
<div class="components-list">
|
|
<div class="component-item grid-stack-item">
|
|
<div class="grid-stack-item-content">
|
|
<img
|
|
class="image-container default-image"
|
|
src="./image/img.png"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="component-item grid-stack-item">
|
|
<div class="grid-stack-item-content"><span>{{= i18n.$t('user.component_text') }}</span></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="action-btn"
|
|
id="trash"
|
|
>
|
|
<div class="trash-container">
|
|
<i class="fas fa-trash"></i>
|
|
<span>{{= i18n.$t('user.delete_btn') }}</span>
|
|
</div>
|
|
<div class="save-container">
|
|
<i class="fas fa-trash"></i>
|
|
<span>{{= i18n.$t('user.save_btn') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 画布容器 -->
|
|
<div id="canvas-panel">
|
|
<div id="canvas-tabs">
|
|
<button
|
|
class="tab-button active"
|
|
data-tab="welcome-screen"
|
|
>
|
|
{{= i18n.$t('user.welcome_page') }}
|
|
</button>
|
|
<button
|
|
class="tab-button"
|
|
data-tab="main-screen"
|
|
>
|
|
{{= i18n.$t('user.main_page') }}
|
|
</button>
|
|
</div>
|
|
<!-- <div class="global-save-button-container">
|
|
<button class="global-save-button">保存布局</button>
|
|
</div> -->
|
|
<div
|
|
id="main-screen"
|
|
class="grid-stack"
|
|
></div>
|
|
<div
|
|
id="welcome-screen"
|
|
class="grid-stack"
|
|
></div>
|
|
</div>
|
|
<!-- 当前选中组件属性 -->
|
|
<div id="props-panel">
|
|
<div class="panel-title">
|
|
<span id="component-prop">{{= i18n.$t('user.component_prop') }}</span>
|
|
<span id="page-prop">{{= i18n.$t('user.page_prop') }}</span>
|
|
</div>
|
|
<div class="wait-box">{{= i18n.$t('user.empty_component') }}</div>
|
|
<form class="hidden">
|
|
<div class="form-item">
|
|
<label for="childrenType">{{= i18n.$t('user.component_child_type') }}</label>
|
|
<input
|
|
type="text"
|
|
id="childrenType"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="name">{{= i18n.$t('user.component_name') }}</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="image">{{= i18n.$t('user.background_image') }}</label>
|
|
<select id="image">
|
|
<option value="">{{= i18n.$t('user.please_select') }}</option>
|
|
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png">movie</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">{{= i18n.$t('user.background') }}</label>
|
|
<div id="background"></div>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="fontSize">{{= i18n.$t('user.font_size') }}</label>
|
|
<input
|
|
type="text"
|
|
id="fontSize"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="color">{{= i18n.$t('user.font_color') }}</label>
|
|
<div id="color"></div>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="text">{{= i18n.$t('user.text_content') }}</label>
|
|
<input
|
|
type="text"
|
|
id="text"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="fontWeight">{{= i18n.$t('user.font_weight') }}</label>
|
|
<input
|
|
type="text"
|
|
id="fontWeight"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="eventsType">{{= i18n.$t('user.events_type') }}</label>
|
|
<input
|
|
type="text"
|
|
id="eventsType"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="eventsAction">{{= i18n.$t('user.events_action') }}</label>
|
|
<input
|
|
type="text"
|
|
id="eventsAction"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="defaultFocus">{{= i18n.$t('user.default_focus') }}</label>
|
|
<input
|
|
type="text"
|
|
id="defaultFocus"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="leftId">{{= i18n.$t('user.move_left_id') }}</label>
|
|
<select id="leftId">
|
|
<option value="">{{= i18n.$t('user.please_select') }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="rightId">{{= i18n.$t('user.move_right_id') }}</label>
|
|
<select id="rightId">
|
|
<option value="">{{= i18n.$t('user.please_select') }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="upId">{{= i18n.$t('user.move_up_id') }}</label>
|
|
<select id="upId">
|
|
<option value="">{{= i18n.$t('user.please_select') }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="downId">{{= i18n.$t('user.move_down_id') }}</label>
|
|
<select id="downId">
|
|
<option value="">{{= i18n.$t('user.please_select') }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="focusedStyle_background">{{= i18n.$t('user.focused_background') }}</label>
|
|
<div id="focusedStyle_background"></div>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="focusedStyle_border_width">{{= i18n.$t('user.focused_border_width') }}</label>
|
|
<input
|
|
type="text"
|
|
id="focusedStyle_border_width"
|
|
/>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="focusedStyle_border_color">{{= i18n.$t('user.focused_border_color') }}</label>
|
|
<div id="focusedStyle_border_color"></div>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="focusedStyle_scale">{{= i18n.$t('user.focused_scale') }}</label>
|
|
<input
|
|
type="text"
|
|
id="focusedStyle_scale"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</body>
|
|
</html>
|
|
<script src="./js/index.js"></script>
|