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

新增订单列表-简约卡片；

Browse Source
This commit is contained in:
augushong
2022-04-04 11:51:43 +08:00
parent 3c02fd2130
commit 4458d07933
4 changed files with 290 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
demo/pc/list.html
View File

@@ -1,92 +1,94 @@
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>头像列表</legend> <legend>头像列表</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<div class="ul-avatar-list"> <div class="demo-js-src" style="display: block;">
<div class="ul-avatar-list-item"> <div class="ul-avatar-list">
<div class="ul-avatar-list-item-img"></div> <div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-info"> <div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-title"> <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-tips"> </div>
深山旅馆电话事件的最新消息 <div class="ul-avatar-list-item">
</div> <div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-time"> <div class="ul-avatar-list-item-info">
19:54 <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>
</div> </div>
<div class="ul-avatar-list-item"> <div class="ul-avatar-list" style="width: 400px;">
<div class="ul-avatar-list-item-img"></div> <div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-info"> <div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-title"> <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-tips"> </div>
深山旅馆电话事件的最新消息 <div class="ul-avatar-list-item">
</div> <div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-time"> <div class="ul-avatar-list-item-info">
19:54 <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>
</div> </div>
</div> <div class="ul-avatar-list" style="width: 200px;">
<div class="ul-avatar-list" style="width: 400px;"> <div class="ul-avatar-list-item current">
<div class="ul-avatar-list-item"> <div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-img"></div> <div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-info"> <div class="ul-avatar-list-item-title">
<div class="ul-avatar-list-item-title"> 张三
张三 </div>
</div> <div class="ul-avatar-list-item-tips">
<div class="ul-avatar-list-item-tips"> 深山旅馆电话事件的最新消息
深山旅馆电话事件的最新消息 </div>
</div> <div class="ul-avatar-list-item-time">
<div class="ul-avatar-list-item-time"> 19:54
19:54 </div>
</div> </div>
</div> </div>
</div> <div class="ul-avatar-list-item">
<div class="ul-avatar-list-item"> <div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-img"></div> <div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-info"> <div class="ul-avatar-list-item-title">
<div class="ul-avatar-list-item-title"> 张三
张三 </div>
</div> <div class="ul-avatar-list-item-tips">
<div class="ul-avatar-list-item-tips"> 深山旅馆电话事件的最新消息
深山旅馆电话事件的最新消息 </div>
</div> <div class="ul-avatar-list-item-time">
<div class="ul-avatar-list-item-time"> 19:54
19:54 </div>
</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> </div>
@@ -95,21 +97,22 @@
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>侧边头像列表</legend> <legend>侧边头像列表</legend>
<div class="layui-field-box"> <div class="layui-field-box ">
<div class="demo-js-src" style="display: block;">
<div class="ul-avatar-sidebar-list" style="width: 200px;"> <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" data-repeat="3">
<div class="ul-avatar-sidebar-list-item-img"></div> <div class="ul-avatar-sidebar-list-item-img"></div>
<div class="ul-avatar-sidebar-list-item-info"> <div class="ul-avatar-sidebar-list-item-info">
<div class="ul-avatar-sidebar-list-item-title"> <div class="ul-avatar-sidebar-list-item-title">
张三 张三
</div> </div>
<div class="ul-avatar-sidebar-list-item-intro"> <div class="ul-avatar-sidebar-list-item-intro">
法外狂徒不寂寞 法外狂徒不寂寞
</div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
</fieldset> </fieldset>
@@ -117,18 +120,20 @@
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>相册列表</legend> <legend>相册列表</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<div class="ul-photo-list"> <div class="demo-js-src" style="display: block;">
<div class="ul-photo-item" data-repeat="3"> <div class="ul-photo-list">
<div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');"> <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 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> </div>
</div> </div>
</fieldset> </fieldset>
@@ -400,6 +405,55 @@
</div> </div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>订单列表-简约卡片</legend>
<div class="layui-field-box">
<div class="ul-order-list-simple-card">
<div class="item" data-repeat="3">
<div class="item-header">
<div class="item-header-title"> <i class="layui-icon layui-icon-home"></i> 奥宏商店</div>
<div class="item-header-status">处理中</div>
</div>
<div class="item-body">
<div class="item-body-item">
<div class="item-image" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="item-info">
<div class="ul-info-title">商品名称商品名称商品名称商品名称商品名称商品名称</div>
<div class="ul-info-value">
<div class="ul-info-value-item">
500ml
</div>
<div class="ul-info-value-item">
数量×2
</div>
</div>
<div class="ul-info-money">
￥1300.00
</div>
</div>
</div>
</div>
<div class="item-footer">
<div class="item-footer-item">
2022年4月4日11:31:24
</div>
<div class="item-footer-item">
<div class="">
<div class="layui-btn layui-btn-sm layui-btn-primary">取消</div>
<div class="layui-btn layui-btn-sm layui-btn-normal">评价</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</fieldset> </fieldset>

3
source/scss/list/_index.scss
View File

@@ -1 +1,2 @@
@import './ul-avatar-list' @import './ul-avatar-list';
@import './ul-order-list-simple-card';

85
source/scss/list/_ul-order-list-simple-card.scss Normal file
View File

@@ -0,0 +1,85 @@
.ul-order-list-simple-card {
.item {
box-shadow : 0 0 3px #ddd;
border-radius: 2px;
padding : 15px;
margin-bottom: 15px;
}
.item-header {
display : flex;
align-items : center;
justify-content: space-between;
font-size : 13px;
margin-bottom : 5px;
.item-header-status {
color: #1E9FFF;
}
}
.item-body {
margin-top : 10px;
padding-bottom: 10px;
.item-body-item {
display : flex;
align-items : center;
justify-content: space-between;
padding : 5px 0;
.item-image {
width : 90px;
height : 90px;
background-size : cover;
background-position: center;
box-shadow : 0 0 2px #999;
}
.item-info {
width : calc(100% - 90px - 15px);
margin-left: 15px;
height : 90px;
position : relative;
.ul-info-title {
font-weight : 500;
font-size : 15px;
margin-bottom : 5px;
text-overflow : -o-ellipsis-lastline;
overflow : hidden;
text-overflow : ellipsis;
display : -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ul-info-value {
display : flex;
align-items : center;
justify-content: space-between;
color : #999;
font-size : 14px;
}
.ul-info-money {
position : absolute;
bottom : 0;
left : 0;
font-size : 15px;
font-weight: 600;
}
}
}
}
.item-footer {
padding-top : 15px;
margin-top : 5px;
border-top : 1px solid #eee;
display : flex;
align-items : center;
justify-content: space-between;
}
}

90
view/index/index/index.html
View File

@@ -123,48 +123,15 @@
</a> </a>
</div> </div>
<script> <script>
function renderRepeat(elem) {
$(elem).find('[data-repeat]').each(function () {
for (let index = 1; index < $(this).data('repeat'); index++) {
var clone = $(this).clone()
clone.insertAfter(this)
renderRepeat(clone)
}
})
}
renderRepeat('body')
$('.demo-js-src').each(function () {
var html = $(this).html();
var htmlList = html.split(/[\n]/g);
var htmlListNew = []
var baseLineBlankNums = -1;
htmlList.forEach(function (htmlLine, htmlIndex) {
if (htmlIndex == 0 && htmlLine.length == 0) {
return true
}
if (baseLineBlankNums < 0) {
var kong = htmlLine.match(/^ */g) //筛选
if (kong != null) {
baseLineBlankNums = kong[0].length
} else {
baseLineBlankNums = 0
}
}
htmlListNew.push(htmlLine.slice(baseLineBlankNums))
});
$(this).siblings('pre.demo-js').text(htmlListNew.join("\n"))
$('.main-content h2,.main-content>.demo-page>fieldset').each(function (index, elem) {
if ($(elem).find('.demo-js-src').length == 0) {
$(elem).find('.layui-field-box').addClass('demo-js-src').css('display', 'block');
}
}) })
layui.form.render()
layui.element.render()
layui.code({
encode: true
})
layui.util.fixbar()
$('.main-content h2,.main-content>.demo-page>fieldset>legend').each(function (index, elem) { $('.main-content h2,.main-content>.demo-page>fieldset>legend').each(function (index, elem) {
var id = 'title' + index; var id = 'title' + index;
@@ -189,8 +156,55 @@
} }
}) })
} }
function renderRepeat(elem) {
$(elem).find('[data-repeat]').each(function () {
for (let index = 1; index < $(this).data('repeat'); index++) {
var clone = $(this).clone()
clone.insertAfter(this)
renderRepeat(clone)
}
})
}
$('.demo-js-src').each(function () {
var html = $(this).html();
var htmlList = html.split(/[\n]/g);
var htmlListNew = []
var baseLineBlankNums = -1;
htmlList.forEach(function (htmlLine, htmlIndex) {
if (htmlIndex == 0 && htmlLine.length == 0) {
return true
}
if (baseLineBlankNums < 0) {
var kong = htmlLine.match(/^ */g) //筛选
if (kong != null) {
baseLineBlankNums = kong[0].length
} else {
baseLineBlankNums = 0
}
}
htmlListNew.push(htmlLine.slice(baseLineBlankNums))
});
var contentCode = htmlListNew.join("\n");
if ($(this).siblings('pre.demo-js').length == 0) {
$('<pre class="layui-code demo-js"></pre>').insertAfter(this);
}
$(this).siblings('pre.demo-js').text(contentCode)
})
renderRepeat('body')
layui.form.render()
layui.element.render()
layui.code({
encode: true
})
layui.util.fixbar()
</script> </script>
</body> </body>