新增头部和导航

This commit is contained in:
augushong
2021-03-29 00:03:26 +08:00
parent 7f98d5e8c9
commit 6fd50e255d
10 changed files with 263 additions and 40 deletions

64
demo/header.html Normal file
View File

@@ -0,0 +1,64 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>通用PC头部</legend>
<div class="layui-field-box">
<div class="ul-section">
<div class="ul-header">
<div class="ul-header-main" style="max-width: 600px;">
<div class="ul-header-left">
<div class="">
<img class="ul-header-logo" src="/static/images/ulthon_logo_108.png" alt="">
</div>
</div>
<div class="ul-header-right">
<div class="ul-header-user">
<div class="ul-header-user-avatar">
</div>
<div class="ul-header-user-info">
<div class="ul-header-user-name">
奥古斯宏
</div>
<div class="ul-header-user-options">
<i class="ul-icon-exit"></i>
<span>退出</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ul-section">
<div class="ul-header ">
<div class="ul-header-main">
<div class="ul-header-left">
<div class="">
<img class="ul-header-logo" src="/static/images/ulthon_logo_108.png" alt="">
</div>
</div>
<div class="ul-header-right">
<div class="ul-header-user">
<div class="ul-header-user-avatar">
</div>
<div class="ul-header-user-info">
<div class="ul-header-user-name">
奥古斯宏
</div>
<div class="ul-header-user-options">
<i class="ul-icon-exit"></i>
<span>退出</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>

26
demo/nav.html Normal file
View File

@@ -0,0 +1,26 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>一般垂直导航</legend>
<div class="layui-field-box">
<ul class="layui-nav layui-nav-tree ul-nav-white">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd class="layui-this"><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>
</div>
</fieldset>

6
demo/tpl.html Normal file
View File

@@ -0,0 +1,6 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>字段集区块 - 横线风格</legend>
<div class="layui-field-box">
内容区域
</div>
</fieldset>