|
|
@@ -1,148 +1,196 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
- <title>测试 - layui</title>
|
|
|
- <link rel="stylesheet" href="{{ url_for('static', filename='js/layui-v2.9.7/css/layui.css') }}">
|
|
|
- <link rel="stylesheet" href="{{ url_for('static', filename='js/layui-modules/labelGeneration.css') }}">
|
|
|
- <style>
|
|
|
- body,html{
|
|
|
- height: 100vh;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
+ <title>IOmga</title>
|
|
|
+ <link rel="stylesheet" href="{{ url_for('static', filename='js/layui-v2.9.7/css/layui.css') }}">
|
|
|
+ <style>
|
|
|
+ body, html {
|
|
|
+ height: 100vh;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
|
|
|
- .my-logo {
|
|
|
- height: 68px;
|
|
|
- }
|
|
|
+ .my-logo {
|
|
|
+ height: 68px;
|
|
|
+ }
|
|
|
|
|
|
- .my-icon {
|
|
|
- font-size: 18px;
|
|
|
- margin-right: 6px;
|
|
|
- }
|
|
|
+ .my-icon {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
|
|
|
- .main-container {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
+ .main-container {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .search-container {
|
|
|
- width: calc(100% - 200px);
|
|
|
- }
|
|
|
- </style>
|
|
|
+ li#search-tab .layui-tab-close {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .index-tab-content {
|
|
|
+ height: calc(100% - (41px + 10px));
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-body-container {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-main-container {
|
|
|
+ width: calc(100% - 200px);
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gradient {
|
|
|
+ /* 背景渐变色 */
|
|
|
+ background: linear-gradient(-45deg, #2af598 0%, #009efd 100%);
|
|
|
+ /* 背景尺寸 */
|
|
|
+ background-size: 600% 600%;
|
|
|
+ /* 循环动画 */
|
|
|
+ animation: gradientBG 5s ease infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 动画,控制背景 background-position */
|
|
|
+ @keyframes gradientBG {
|
|
|
+ 0% {
|
|
|
+ background-position: 0% 50%;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ background-position: 100% 50%;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background-position: 0% 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <div class="layui-layout layui-fluid" style="height: 100%; padding: 0">
|
|
|
+<div class="layui-layout layui-fluid" style="height: 100%; padding: 0">
|
|
|
<div class="layui-row" style="height: 100%">
|
|
|
- <div class="layui-col-md2" style="height: 100%;background-color: pink">
|
|
|
- <div class="layui-logo layui-hide-xs layui-bg-gray my-logo">layout demo</div>
|
|
|
- <div class="layui-row" style="height: calc(100% - 68px)">
|
|
|
- <ul class="layui-nav layui-nav-tree" style="width: 100%; height: 100%; position: relative;">
|
|
|
- <li class="layui-nav-item layui-this">
|
|
|
- <a class="layui-font-18" href="javascript:;"><i class="layui-icon layui-icon-home my-icon"></i>首页</a>
|
|
|
- </li>
|
|
|
- <li class="layui-nav-item">
|
|
|
- <a class="layui-font-18" href="javascript:;"><i class="layui-icon layui-icon-download-circle my-icon"></i>下载
|
|
|
- <span class="layui-badge">9</span>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li class="layui-nav-item"><a class="layui-font-18" href="javascript:;"><i class="layui-icon layui-icon-component my-icon"></i>插件</a></li>
|
|
|
- <li class="layui-nav-item"><a class="layui-font-18" href="javascript:;"><i class="layui-icon layui-icon-set my-icon"></i>设置</a></li>
|
|
|
- <li class="layui-nav-item" style="position: absolute; bottom: 0">
|
|
|
- <hr class="layui-bg-black" style="margin: 0; border-bottom-width: 2px">
|
|
|
- <a class="layui-font-18" href="javascript:;"><i class="layui-icon layui-icon-tips my-icon"></i>关于</a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="layui-col-md10" style="height: 100%;background-color: white">
|
|
|
- <div class="main-container">
|
|
|
- <div class="search-container">
|
|
|
- <div class="layui-text" style=" ">
|
|
|
- <h1>欢迎使用XXXXXX</h1>
|
|
|
+ <div class="layui-col-md2" style="height: 100%;background-color: pink">
|
|
|
+ <div class="layui-logo layui-hide-xs layui-bg-gray my-logo">
|
|
|
+ <img src="{{ url_for('static', filename='img/LOGO.svg') }}">
|
|
|
</div>
|
|
|
- <form class="layui-form" action="">
|
|
|
- <div class="layui-form-item">
|
|
|
- <div class="layui-input-group" style="width: 100%">
|
|
|
- <input type="text" placeholder="请输入想要搜寻的XXX..." class="layui-input">
|
|
|
- <div class="layui-input-split layui-input-suffix" style="cursor: pointer; width: 1px">
|
|
|
- <i class="layui-icon layui-icon-search my-icon"></i>
|
|
|
- 搜索
|
|
|
- </div>
|
|
|
+ <div class="layui-row" style="height: calc(100% - 68px)">
|
|
|
+ <ul class="layui-nav layui-nav-tree" style="width: 100%; height: 100%; position: relative;">
|
|
|
+ <li class="layui-nav-item layui-this">
|
|
|
+ <a class="layui-font-18" href="javascript:;"><i class="layui-icon layui-icon-home my-icon"></i>首页</a>
|
|
|
+ </li>
|
|
|
+ <li class="layui-nav-item">
|
|
|
+ <a class="layui-font-18" href="javascript:;"><i
|
|
|
+ class="layui-icon layui-icon-download-circle my-icon"></i>下载
|
|
|
+ <span class="layui-badge">9</span>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li class="layui-nav-item"><a class="layui-font-18" href="javascript:;"><i
|
|
|
+ class="layui-icon layui-icon-component my-icon"></i>插件</a></li>
|
|
|
+ <li class="layui-nav-item"><a class="layui-font-18" href="javascript:;"><i
|
|
|
+ class="layui-icon layui-icon-set my-icon"></i>设置</a></li>
|
|
|
+ <li class="layui-nav-item" style="position: absolute; bottom: 0">
|
|
|
+ <hr class="layui-bg-black" style="margin: 0; border-bottom-width: 2px">
|
|
|
+ <a class="layui-font-18" href="javascript:;"><i class="layui-icon layui-icon-tips my-icon"></i>关于</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-col-md10" style="height: 100%;background-color: white">
|
|
|
+ <div class="main-container">
|
|
|
+ <div class="layui-tab" lay-filter="body-handle" lay-allowclose="true" style="padding-top: 10px; margin: 0">
|
|
|
+ <ul class="layui-tab-title">
|
|
|
+ <li id="search-tab" class="layui-this" lay-id="search">搜索</li>
|
|
|
+ <li lay-id="search-result">搜索结果</li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="layui-form-item">
|
|
|
- <label class="layui-form-label" style="padding-left: 0; text-align: left; width: 100px">选择搜索平台:</label>
|
|
|
- <div class="layui-input-block" style="width: 180px; margin-left: 115px">
|
|
|
- <select name="platform" lay-filter="platform">
|
|
|
- <option value="0" selected>聚合搜索</option>
|
|
|
- <option value="1">AAAA</option>
|
|
|
- <option value="2">BBBB</option>
|
|
|
- <option value="3">CCCC</option>
|
|
|
- <option value="4">DDDD</option>
|
|
|
- </select>
|
|
|
+ <div class="layui-tab-content index-tab-content">
|
|
|
+ <div class="layui-tab-item layui-show" style="height: 100%; width: 100%">
|
|
|
+ <div class="search-body-container gradient">
|
|
|
+ <div class="search-main-container">
|
|
|
+ <div class="layui-text" style=" ">
|
|
|
+ <h1>欢迎使用XXXXXX</h1>
|
|
|
+ </div>
|
|
|
+ <form class="layui-form" action="">
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div class="layui-input-group" style="width: 100%">
|
|
|
+ <input type="text" placeholder="请输入想要搜寻的XXX..." class="layui-input">
|
|
|
+ <div class="layui-input-split layui-input-suffix layui-bg-green"
|
|
|
+ style="cursor: pointer; width: 1px">
|
|
|
+ <i class="layui-icon layui-icon-search my-icon"></i>
|
|
|
+ 搜索
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label"
|
|
|
+ style="padding-left: 0; text-align: left; width: 100px">选择搜索平台:</label>
|
|
|
+ <div class="layui-input-block" style="width: 180px; margin-left: 115px">
|
|
|
+ <select name="platform" lay-filter="platform">
|
|
|
+ <option value="0" selected>聚合搜索</option>
|
|
|
+ <option value="1">AAAA</option>
|
|
|
+ <option value="2">BBBB</option>
|
|
|
+ <option value="3">CCCC</option>
|
|
|
+ <option value="4">DDDD</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ <div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true"
|
|
|
+ lay-newTag="">
|
|
|
+ <button lay-id="11" type="button" class="tag-item">网站设置</button>
|
|
|
+ <button lay-id="22" type="button" class="tag-item">用户管理</button>
|
|
|
+ <button lay-id="33" type="button" class="tag-item">权限分配</button>
|
|
|
+ <button lay-id="44" type="button" class="tag-item">商品管理</button>
|
|
|
+ <button lay-id="55" type="button" class="tag-item">订单管理</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- <div id="formdesigner"></div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+</div>
|
|
|
|
|
|
<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
|
|
|
<script src="{{ url_for('static', filename='js/layui-v2.9.7/layui.js') }}"></script>
|
|
|
<script src="{{ url_for('static', filename='js/Sortable/Sortable.js') }}"></script>
|
|
|
<script>
|
|
|
-layui.config({
|
|
|
- base: "{{ url_for('static', filename='js/layui-modules/') }}",
|
|
|
- version: true
|
|
|
-}).use(["layer", "form", "laypage", "element", "util", "labelGeneration"], function(){
|
|
|
- var layer = layui.layer
|
|
|
- ,form = layui.form
|
|
|
- ,laypage = layui.laypage
|
|
|
- ,element = layui.element
|
|
|
- ,util = layui.util
|
|
|
- ,labelGeneration = layui.labelGeneration;
|
|
|
-
|
|
|
- //欢迎信息
|
|
|
- layer.msg('Hello World');
|
|
|
- // 渲染 nav 导航菜单
|
|
|
- element.render('nav');
|
|
|
+ layui.config({
|
|
|
+ base: "{{ url_for('static', filename='js/layui-modules/') }}",
|
|
|
+ version: true
|
|
|
+ }).use(["layer", "form", "laypage", "element", "util", "tag"], function () {
|
|
|
+ var layer = layui.layer
|
|
|
+ , form = layui.form
|
|
|
+ , laypage = layui.laypage
|
|
|
+ , element = layui.element
|
|
|
+ , util = layui.util
|
|
|
+ , tag = layui.tag;
|
|
|
+
|
|
|
+ //欢迎信息
|
|
|
+ layer.msg('Hello World');
|
|
|
+ // 渲染 nav 导航菜单
|
|
|
+ element.render('nav');
|
|
|
+
|
|
|
+ tag.on('click(demo)', function (data) {
|
|
|
+ console.log('点击');
|
|
|
+ console.log(this); //当前Tag标签所在的原始DOM元素
|
|
|
+ console.log(data.index); //得到当前Tag的所在下标
|
|
|
+ console.log(data.elem); //得到当前的Tag大容器
|
|
|
+ });
|
|
|
|
|
|
- var render = labelGeneration.render({
|
|
|
- elem: '#formdesigner',
|
|
|
- data: [
|
|
|
- {
|
|
|
- "ngColor": "",
|
|
|
- "value": "标签1"
|
|
|
- },
|
|
|
- {
|
|
|
- "ngColor": "layui-btn-primary",
|
|
|
- "value": "标签2"
|
|
|
- },
|
|
|
- {
|
|
|
- "ngColor": "layui-btn-normal",
|
|
|
- "value": "标签3"
|
|
|
- },
|
|
|
- {
|
|
|
- "ngColor": "layui-btn-warm",
|
|
|
- "value": "标签4"
|
|
|
- },
|
|
|
- {
|
|
|
- "ngColor": "layui-btn-danger",
|
|
|
- "value": "标签5"
|
|
|
- }
|
|
|
- ],
|
|
|
- isEnter: true
|
|
|
- });
|
|
|
+ // tab 删除事件
|
|
|
+ element.on('tabDelete(body-handle)', function(data){
|
|
|
+ console.log(data.index); // 得到被删除的 tab 项的所在下标
|
|
|
+ console.log(data.elem); // 得到当前的 tab 容器
|
|
|
+ });
|
|
|
|
|
|
-});
|
|
|
+ });
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|