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-14 21:38:58 +08:00
parent 4544dc48c4
commit b8570d96a4
3 changed files with 104 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
demo/pc/card.html
View File

@@ -347,4 +347,55 @@
</div> </div>
</div> </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>数据详情卡片-简约</legend>
<div class="layui-field-box">
<div class="ul-mobile-box">
<div class="ul-data-card">
<div class="header">
<div class="mian">
<i class="layui-icon layui-icon-user"></i>
<span>奥古斯宏</span>
</div>
<div class="plus">
<div class="layui-btn layui-btn-sm">详情</div>
</div>
</div>
<div class="body">
<div class="main">
<div class="item" data-repeat="3">
<div class="item-title">
姓名：
</div>
<div class="item-value">
张三
</div>
</div>
<div class="item">
<div class="item-title">
地址：
</div>
<div class="item-value">
内蒙古大兴安岭雷达峰红岸基地
</div>
</div>
</div>
</div>
<div class="footer">
<div class="main">
2022年4月14日21:28:44
</div>
<div class="plus">
<div class="layui-btn layui-btn-sm layui-btn-normal">删除</div>
<div class="layui-btn layui-btn-sm layui-btn-primary">修改</div>
</div>
</div>
</div>
</div>
</div>
</fieldset> </fieldset>

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

@@ -2,4 +2,5 @@
@import './ul-card-message'; @import './ul-card-message';
@import './ul-info-card'; @import './ul-info-card';
@import './ul-card-data-simple'; @import './ul-card-data-simple';
@import './ul-card-data-simple-bg-black'; @import './ul-card-data-simple-bg-black';
@import './_ul-data-card';

51
source/scss/card/_ul-data-card.scss Normal file
View File

@@ -0,0 +1,51 @@
.ul-data-card {
margin : 15px;
padding : 15px;
box-shadow : 0 0 3px #bbb;
border-radius: 5px;
.header {
display : flex;
align-items : center;
justify-content: space-between;
padding-bottom : 10px;
border-bottom : 1px solid #eee;
}
.body {
padding: 10px 0;
.main {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
.item {
min-width : 50%;
display : flex;
align-items : center;
margin-bottom: 10px;
.item-title {
font-size : 14px;
font-weight: 600;
}
.item-value {
font-size: 14px;
}
}
}
}
.footer {
border-top : 1px solid #eee;
padding-top : 10px;
display : flex;
justify-content: space-between;
align-items : center
}
}