mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-01 10:32:49 +08:00
新增订单列表-简约卡片；
This commit is contained in:
@@ -1,92 +1,94 @@
|
||||
<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 class="demo-js-src" style="display: block;">
|
||||
<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 class="ul-avatar-list-item-tips">
|
||||
深山旅馆电话事件的最新消息
|
||||
</div>
|
||||
<div class="ul-avatar-list-item-time">
|
||||
19:54
|
||||
</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-item">
|
||||
<div class="ul-avatar-list-item-img"></div>
|
||||
<div class="ul-avatar-list-item-info">
|
||||
<div class="ul-avatar-list-item-title">
|
||||
张三
|
||||
<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 class="ul-avatar-list-item-tips">
|
||||
深山旅馆电话事件的最新消息
|
||||
</div>
|
||||
<div class="ul-avatar-list-item-time">
|
||||
19:54
|
||||
</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 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 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>
|
||||
<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 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>
|
||||
@@ -95,21 +97,22 @@
|
||||
</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 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-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>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
@@ -117,18 +120,20 @@
|
||||
<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 class="demo-js-src" style="display: block;">
|
||||
<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 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>
|
||||
@@ -400,6 +405,55 @@
|
||||
</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>
|
||||
</fieldset>
|
||||
@@ -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
85
source/scss/list/_ul-order-list-simple-card.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -123,48 +123,15 @@
|
||||
</a>
|
||||
</div>
|
||||
<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) {
|
||||
|
||||
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>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user