grayzhao
/
IOmga


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!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') }}">
  <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%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .search-container {
      width: calc(100% - 200px);
    }
  </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">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>
            <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>
              </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>
        </div>
      </div>
    </div>
  </div>

<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="{{ url_for('static', filename='js/layui-v2.9.7/layui.js') }}"></script>
<script>
layui.use(function(){
  var layer = layui.layer
  ,form = layui.form
  ,laypage = layui.laypage
  ,element = layui.element
  ,laydate = layui.laydate
  ,util = layui.util;
  
  //欢迎信息
  layer.msg('Hello World');
  // 渲染 nav 导航菜单
  element.render('nav');

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