mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-01 18:42:47 +08:00
新增卡片样式,导航样式,头部样式
This commit is contained in:
augushong
@@ -158,6 +158,8 @@ class Post extends Model
|
||||
return '';
|
||||
}
|
||||
|
||||
View::assign('site_logo_src', get_source_link(get_system_config('site_logo')));
|
||||
|
||||
return View::fetch($file_path);
|
||||
}
|
||||
|
||||
|
||||
66
demo/card.html
Normal file
66
demo/card.html
Normal 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
103
demo/form.html
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -1,17 +1,18 @@
|
||||
/* 列表开始 */
|
||||
.ul-nav-tree {}
|
||||
.ul-nav-tree {
|
||||
}
|
||||
|
||||
.ul-nav-tree-group-title {
|
||||
font-size : 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.ul-nav-tree-item {
|
||||
display : flex;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
cursor : pointer;
|
||||
padding : 5px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -21,12 +22,11 @@
|
||||
|
||||
.ul-nav-tree-item-title {
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
|
||||
.ul-nav-tree-item-desc {
|
||||
font-size : 14px;
|
||||
color : #999;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@@ -41,13 +41,12 @@
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
.ul-icon-exit {
|
||||
display : inline-block;
|
||||
width : 16px;
|
||||
height : 16px;
|
||||
background-image : url('img/exit.png');
|
||||
background-size : cover;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("img/exit.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
@@ -63,13 +62,14 @@
|
||||
|
||||
/* 用户头像开始 */
|
||||
|
||||
.ul-avatar-list {}
|
||||
.ul-avatar-list {
|
||||
}
|
||||
|
||||
.ul-avatar-list-item {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content : space-between;
|
||||
padding : 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
@@ -78,54 +78,53 @@
|
||||
}
|
||||
|
||||
.ul-avatar-list-item-img {
|
||||
height : 48px;
|
||||
width : 48px;
|
||||
background-image : url('/static/images/avatar.png');
|
||||
background-size : cover;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
background-image: url("/static/images/avatar.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius : 3px;
|
||||
background-color : #fff;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ul-avatar-list-item-info {
|
||||
margin-left: 10px;
|
||||
position : relative;
|
||||
width : calc(100% - 48px - 10px);
|
||||
position: relative;
|
||||
width: calc(100% - 48px - 10px);
|
||||
}
|
||||
|
||||
.ul-avatar-list-item-time {
|
||||
position: absolute;
|
||||
right : 0;
|
||||
top : 0;
|
||||
color : #999;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ul-avatar-list-item-tips {
|
||||
color : #999;
|
||||
font-size : 14px;
|
||||
display : inline-block;
|
||||
white-space : nowrap;
|
||||
width : 100%;
|
||||
overflow : hidden;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 头像结束 */
|
||||
|
||||
|
||||
/* 头部开始 */
|
||||
|
||||
.ul-header {
|
||||
background-color: #fff;
|
||||
box-shadow : 0 3px 5px #999;
|
||||
padding : 3px;
|
||||
box-shadow: 0 3px 5px #999;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.ul-header-main {
|
||||
display : flex;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items : center;
|
||||
margin : 0 auto;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ul-header-logo {
|
||||
@@ -133,25 +132,25 @@
|
||||
}
|
||||
|
||||
.ul-header-user {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ul-header-user-avatar {
|
||||
background-image : url('/static/images/avatar.png');
|
||||
width : 45px;
|
||||
height : 45px;
|
||||
background-size : cover;
|
||||
background-image: url("/static/images/avatar.png");
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.ul-header-user-options {
|
||||
display : flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color : #999;
|
||||
font-size : 12px;
|
||||
cursor : pointer;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ul-header-user-info {
|
||||
@@ -160,7 +159,6 @@
|
||||
|
||||
/* 头部结束 */
|
||||
|
||||
|
||||
/* 导航开始 */
|
||||
.layui-nav.ul-nav-white {
|
||||
background-color: #f0f0f0;
|
||||
@@ -174,17 +172,16 @@
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.layui-nav.ul-nav-white .layui-nav-itemed>.layui-nav-child {
|
||||
.layui-nav.ul-nav-white .layui-nav-itemed > .layui-nav-child {
|
||||
background-color: rgba(255, 255, 255, 0.6) !important;
|
||||
}
|
||||
|
||||
.layui-nav-tree.ul-nav-white .layui-nav-item a:hover {
|
||||
background-color: #9cf;
|
||||
color : #fff !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
||||
.layui-nav.ul-nav-white .layui-nav-itemed>a,
|
||||
.layui-nav.ul-nav-white .layui-nav-itemed > a,
|
||||
.layui-nav-tree.ul-nav-white .layui-nav-title a,
|
||||
.layui-nav-tree.ul-nav-white .layui-nav-title a:hover {
|
||||
color: #666 !important;
|
||||
@@ -197,43 +194,43 @@
|
||||
.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this,
|
||||
.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this a,
|
||||
.layui-nav-tree.ul-nav-white .layui-this,
|
||||
.layui-nav-tree.ul-nav-white .layui-this>a,
|
||||
.layui-nav-tree.ul-nav-white .layui-this>a:hover {
|
||||
.layui-nav-tree.ul-nav-white .layui-this > a,
|
||||
.layui-nav-tree.ul-nav-white .layui-this > a:hover {
|
||||
background-color: #9cf;
|
||||
color : #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 导航结束 */
|
||||
|
||||
|
||||
/* 链接导航开始 */
|
||||
|
||||
.ul-link-select {
|
||||
display : flex;
|
||||
align-items : flex-start;
|
||||
justify-content: flex-start
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ul-link-title {}
|
||||
.ul-link-title {
|
||||
}
|
||||
|
||||
.ul-link-list {
|
||||
display : flex;
|
||||
align-items : flex-start;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
flex-wrap : wrap;
|
||||
margin-left : 15px;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.ul-link-item {
|
||||
padding : 0px 10px;
|
||||
cursor : pointer;
|
||||
padding: 0px 10px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ul-link-item.current {
|
||||
border-radius: 15px;
|
||||
border : 1px solid #6cf;
|
||||
color : #6cf;
|
||||
border: 1px solid #6cf;
|
||||
color: #6cf;
|
||||
}
|
||||
|
||||
/* 链接导航结束 */
|
||||
@@ -241,90 +238,84 @@
|
||||
/* 相册列表开始 */
|
||||
|
||||
.ul-photo-list {
|
||||
display : flex;
|
||||
align-items : flex-start;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
flex-wrap : wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ul-photo-item {
|
||||
margin : 15px;
|
||||
margin: 15px;
|
||||
text-align: center;
|
||||
min-width : 220px;
|
||||
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.ul-photo-poster {
|
||||
width : 180px;
|
||||
height : 140px;
|
||||
background-image : url('../static/images/avatar.png');
|
||||
background-size : cover;
|
||||
width: 180px;
|
||||
height: 140px;
|
||||
background-image: url("../static/images/avatar.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
margin : 0 auto;
|
||||
box-shadow : 1px 1px 3px #999;
|
||||
margin: 0 auto;
|
||||
box-shadow: 1px 1px 3px #999;
|
||||
}
|
||||
|
||||
.ul-photo-info {
|
||||
margin-top : 10px;
|
||||
font-size : 18px;
|
||||
margin-top: 10px;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ul-photo-desc {
|
||||
font-size: 14px;
|
||||
color : #999;
|
||||
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
.ul-photo-card-list {
|
||||
display : flex;
|
||||
align-items : flex-start;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
flex-wrap : wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ul-photo-card-item {
|
||||
width : 200px;
|
||||
margin : 15px;
|
||||
width: 200px;
|
||||
margin: 15px;
|
||||
box-shadow: 0 5px 10px #999;
|
||||
|
||||
}
|
||||
|
||||
.ul-photo-card-poster {
|
||||
width : 100%;
|
||||
height : 140px;
|
||||
background-size : cover;
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.ul-photo-card-info {
|
||||
padding : 5px;
|
||||
font-size : 18px;
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ul-photo-card-desc {
|
||||
font-size: 14px;
|
||||
color : #999;
|
||||
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 相册列表结束 */
|
||||
|
||||
|
||||
.ul-info-tips {
|
||||
padding : 15px;
|
||||
padding: 15px;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.ul-card-status {
|
||||
padding : 5px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.ul-card-options {
|
||||
float : right;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -334,7 +325,7 @@
|
||||
|
||||
.data-img .data-img-main {
|
||||
max-width: 120px;
|
||||
margin : 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.data-img {
|
||||
@@ -342,7 +333,7 @@
|
||||
}
|
||||
|
||||
.ul-card-list {
|
||||
display : flex;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -355,7 +346,7 @@
|
||||
}
|
||||
|
||||
.ul-title {
|
||||
text-align : center;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -372,14 +363,15 @@
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.ul-message-list {}
|
||||
.ul-message-list {
|
||||
}
|
||||
|
||||
.ul-message-item {
|
||||
margin-bottom : 15px;
|
||||
display : flex;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items : flex-start;
|
||||
padding : 15px;
|
||||
align-items: flex-start;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.ul-message-item-left {
|
||||
@@ -396,59 +388,55 @@
|
||||
|
||||
.ul-message-item-options {
|
||||
position: absolute;
|
||||
right : 0;
|
||||
top : 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ul-message-item-avatar {
|
||||
background-size : cover;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
width : 100px;
|
||||
height : 100px;
|
||||
border-radius : 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ul-message-item-name {
|
||||
display : flex;
|
||||
color : #6cf;
|
||||
display: flex;
|
||||
color: #6cf;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ul-message-item-data {
|
||||
display : flex;
|
||||
font-size : 14px;
|
||||
color : #999;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ul-message-item-content {
|
||||
background-color: #f0f0f0;
|
||||
padding : 15px;
|
||||
margin-top : 10px;
|
||||
padding: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ul-message-item-img-list {
|
||||
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
|
||||
.ul-message-item-img {
|
||||
width : 160px;
|
||||
height : 120px;
|
||||
background-size : cover;
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
margin-right : 10px;
|
||||
display : inline-block;
|
||||
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ul-nav-easy {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.layui-nav-tree.ul-nav-easy .layui-nav-item>a {
|
||||
.layui-nav-tree.ul-nav-easy .layui-nav-item > a {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@@ -456,9 +444,9 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layui-nav-tree.ul-nav-easy .layui-this>a {
|
||||
.layui-nav-tree.ul-nav-easy .layui-this > a {
|
||||
background-color: transparent;
|
||||
color : #6cf;
|
||||
color: #6cf;
|
||||
}
|
||||
|
||||
.layui-nav-tree.ul-nav-easy .layui-nav-item.layui-this a:hover {
|
||||
@@ -470,7 +458,7 @@
|
||||
}
|
||||
|
||||
.layui-nav-tree.ul-nav-easy .layui-nav-item a {
|
||||
height : 45px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
@@ -478,69 +466,69 @@
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ul-upload-photo-list {}
|
||||
.ul-upload-photo-list {
|
||||
}
|
||||
|
||||
.ul-upload-photo-item {
|
||||
display : inline-block;
|
||||
width : 120px;
|
||||
height : 120px;
|
||||
margin : 5px;
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 5px;
|
||||
background-color: #ddd;
|
||||
cursor : pointer;
|
||||
box-shadow : 0 3px 5px #999;
|
||||
position : relative;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 3px 5px #999;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ul-upload-photo-main {
|
||||
background-size : cover;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ul-upload-photo-delete {
|
||||
position : absolute;
|
||||
right : 5px;
|
||||
top : 5px;
|
||||
z-index : 999;
|
||||
font-size : 20px;
|
||||
color : #fff;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
z-index: 999;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 2px #000;
|
||||
}
|
||||
|
||||
.ul-upload-photo-button {
|
||||
background-image : url('img/upload.png');
|
||||
background-size : cover;
|
||||
background-image: url("img/upload.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.ul-form-group-title {
|
||||
color : #999;
|
||||
color: #999;
|
||||
border-bottom: 1px solid #bbb;
|
||||
padding : 5px 0;
|
||||
padding: 5px 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ul-tree-item {
|
||||
background-color: #fbfbfb;
|
||||
cursor : pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ul-tree-item-info {
|
||||
border-left: 3px solid transparent;
|
||||
padding : 8px 0;
|
||||
position : relative;
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.ul-tree-item-info.current {
|
||||
background-color: #9cf;
|
||||
border-color : #6699CC;
|
||||
border-color: #6699cc;
|
||||
}
|
||||
|
||||
.ul-tree-item-info:hover {
|
||||
background-color: rgb(190, 222, 255);
|
||||
border-color : #6699CC;
|
||||
border-color: #6699cc;
|
||||
}
|
||||
|
||||
.ul-tree-item-title {
|
||||
@@ -549,17 +537,16 @@
|
||||
|
||||
.ul-tree-item-icon {
|
||||
position: absolute;
|
||||
left : 5px;
|
||||
top : 10px;
|
||||
left: 5px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.ul-note-item {
|
||||
display : flex;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items : flex-start;
|
||||
cursor : pointer;
|
||||
padding : 15px;
|
||||
align-items: flex-start;
|
||||
cursor: pointer;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.ul-note-item.current,
|
||||
@@ -569,37 +556,172 @@
|
||||
|
||||
.ul-note-item .ul-note-item-icon {
|
||||
margin-right: 10px;
|
||||
;
|
||||
}
|
||||
|
||||
.ul-note-item .ul-note-item-desc {
|
||||
color : #999;
|
||||
font-size : 12px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.ul-note-item .ul-note-item-time {
|
||||
color : #bbb;
|
||||
font-size : 12px;
|
||||
color: #bbb;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.ul-note-item .ul-note-item-tree {
|
||||
font-size : 12px;
|
||||
color : #bbb;
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
.ul-input-table {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ul-input-table td,
|
||||
.ul-input-table th {
|
||||
.ul-input-table tbody td,
|
||||
.ul-input-table tbody th {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.ul-input-table .layui-form-checkbox[lay-skin="primary"] {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.ul-input-table .layui-form-select dl dd {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ul-nav-min {
|
||||
box-shadow: 2px 2px 5px #999;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ul-nav-min-item {
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.ul-nav-min-item:hover {
|
||||
color: #6cf;
|
||||
}
|
||||
|
||||
.ul-header-a {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.ul-header-a-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* border-width: 1px 0;
|
||||
border-color: #bbb;
|
||||
border-style: solid; */
|
||||
padding: 5px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ul-header-a-nav-item {
|
||||
margin-right: 15px;
|
||||
color: #333;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ul-header-a-nav-item:hover .ul-header-a-nav-plus {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ul-header-a-img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.ul-header-a-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ul-header-a-nav-plus {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ul-nav-header-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
.ul-nav-header-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ul-nav-header-item {
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
padding: 5px 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.ul-nav-header-item:hover {
|
||||
color: #6cf;
|
||||
}
|
||||
|
||||
.ul-nav-header-red {
|
||||
background-color: #f72222;
|
||||
}
|
||||
|
||||
.ul-nav-header-red .ul-nav-header-item {
|
||||
color: #fff;
|
||||
}
|
||||
.ul-nav-header-red .ul-nav-header-item:hover {
|
||||
color: #fedf50;
|
||||
}
|
||||
.ul-nav-header-primary {
|
||||
background-color: #6cf;
|
||||
}
|
||||
|
||||
.ul-nav-header-primary .ul-nav-header-item {
|
||||
color: #fff;
|
||||
}
|
||||
.ul-nav-header-primary .ul-nav-header-item:hover {
|
||||
color: #ccffff;
|
||||
}
|
||||
|
||||
.ul-card-a {
|
||||
width: 180px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #bbb;
|
||||
box-shadow: 2px 2px 5px #999;
|
||||
color: #516073;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ul-card-a-left{
|
||||
width: 40%;
|
||||
}
|
||||
.ul-card-a-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
}
|
||||
.ul-card-a-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.ul-card-a-desc {
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
htmlListNew.push(htmlLine.slice(baseLineBlankNums))
|
||||
});
|
||||
|
||||
$(this).siblings('pre.demo-js').html(htmlListNew.join("\n"))
|
||||
$(this).siblings('pre.demo-js').text(htmlListNew.join("\n"))
|
||||
})
|
||||
layui.form.render()
|
||||
layui.element.render()
|
||||
|
||||
Reference in New Issue
Block a user