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

新增数据极简卡片；

Browse Source
This commit is contained in:
augushong
2022-04-04 16:18:04 +08:00
parent 27d7984784
commit b77112cb34
5 changed files with 90 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
demo/pc/card.html
View File

@@ -265,4 +265,49 @@
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>数据卡片极简</legend>
<div class="layui-field-box">
<div class="ul-padding-md ul-bg-gray ul-mobile-box">
<div class="ul-card-data-simple">
<div class="item">
<div class="item-title">
订单数量
</div>
<div class="item-value">
120
</div>
<div class="item-rate up">
30% ↑
</div>
</div>
<div class="item">
<div class="item-title">
订单数量
</div>
<div class="item-value">
120
</div>
<div class="item-rate down">
30% ↓
</div>
</div>
<div class="item">
<div class="item-title">
线下订单
</div>
<div class="item-value">
120
</div>
<div class="item-rate">
30%
</div>
</div>
</div>
</div>
</div>
</fieldset>

4
demo/pc/fieldset.html
View File

@@ -1,9 +1,9 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>字段集区块 - 横线风格</legend>
<legend>简介卡片区块</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<fieldset class="layui-elem-field layui-field-title ul-field-clean">
<legend class="legend">字段集区块 - 横线风格</legend>
<legend class="legend">简介卡片区块</legend>
<div class="layui-field-box">
内容区域<br>
内容区域<br>

5
source/scss/_common.scss
View File

@@ -48,4 +48,9 @@
justify-content: space-between;
}
.ul-mobile-box {
width: 360px;
}
/* 通用类结束 */

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

@@ -1,3 +1,4 @@
@import './ul-card-simple-icon';
@import './ul-card-message';
@import './ul-info-card';
@import './ul-info-card';
@import './ul-card-data-simple';

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

@@ -0,0 +1,36 @@
.ul-card-data-simple {
display : flex;
align-items : center;
justify-content : flex-start;
background-color: #fff;
.item {
padding: 15px;
text-align: left;
.item-title {
font-size: 12px;
color : #666;
}
.item-value {
font-size : 16px;
font-weight: 600;
line-height: 30px;
}
.item-rate {
font-size: 12px;
}
.item-rate.up {
color: #FF5722;
}
.item-rate.down {
color: #1E9FFF;
}
}
}