grayzhao
/
IOmga


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
							<!DOCTYPE html>
<html>
<head>
    <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-icon {
            font-size: 18px;
            margin-right: 6px;
        }

        .main-container {
            height: 100%;
            width: 100%;
        }

        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-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">
                <img src="{{ url_for('static', filename='img/LOGO.svg') }}">
            </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 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>
        </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", "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大容器
        });

        // tab 删除事件
        element.on('tabDelete(body-handle)', function(data){
          console.log(data.index); // 得到被删除的 tab 项的所在下标
          console.log(data.elem); // 得到当前的 tab 容器
        });

    });
</script>
</body>
</html>