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

新增分组面板,卡片式相册列表,空数据

Browse Source
This commit is contained in:
augushong
2021-03-29 17:46:53 +08:00
parent 273920bb2f
commit ae6b39a8c0
5 changed files with 370 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
demo/group_panel.html Normal file
View File

@@ -0,0 +1,141 @@
<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">
<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 class="layui-card ul-card" style="width:300px">
<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>
<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>

85
demo/list.html
View File

@@ -94,4 +94,89 @@
</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">
<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 class="ul-photo-item">
<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 class="ul-photo-item">
<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">
<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 class="ul-photo-card-item">
<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 class="ul-photo-card-item">
<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 class="ul-photo-card-item">
<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>

11
demo/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>

158
public/cdn/layui-ul.css
View File

@@ -1,10 +1,8 @@
/* 列表开始 */
.ul-nav-tree {
}
.ul-nav-tree {}
.ul-nav-tree-group-title{
font-size: 16px;
.ul-nav-tree-group-title {
font-size : 16px;
font-weight: 600;
line-height: 2;
}
@@ -17,7 +15,7 @@
white-space: nowrap;
}
.ul-nav-tree-item.current .ul-nav-tree-item-title{
.ul-nav-tree-item.current .ul-nav-tree-item-title {
color: #6cf;
}
@@ -53,7 +51,7 @@
background-position: center;
}
.ul-border-right{
.ul-border-right {
border-right: 1px solid #bbb;
}
@@ -206,32 +204,142 @@
/* 链接导航开始 */
.ul-link-select{
display: flex;
align-items: flex-start;
.ul-link-select {
display : flex;
align-items : flex-start;
justify-content: flex-start
}
.ul-link-title{
}
.ul-link-list{
display: flex;
align-items: flex-start;
.ul-link-title {}
.ul-link-list {
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;
.ul-link-item {
padding : 0px 10px;
cursor : pointer;
margin-right: 10px;
}
.ul-link-item.current{
.ul-link-item.current {
border-radius: 15px;
border: 1px solid #6cf;
color: #6cf;
border : 1px solid #6cf;
color : #6cf;
}
/* 链接导航结束 */
/* 链接导航结束 */
/* 相册列表开始 */
.ul-photo-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
}
.ul-photo-item {
margin : 15px;
text-align: center;
min-width : 220px;
}
.ul-photo-poster {
width : 180px;
height : 140px;
background-image : url('../static/images/avatar.png');
background-size : cover;
background-position: center;
margin : 0 auto;
}
.ul-photo-info {
margin-top : 10px;
font-size : 18px;
line-height: 1.5;
}
.ul-photo-desc {
font-size: 14px;
color : #999;
}
.ul-photo-card-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
}
.ul-photo-card-item {
width : 200px;
margin : 15px;
box-shadow: 0 5px 10px #999;
}
.ul-photo-card-poster {
width : 100%;
height: 140px;
background-size : cover;
background-position: center;
}
.ul-photo-card-info {
padding : 5px;
font-size : 18px;
line-height: 1.5;
}
.ul-photo-card-desc {
font-size: 14px;
color : #999;
}
/* 相册列表结束 */
.ul-info-tips {
padding : 15px;
background-color: rgba(255, 255, 255, 0.3);
}
.ul-card-status {
padding : 5px;
border-radius: 5px;
}
.ul-card-options {
float : right;
cursor: pointer;
}
.data-img .data-img-main {
max-width: 120px;
margin : 5px;
}
.data-img {
display: block;
}
.ul-card-list {
display : flex;
flex-wrap: wrap;
}
.ul-card-list .ul-card {
margin-right: 15px;
}
.ul-card-list .layui-card:last-child {
margin-bottom: 15px;
}

BIN
public/static/images/view.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB