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-04-21 23:08:56 +08:00
parent 490e9a6688
commit bffce779ed
8 changed files with 620 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
demo/card.html Normal file
View File

@@ -0,0 +1,66 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>卡片A</legend>
<div class="layui-field-box">
<div class="ul-padding-md" data-repeat="3">
<div class="ul-card-a" >
<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>
</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>

103
demo/form.html
View File

@@ -1,57 +1,60 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>表格输入</legend>
<div class="layui-field-box">
<div class="layui-form">
<div class="layui-form-item">
<table class="layui-table ul-input-table">
<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 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>

44
demo/group_panel.html
View File

@@ -60,47 +60,3 @@
</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>

92
demo/header.html
View File

@@ -61,4 +61,96 @@
</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>

99
demo/nav.html
View File

@@ -76,7 +76,7 @@
<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>
@@ -86,3 +86,100 @@
</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>