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
2022-10-21 20:08:59 +08:00
parent 3921f7a807
commit 2d54586f09
12 changed files with 252 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
source/components/list/ul-order-list-simple-card/_index.env Normal file
View File

@@ -0,0 +1,4 @@
title=订单列表-简约卡片
padding=1
margin=0
gray=1

43
source/components/list/ul-order-list-simple-card/_index.html Normal file
View File

@@ -0,0 +1,43 @@
<div class="ul-order-list-simple-card">
<div class="item" v-for="i in 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>

0
source/components/list/ul-order-list-simple-card/_index.md Normal file
View File

86
source/components/list/ul-order-list-simple-card/_index.scss Normal file
View File

@@ -0,0 +1,86 @@
.ul-order-list-simple-card {
.item {
box-shadow : 0 0 3px #ddd;
border-radius: 2px;
padding : 15px;
margin-bottom: 15px;
background-color: #fff;
}
.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;
}
}