ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-05 11:52:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增移动端组件;移动端新增分组导航组件

Browse Source
This commit is contained in:
augushong
2021-06-28 21:58:08 +08:00
parent ab20656442
commit 3abdc52c43
19 changed files with 92 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
demo/pc/blockquote.html Normal file
View File

@@ -0,0 +1,24 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>更多风格的区块</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="layui-elem-quote layui-quote-gray">灰色区块</div>
</div>
<p class="layui-word-aux">需要layui.css</p>
<p class="layui-word-aux">如果没有加载layui.css,在系统中添加如下样式:</p>
<pre class="layui-code demo-js"></pre>
<style class="demo-js-src">
.layui-elem-quote {
margin-bottom: 10px;
padding: 15px;
line-height: 1.6;
border-left: 5px solid #5FB878;
border-radius: 0 2px 2px 0;
background-color: #FAFAFA
}
</style>
</div>
</fieldset>

157
demo/pc/card.html Normal file
View File

@@ -0,0 +1,157 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>卡片A</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-common-flex-list">
<div class="ul-card-a" data-repeat="3">
<div class="ul-card-a-left">
<img width="100%" src="{$site_logo_src}" alt="">
</div>
<div class="ul-card-a-right">
<div class="ul-card-a-main">
<div class="ul-card-a-title">
卡片标题
</div>
<div class="ul-card-a-desc">
这是卡片说明
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>银行卡</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-card-bank" data-repeat="3">
<div class="ul-common-flex-sb ul-card-bank-header">
<div class="ul-card-bank-title">
中国银行
</div>
<div class="ul-card-bank-number">
尾号 ********123456
</div>
</div>
<div class="ul-common-flex-sb ul-card-bank-body">
<div class="ul-card-bank-line">
<div class="ul-card-bank-line-triangle"></div>
</div>
<div class="ul-card-bank-tips">
默认
</div>
</div>
<div class="ul-common-flex-sb ul-card-bank-footer">
<div class="ul-card-bank-time">
绑定日期:2021-03-15
</div>
<div class="ul-card-bank-name">
**宏
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>详细属性卡片</legend>
<div class="layui-field-box">
<div class="ul-padding-md layui-bg-gray">
<div class="layui-card ul-card">
<div class="layui-card-header">
<span class="ul-card-status layui-bg-green">意向</span>
<span class="ul-card-title">卡片面板</span>
<span class="ul-card-options">
<span>2021年3月29日</span>
<span class=""><i class="layui-icon layui-icon-right"></i></span>
</span>
</div>
<div class="layui-card-body">
<div class="data-item">
<span class="data-title">入库时间:</span>
<span class="data-value">2021年3月29日16:33:21</span>
</div>
<div class="data-item">
<span class="data-title">用户名称:</span>
<span class="data-value">奥古斯宏</span>
</div>
<div class="data-item">
<span class="data-title">公司名称:</span>
<span class="data-value">临沂奥宏网络科技有限公司</span>
</div>
<div class="data-item">
<span class="data-title">电话:</span>
<span class="data-value">13012341234</span>
</div>
<div class="data-item">
<span class="data-title">相册:</span>
<span class="data-img">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
</span>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>数据卡片</legend>
<div class="layui-field-box">
<div class="ul-card-data-container ul-padding-md">
<div class="ul-card-data-a ul-card-data" data-repeat="2">
<div class="ul-card-data-a-title">
509778.80
</div>
<div class="ul-card-data-a-options">
<div class="ul-card-data-a-item">
<i class="layui-icon layui-icon-gift"></i>
余额
</div>
<div class="ul-card-data-a-item">
<div class="layui-btn layui-btn-xs">充值</div>
<div class="layui-btn layui-btn-xs">提现</div>
<div class="layui-btn layui-btn-xs">记录</div>
</div>
</div>
</div>
<div class="ul-card-data-b ul-card-data" data-repeat="2">
<div class="ul-card-data-b-main">
<div class="ul-card-data-b-icon layui-icon layui-icon-gift">
</div>
<div class="ul-card-data-b-info">
<div class="ul-card-data-b-title">
盈亏总额(元)
</div>
<div class="ul-card-data-b-value">
0.00
</div>
</div>
</div>
</div>
<div class="ul-card-data-c ul-card-data">
<div class="ul-card-data-c-item" data-repeat="3">
<div class="ul-card-data-c-value">
0
</div>
<div class="ul-card-data-c-title">
余额
</div>
</div>
</div>
</div>
</div>
</fieldset>

12
demo/pc/files.html Normal file
View File

@@ -0,0 +1,12 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>仿WIN10风格文件管理器</legend>
<div class="layui-field-box">
<div>
<div>
</div>
</div>
</div>
</fieldset>

60
demo/pc/form.html Normal file
View File

@@ -0,0 +1,60 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>表格输入</legend>
<div class="layui-field-box">
<div class="demo-js-src" style="display: block;">
<div class="layui-form">
<div class="layui-form-item">
<table class="layui-table ul-input-table" lay-even>
<tbody>
<tr>
<td>输入</td>
<td>
<input type="text" name="input-1" placeholder="请输入" class="layui-input" id="">
</td>
<td>选择框</td>
<td>
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</td>
<td>复选框</td>
<td>
<input type="checkbox" name="like[write]" lay-skin="primary" title="写作">
<input type="checkbox" name="like[read]" lay-skin="primary" title="阅读" checked>
<input type="checkbox" name="like[dai]" lay-skin="primary" title="发呆">
</td>
</tr>
<tr>
<td>单选框</td>
<td colspan="5">
<input type="radio" name="sex" value="男" title="国产">
<input type="radio" name="sex" value="男" title="日韩">
<input type="radio" name="sex" value="男" title="欧洲">
<input type="radio" name="sex" value="男" title="美国">
<input type="radio" name="sex" value="女" title="俄罗斯" checked>
</td>
</tr>
<tr>
<td>文本域</td>
<td colspan="5">
<textarea name="" class="layui-textarea" rows="3"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<pre class="layui-code demo-js"></pre>
</div>
</fieldset>

62
demo/pc/group_panel.html Normal file
View File

@@ -0,0 +1,62 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>按月分组面板</legend>
<div class="layui-field-box">
<div class="ul-padding-md layui-bg-gray">
<div class="ul-group-list">
<fieldset class="layui-elem-field layui-field-title ul-group-item">
<legend>8月</legend>
<div class="layui-field-box">
<div class="ul-info-tips">
当前没有数据
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title ul-group-item">
<legend>7月</legend>
<div class="layui-field-box">
<div class="ul-card-list">
<div class="layui-card ul-card" style="width:300px" data-repeat="2">
<div class="layui-card-header">
<span class="ul-card-status layui-bg-green">意向</span>
<span class="ul-card-title">卡片面板</span>
<span class="ul-card-options">
<span>2021年3月29日</span>
<span class=""><i class="layui-icon layui-icon-right"></i></span>
</span>
</div>
<div class="layui-card-body">
<div class="data-item">
<span class="data-title">入库时间:</span>
<span class="data-value">2021年3月29日16:33:21</span>
</div>
<div class="data-item">
<span class="data-title">用户名称:</span>
<span class="data-value">奥古斯宏</span>
</div>
<div class="data-item">
<span class="data-title">公司名称:</span>
<span class="data-value">临沂奥宏网络科技有限公司</span>
</div>
<div class="data-item">
<span class="data-title">电话:</span>
<span class="data-value">13012341234</span>
</div>
<div class="data-item">
<span class="data-title">相册:</span>
<span class="data-img">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
</span>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</fieldset>

156
demo/pc/header.html Normal file
View File

@@ -0,0 +1,156 @@
<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>
<fieldset class="layui-elem-field layui-field-title">
<legend>经典头部</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-header-a">
<div class="ul-header-a-main">
<div class="ul-header-a-left">
Hi:欢迎来到{:get_system_config('site_name')}
</div>
<div class="ul-header-a-right">
<div class="ul-header-a-nav-item" style="min-width: 100px;">
<div class="ul-header-a-img" style="background-image: url('{$site_logo_src}');">
</div>
<span>奥宏科技</span>
<div class="ul-header-a-nav-plus" style="left: 0;width: 100%">
<div class="ul-nav-min" style="width: 100%">
<div class="ul-nav-min-item">
个人中心
</div>
<div class="ul-nav-min-item">
安全中心
</div>
<div class="ul-nav-min-item">
数据中心
</div>
</div>
</div>
</div>
<div class="ul-header-a-nav-item">
充值
</div>
<div class="ul-header-a-nav-item">
提现
</div>
<div class="ul-header-a-nav-item">
退出
</div>
<div class="ul-header-a-nav-item">
<div class="layui-btn layui-btn-xs">在线客服</div>
</div>
</div>
</div>
</div>
</div>
<div class="ul-padding-md">
<div class="ul-header-a">
<div class="ul-header-a-main" style="max-width: 600px;">
<div class="ul-header-a-left">
Hi:欢迎来到{:get_system_config('site_name')}
</div>
<div class="ul-header-a-right">
<div class="ul-header-a-nav-item" style="min-width: 100px;">
<div class="ul-header-a-img" style="background-image: url('{$site_logo_src}');">
</div>
<span>奥宏科技</span>
<div class="ul-header-a-nav-plus" style="left: 0;width: 100%">
<div class="ul-nav-min" style="width: 100%">
<div class="ul-nav-min-item">
个人中心
</div>
<div class="ul-nav-min-item">
安全中心
</div>
<div class="ul-nav-min-item">
数据中心
</div>
</div>
</div>
</div>
<div class="ul-header-a-nav-item">
充值
</div>
<div class="ul-header-a-nav-item">
提现
</div>
<div class="ul-header-a-nav-item">
退出
</div>
<div class="ul-header-a-nav-item">
<div class="layui-btn layui-btn-xs">在线客服</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>

336
demo/pc/list.html Normal file
View File

@@ -0,0 +1,336 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>头像列表</legend>
<div class="layui-field-box">
<div class="ul-avatar-list">
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
</div>
<div class="ul-avatar-list" style="width: 400px;">
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
</div>
<div class="ul-avatar-list" style="width: 200px;">
<div class="ul-avatar-list-item current">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>侧边头像列表</legend>
<div class="layui-field-box">
<div class="ul-avatar-sidebar-list" style="width: 200px;">
<div class="ul-avatar-sidebar-list-item" data-repeat="3">
<div class="ul-avatar-sidebar-list-item-img"></div>
<div class="ul-avatar-sidebar-list-item-info">
<div class="ul-avatar-sidebar-list-item-title">
张三
</div>
<div class="ul-avatar-sidebar-list-item-intro">
法外狂徒不寂寞
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>相册列表</legend>
<div class="layui-field-box">
<div class="ul-photo-list">
<div class="ul-photo-item" data-repeat="3">
<div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-photo-info">
<div class="ul-photo-title">周末野外广场树林写真</div>
<div class="ul-photo-plus">45P+1V</div>
<div class="ul-photo-desc">相册说明内容</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>卡片式相册列表</legend>
<div class="layui-field-box">
<div class="ul-photo-card-list">
<div class="ul-photo-card-item" data-repeat="7">
<div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-photo-card-info">
<div class="ul-photo-card-title">周末野外广场树林写真</div>
<div class="ul-photo-card-desc">相册说明内容</div>
<div class="ul-photo-card-plus">45P+1V</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>内容丰富的留言列表</legend>
<div class="layui-field-box layui-bg-gray">
<div class="ul-message-list ul-padding-md">
<div class="ul-message-item ul-bg-white" data-repeat="3">
<div class="ul-message-item-left">
<div class="ul-message-item-avatar" style="background-image: url('/static/images/avatar.png');">
</div>
</div>
<div class="ul-message-item-right">
<div class="ul-message-item-info">
<div class="ul-message-item-name">
<div class="data-item">
奥古斯宏
</div>
<div class="data-item">
程序员
</div>
</div>
<div class="ul-message-item-data">
<div class="data-item split-border">
<span class="data-title">联系方式:</span>
<span class="data-value">13012341234</span>
</div>
<div class="data-item">
<span class="data-title">价位:</span>
<span class="data-value">￥3</span>
</div>
</div>
<div class="ul-message-item-options">
<div class="layui-btn">查看详情</div>
</div>
</div>
<div class="ul-message-item-content">
百度是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。
</div>
<div class="ul-message-item-img-list">
<div class="ul-message-item-img" style="background-image: url('/static/images/view.jpg');" data-repeat="4">
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>笔记列表</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-note-list">
<div class="ul-note-item current">
<div class="ul-note-item-icon">
<i class="layui-icon layui-icon-read"></i>
</div>
<div class="ul-note-item-info">
<div class="ul-note-item-title">未命名的笔记</div>
<div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
<div class="ul-note-item-time">2021-04-11</div>
<div class="ul-note-item-tree">
ddd
</div>
</div>
</div>
<div class="ul-note-item">
<div class="ul-note-item-icon">
<i class="layui-icon layui-icon-read"></i>
</div>
<div class="ul-note-item-info">
<div class="ul-note-item-title">未命名的笔记</div>
<div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
<div class="ul-note-item-time">2021-04-11</div>
<div class="ul-note-item-tree">
ddd
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>条幅(广告)列表</legend>
<div class="layui-field-box">
<div class="ul-ad-list">
<div class="ul-ad-item" data-repeat="3">
<div class="ul-ad-left">
<div class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></div>
</div>
<div class="ul-ad-right">
<div class="ul-ad-title">福牛迎春</div>
<div class="ul-ad-desc">天天送大礼</div>
<div class="ul-ad-options">
<div class="layui-btn">查看详情</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>课程列表</legend>
<div class="layui-field-box ">
<div class="ul-bg-gray ul-padding-md">
<div class="ul-course-list">
<a class="ul-course-item" data-repeat="10">
<div class="ul-course-item-poster-container">
<div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
<div class="layui-btn layui-btn-xs ul-course-item-tag">
免费
</div>
</div>
</div>
<div class="ul-course-item-info">
<div class="ul-course-item-title">
PHP8最新特性介绍和演示
</div>
<div class="ul-course-item-options">
<div class="ul-course-item-option-item ul-color-main">
免费
</div>
<div class="ul-course-item-option-item">
初级
</div>
<div class="ul-course-item-option-item">
3节课
</div>
<div class="ul-course-item-option-item">
1人报名
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>课程侧边列表</legend>
<div class="layui-field-box ">
<div class="ul-bg-gray ul-padding-md" style="width: 300px;">
<div class="ul-course-sidebar-list" >
<a class="ul-course-sidebar-item" data-repeat="4">
<div class="ul-course-sidebar-item-poster-container">
<div class="ul-course-sidebar-item-poster" style="background-image: url('/static/images/view.jpg');">
</div>
</div>
<div class="ul-course-sidebar-item-info">
<div class="ul-course-sidebar-item-title">
PHP8最新特性介绍和演示
</div>
<div class="ul-course-sidebar-item-options">
<div class="ul-course-sidebar-item-option-item ul-color-main">
免费
</div>
<div class="ul-course-sidebar-item-option-item">
初级
</div>
<div class="ul-course-sidebar-item-option-item">
3节课
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</fieldset>

320
demo/pc/nav.html Normal file
View File

@@ -0,0 +1,320 @@
<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>
<fieldset class="layui-elem-field layui-field-title">
<legend>附带说明垂直导航</legend>
<div class="layui-field-box">
<div class="ul-section">
<div class="ul-nav-tree ul-padding-md">
<div class="ul-nav-tree-group">
<div class="ul-nav-tree-group-title">起步</div>
<div class="ul-nav-tree-group-main">
<a href="" class="ul-nav-tree-item current">
<div class="ul-nav-tree-item-title">欢迎</div>
<div class="ul-nav-tree-item-desc">项目介绍/使用说明</div>
</a>
<a href="" class="ul-nav-tree-item">
<div class="ul-nav-tree-item-title">开始使用</div>
<div class="ul-nav-tree-item-desc">安装方式,注意事项</div>
</a>
<a href="" class="ul-nav-tree-item">
<div class="ul-nav-tree-item-title">如何使用</div>
<div class="ul-nav-tree-item-desc">复制组件</div>
</a>
</div>
</div>
<div class="ul-nav-tree-group">
<div class="ul-nav-tree-group-title">
组件 </div>
<div class="ul-nav-tree-group-main">
<a href="" class="ul-nav-tree-item">
<div class="ul-nav-tree-item-title">列表</div>
<div class="ul-nav-tree-item-desc">用户列表/文章列表...</div>
</a>
<a href="" class="ul-nav-tree-item">
<div class="ul-nav-tree-item-title">头部</div>
<div class="ul-nav-tree-item-desc">页面头</div>
</a>
<a href="" class="ul-nav-tree-item">
<div class="ul-nav-tree-item-title">导航</div>
<div class="ul-nav-tree-item-desc">横竖导航/多级导航</div>
</a>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>无底色简约导航</legend>
<div class="layui-field-box">
<ul class="layui-nav layui-nav-tree ul-nav-easy" lay-filter="user-nav">
<li class="layui-nav-item"><a href="">概况</a></li>
<li class="layui-nav-item layui-this"><a href="">文章管理</a></li>
<li class="layui-nav-item"><a href="">素材管理</a></li>
<li class="layui-nav-item"><a href="">评论管理</a></li>
<li class="layui-nav-item"><a href="">消息通知</a></li>
<li class="layui-nav-item"><a href="">数据分析</a></li>
<li class="layui-nav-item"><a href="">粉丝管理</a></li>
<li class="layui-nav-item"><a href="">私信管理</a></li>
<li class="layui-nav-item"><a href="">帐号设置</a></li>
</ul>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>最简单的导航</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-nav-min" style="width: 120px;">
<div class="ul-nav-min-item">
个人中心
</div>
<div class="ul-nav-min-item">
安全中心
</div>
<div class="ul-nav-min-item">
数据中心
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>经典头部跳转导航</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-nav-header">
<div class="ul-nav-header-main">
<div class="ul-nav-header-left">
<img style="height: 60px" src="{$site_logo_src}" alt="">
</div>
<div class="ul-nav-header-right">
<div class="ul-nav-header-item">
首页
</div>
<div class="ul-nav-header-item">
活动中心
</div>
<div class="ul-nav-header-item">
咨询
</div>
<div class="ul-nav-header-item">
帮助指南
</div>
</div>
</div>
</div>
</div>
<div class="ul-padding-md">
<div class="ul-nav-header ul-nav-header-red">
<div class="ul-nav-header-main">
<div class="ul-nav-header-left">
<img style="height: 60px" src="{$site_logo_src}" alt="">
</div>
<div class="ul-nav-header-right">
<div class="ul-nav-header-item">
首页
</div>
<div class="ul-nav-header-item">
活动中心
</div>
<div class="ul-nav-header-item">
咨询
</div>
<div class="ul-nav-header-item">
帮助指南
</div>
</div>
</div>
</div>
</div>
<div class="ul-padding-md">
<div class="ul-nav-header ul-nav-header-primary">
<div class="ul-nav-header-main">
<div class="ul-nav-header-left">
<img style="height: 80px" src="{$site_logo_src}" alt="">
</div>
<div class="ul-nav-header-right">
<div class="ul-nav-header-item">
首页
</div>
<div class="ul-nav-header-item">
活动中心
</div>
<div class="ul-nav-header-item">
咨询
</div>
<div class="ul-nav-header-item">
帮助指南
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>带图片和边框的导航</legend>
<div class="layui-field-box">
<div class="ul-nav-poster" style="width: 200px;">
<div class="ul-nav-poster-item" data-repeat="6">
<div class="ul-nav-poster-left">
<div class="ul-nav-poster-img" style="background-image: url('{$site_logo_src}');">
</div>
<div class="ul-nav-post-title">
国产专区
</div>
</div>
<div class="ul-nav-poster-right">
<div class="ul-nav-poster-desc">进入系统</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>简单地分割线导航</legend>
<div class="layui-field-box">
<div class="ul-nav-link">
<a class="ul-nav-link-item" href="">导航1</a>
<a class="ul-nav-link-item" href="">那个导航2</a>
<a class="ul-nav-link-item" href="">这个导航3</a>
<a class="ul-nav-link-item" href="">导航4</a>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>简单二级导航</legend>
<div class="layui-field-box">
<div class="ul-nav-tree-2">
<div class="ul-nav-tree-2-group">
<div class="ul-nav-tree-2-group-title">账号管理</div>
<div class="ul-nav-tree-2-group-main">
<a href="" class="ul-nav-tree-2-item">
<div class="ul-nav-tree-2-item-title">个人信息</div>
</a>
<a href="" class="ul-nav-tree-2-item">
<div class="ul-nav-tree-2-item-title">安全中心</div>
</a>
<a href="" class="ul-nav-tree-2-item">
<div class="ul-nav-tree-2-item-title">提现管理</div>
</a>
</div>
</div>
<div class="ul-nav-tree-2-group">
<div class="ul-nav-tree-2-group-title">资金管理</div>
<div class="ul-nav-tree-2-group-main">
<a href="" class="ul-nav-tree-2-item">
<div class="ul-nav-tree-2-item-title">余额宝</div>
</a>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>选项菜单导航</legend>
<div class="layui-field-box">
<div class="ul-nav-card">
<div class="ul-nav-card-item">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
登录密码
</div>
<div class="ul-nav-card-item-desc">
建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm">
修改密码
</div>
</div>
</div>
<div class="ul-nav-card-item">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
资金密码
</div>
<div class="ul-nav-card-item-desc">
资金密码用于提现、绑定银行卡等操作，可保障资金安全
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm">
找回资金密码
</div>
<div class="layui-btn layui-btn-sm">
修改资金密码
</div>
</div>
</div>
<div class="ul-nav-card-item disabled">
<div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div>
<div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title">
比特币转出
</div>
<div class="ul-nav-card-item-desc">
系统维护,不能转出
</div>
</div>
</div>
<div class="ul-nav-card-item-right">
<div class="layui-btn layui-btn-sm layui-btn-disabled">
立即转出
</div>
</div>
</div>
</div>
</div>
</fieldset>

11
demo/pc/none.html Normal file
View File

@@ -0,0 +1,11 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>没有数据</legend>
<div class="layui-field-box">
<div class="ul-padding-md layui-bg-gray">
<div class="ul-info-tips">
当前没有数据
</div>
</div>
</div>
</fieldset>

26
demo/pc/photo.html Normal file
View File

@@ -0,0 +1,26 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>相册上传</legend>
<div class="layui-field-box">
<div class="ul-upload-photo-list">
<div class="ul-upload-photo-item" >
<div class="ul-upload-photo-delete layui-icon layui-icon-delete">
</div>
<div class="ul-upload-photo-main" style="background-image: url('/static/images/view.jpg');">
</div>
</div>
<div class="ul-upload-photo-item ul-upload-photo-button">
</div>
</div>
</div>
</fieldset>
<script>
$('.ul-upload-photo-delete').click(function(){
console.log(1111);
})
$('.ul-upload-photo-main').click(function(){
console.log(2222);
})
</script>

137
demo/pc/search.html Normal file
View File

@@ -0,0 +1,137 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>复杂检索筛选</legend>
<div class="layui-field-box">
<div class="ul-search-container">
<div class="ul-search-item ul-padding-md layui-bg-gray">
<form action="" class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 180px;">
<select name="city" lay-verify="" lay-search="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline" style="width: 180px;">
<select name="city" lay-verify="" lay-search="">
<option value="">请选择一个价位</option>
<option value="010">100万</option>
<option value="021">10万</option>
<option value="0571">3元</option>
</select>
</div>
</div>
<div class="layui-inline">
<button class="layui-btn">搜索</button>
</div>
</div>
</form>
<div class="search-item">
<div class="ul-link-select">
<div class="ul-link-title">
风格:
</div>
<div class="ul-link-list">
<div class="ul-link-item current">
全部
</div>
<div class="ul-link-item">
国产
</div>
<div class="ul-link-item">
欧美
</div>
<div class="ul-link-item">
日韩
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>边框筛选组件</legend>
<div class="layui-field-box">
<div class="ul-link-select">
<div class="ul-link-title">
风格:
</div>
<div class="ul-link-list">
<div class="ul-link-item current">
全部
</div>
<div class="ul-link-item">
国产
</div>
<div class="ul-link-item">
欧美
</div>
<div class="ul-link-item">
日韩
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>按钮筛选组件</legend>
<div class="layui-field-box">
<div class="ul-padding-md ul-bg-gray">
<div class="ul-padding-md ul-bg-white">
<div class="ul-link-select">
<div class="ul-link-title">
风格:
</div>
<div class="ul-link-list">
<div class="ul-link-item layui-btn layui-btn-xs">
全部
</div>
<div class="ul-link-item">
国产
</div>
<div class="ul-link-item">
欧美
</div>
<div class="ul-link-item">
日韩
</div>
</div>
</div>
</div>
</div>
<div class="ul-padding-md ul-bg-gray">
<div class="ul-padding-md ul-bg-white">
<div class="ul-link-select">
<div class="ul-link-list">
<div class="ul-link-item layui-btn layui-btn-xs">
全部
</div>
<div class="ul-link-item">
国产
</div>
<div class="ul-link-item">
欧美
</div>
<div class="ul-link-item">
日韩
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>

74
demo/pc/title.html Normal file
View File

@@ -0,0 +1,74 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>标题1号</legend>
<div class="layui-field-box">
<div style="width:200px" class="ul-section">
<div class="ul-title">
<div class="ul-title-main">
精品酒店
</div>
<div class="ul-title-plus">
Boutique Hotel
</div>
<div class="ul-title-line">
</div>
</div>
</div>
<div style="width:200px;margin: 15px auto;" class="ul-section">
<div class="ul-title">
<div class="ul-title-main">
精品酒店
</div>
<div class="ul-title-plus">
Boutique Hotel
</div>
<div class="ul-title-line">
</div>
</div>
</div>
<div style="" class="ul-section">
<div class="ul-title">
<div class="ul-title-main">
精品酒店
</div>
<div class="ul-title-plus">
Boutique Hotel
</div>
<div class="ul-title-line">
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>分组标题</legend>
<div class="layui-field-box">
<div class="ul-group-title">
销售
</div>
<div class="ul-group-title">
设计
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>分组标题-2</legend>
<div class="layui-field-box">
<div class="ul-group-title-2">
销售
</div>
<div class="ul-group-title-2">
设计
</div>
</div>
</fieldset>

197
demo/pc/tree.html Normal file
View File

@@ -0,0 +1,197 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>简约目录</legend>
<div class="layui-field-box">
<div>
直接复制html样式,需要给每个单位置顶level,然后使用js去整理一下样式
<br>
需要自己写出目录收缩逻辑
</div>
<div class="ul-tree">
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">读书笔记</span>
</div>
<div class="ul-tree-item-children">
<div class="ul-tree-item">
<div class="ul-tree-item-info current">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">小说</span>
</div>
<div class="ul-tree-item-children">
</div>
</div>
</div>
</div>
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">技术笔记</span>
</div>
<div class="ul-tree-item-children">
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">Mysql</span>
</div>
<div class="ul-tree-item-children">
</div>
</div>
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">PHP</span>
</div>
<div class="ul-tree-item-children">
<div class="ul-tree-item disabled">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">扩展</span>
</div>
<div class="ul-tree-item-children">
</div>
</div>
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">框架</span>
</div>
<div class="ul-tree-item-children">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<pre class="layui-code demo-js"></pre>
<script class="demo-js-src">
// 可以用以下代码整理元素
$('.ul-tree-item').each(function () {
var itemTree = this
var parents = $(itemTree).parents('.ul-tree-item')
var level = parents.length
$(itemTree).find('.ul-tree-item-title').css('margin-left', (level + 1) * 15 + 5 + 'px')
$(itemTree).find('.ul-tree-item-icon').css('left', (level + 1) * 15 - 15 + 'px')
if ($(itemTree).children('.ul-tree-item-children').children().length == 0) {
$(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').remove()
}
$(itemTree).children('.ul-tree-item-info').click(function (e) {
if ($(e.target).hasClass('ul-tree-item-icon')) {
var iconItem = e.target
if ($(iconItem).hasClass('layui-icon-triangle-d')) {
// 收缩
$(iconItem).removeClass('layui-icon-triangle-d')
$(iconItem).addClass('layui-icon-triangle-r')
$(itemTree).children('.ul-tree-item-children').hide()
} else {
// 展开
$(iconItem).addClass('layui-icon-triangle-d')
$(iconItem).removeClass('layui-icon-triangle-r')
$(itemTree).children('.ul-tree-item-children').show()
}
console.log('点击收缩目录');
// 一般不用写这个逻辑
} else {
console.log('点击目录项');
// 在这里写点击逻辑
}
})
})
</script>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>基本组件</legend>
<div class="layui-field-box">
<div>
最基本的组件,ul-tree-item-icon的按钮会在执行js后进行相应的移除,缩进样式也许需要执行js
</div>
<div class="ul-section">
<div class="ul-tree">
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">读书笔记</span>
</div>
<div class="ul-tree-item-children">
</div>
</div>
</div>
</div>
<div class="ul-section">
<div class="ul-tree">
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">读书笔记</span>
</div>
<div class="ul-tree-item-children">
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">小说</span>
</div>
<div class="ul-tree-item-children">
</div>
</div>
</div>
</div>
</div>
</div>
<pre class="layui-code demo-js"></pre>
<div class="demo-js-src">
<!-- 基本组件 -->
<div class="ul-tree">
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">读书笔记</span>
</div>
<div class="ul-tree-item-children">
</div>
</div>
</div>
<!-- 子目录只需要将ul-tree-item嵌套在ul-tree-item-children即可 -->
<div class="ul-tree">
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">读书笔记</span>
</div>
<div class="ul-tree-item-children">
<div class="ul-tree-item">
<div class="ul-tree-item-info">
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
<span class="ul-tree-item-title">小说</span>
</div>
<div class="ul-tree-item-children">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>