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

将数据卡片极简使用新结构重构

Browse Source
This commit is contained in:
augushong
2023-04-17 14:19:45 +08:00
parent c9437b5cf5
commit 471134cbe5
12 changed files with 232 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
demo/pc/card.html
View File

@@ -212,87 +212,6 @@
</div> </div>
</fieldset> </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 line">
<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>
<fieldset class="layui-elem-field layui-field-title">
<legend>数据卡片极简底色</legend>
<div class="layui-field-box">
<div class=" ul-mobile-box">
<div class="ul-card-data-simple ul-card-data-simple-bg-black">
<div class="item main">
<div class="item-title">
订单数量
</div>
<div class="item-value">
120
</div>
</div>
<div class="item">
<div class="item-title">
订单数量
</div>
<div class="item-value">
120
</div>
</div>
<div class="item">
<div class="item-title">
线下订单
</div>
<div class="item-value">
120
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>数据详情卡片-简约</legend> <legend>数据详情卡片-简约</legend>

127
public/cdn/layui-ul.css
View File

@@ -422,67 +422,6 @@
margin-bottom: 6px; margin-bottom: 6px;
} }
.ul-card-data-simple {
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #fff;
}
.ul-card-data-simple .item {
margin: 15px 0;
padding: 0 15px;
text-align: left;
}
.ul-card-data-simple .item .item-title {
font-size: 12px;
color: #666;
}
.ul-card-data-simple .item .item-value {
font-size: 16px;
font-weight: 600;
line-height: 30px;
}
.ul-card-data-simple .item .item-rate {
font-size: 12px;
}
.ul-card-data-simple .item .item-rate.up {
color: #FF5722;
}
.ul-card-data-simple .item .item-rate.down {
color: #1E9FFF;
}
.ul-card-data-simple .item.line {
border-right: 1px solid #eee;
}
.ul-card-data-simple.ul-card-data-simple-bg-black {
background-color: #393D49;
color: #fff;
border-radius: 15px;
padding: 15px;
box-shadow: 0 0 4px #999;
}
.ul-card-data-simple.ul-card-data-simple-bg-black .item {
padding: 15px;
margin: 0 10px 0 0;
}
.ul-card-data-simple.ul-card-data-simple-bg-black .item .item-title {
color: #fff;
}
.ul-card-data-simple.ul-card-data-simple-bg-black .item .item-value {
font-size: 20px;
}
.ul-card-data-simple.ul-card-data-simple-bg-black .item.main {
background-color: #fff;
color: #393D49;
border-radius: 15px;
box-shadow: 1px 1px 3px #999;
margin-right: 25px;
}
.ul-card-data-simple.ul-card-data-simple-bg-black .item.main .item-title {
color: #393D49;
}
.ul-data-card { .ul-data-card {
margin: 15px; margin: 15px;
padding: 15px; padding: 15px;
@@ -941,6 +880,72 @@
font-size: 12px; font-size: 12px;
} }
.ul-card-data-simple {
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #fff;
}
.ul-card-data-simple .item {
margin: 15px 0;
padding: 0 15px;
text-align: left;
}
.ul-card-data-simple .item .item-title {
font-size: 12px;
color: #666;
}
.ul-card-data-simple .item .item-value {
font-size: 16px;
font-weight: 600;
line-height: 30px;
}
.ul-card-data-simple .item .item-rate {
font-size: 12px;
}
.ul-card-data-simple .item .item-rate.up {
color: #FF5722;
}
.ul-card-data-simple .item .item-rate.up::after {
content: " ↑";
}
.ul-card-data-simple .item .item-rate.down {
color: #1E9FFF;
}
.ul-card-data-simple .item .item-rate.down::after {
content: " ↓";
}
.ul-card-data-simple .item.line {
border-right: 1px solid #eee;
}
.ul-card-data-simple.bg-black {
background-color: #393D49;
color: #fff;
border-radius: 15px;
padding: 15px;
box-shadow: 0 0 4px #999;
}
.ul-card-data-simple.bg-black .item {
padding: 15px;
margin: 0 10px 0 0;
}
.ul-card-data-simple.bg-black .item .item-title {
color: #fff;
}
.ul-card-data-simple.bg-black .item .item-value {
font-size: 20px;
}
.ul-card-data-simple.bg-black .item.main {
background-color: #fff;
color: #393D49;
border-radius: 15px;
box-shadow: 1px 1px 3px #999;
margin-right: 25px;
}
.ul-card-data-simple.bg-black .item.main .item-title {
color: #393D49;
}
.ul-card-money { .ul-card-money {
padding: 26px; padding: 26px;
background-color: #1E9FFF; background-color: #1E9FFF;

2
public/cdn/layui-ul.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
source/components/_index.scss
View File

@@ -1,4 +1,5 @@
@import './card/ul-card-data-a/index'; @import './card/ul-card-data-a/index';
@import './card/ul-card-data-simple/index';
@import './card/ul-card-money/index'; @import './card/ul-card-money/index';
@import './card/ul-card-qrcode/index'; @import './card/ul-card-qrcode/index';
@import './card/ul-easy-image/index'; @import './card/ul-easy-image/index';

6
source/components/card/ul-card-data-simple/_index.env Normal file
View File

@@ -0,0 +1,6 @@
title=数据卡片极简
padding=1
margin=0
gray=1
mobile=0
inner_margin=0

70
source/components/card/ul-card-data-simple/_index.html Normal file
View File

@@ -0,0 +1,70 @@
<div class="ul-section">
<div class="ul-card-data-simple">
<div class="item line">
<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 class="ul-section">
<div class="ul-card-data-simple bg-black">
<div class="item main">
<div class="item-title">
订单数量
</div>
<div class="item-value">
120
</div>
</div>
<div class="item">
<div class="item-title">
订单数量
</div>
<div class="item-value">
120
</div>
</div>
<div class="item">
<div class="item-title">
线下订单
</div>
<div class="item-value">
120
</div>
</div>
</div>
</div>

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

5
source/components/card/ul-card-data-simple/_index.php Normal file
View File

@@ -0,0 +1,5 @@
<?php
return [
];

83
source/components/card/ul-card-data-simple/_index.scss Normal file
View File

@@ -0,0 +1,83 @@
.ul-card-data-simple {
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #fff;
.item {
margin: 15px 0;
padding: 0 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;
&::after {
content: ' ↑';
}
}
.item-rate.down {
color: #1E9FFF;
&::after {
content: ' ↓';
}
}
}
.item.line {
border-right: 1px solid #eee;
}
&.bg-black {
background-color: #393D49;
color: #fff;
border-radius: 15px;
padding: 15px;
box-shadow: 0 0 4px #999;
.item {
padding: 15px;
margin: 0 10px 0 0;
.item-title {
color: #fff;
}
.item-value {
font-size: 20px;
}
}
.item.main {
background-color: #fff;
color: #393D49;
border-radius: 15px;
box-shadow: 1px 1px 3px #999;
margin-right: 25px;
.item-title {
color: #393D49;
}
}
}
}

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

@@ -1,7 +1,5 @@
@import './ul-card-simple-icon'; @import './ul-card-simple-icon';
@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-bg-black';
@import './ul-data-card'; @import './ul-data-card';
@import './ul-card-file'; @import './ul-card-file';

34
source/scss/card/_ul-card-data-simple-bg-black.scss
View File

@@ -1,34 +0,0 @@
.ul-card-data-simple.ul-card-data-simple-bg-black {
background-color: #393D49;
color : #fff;
border-radius : 15px;
padding : 15px;
box-shadow: 0 0 4px #999;
.item {
padding: 15px;
margin : 0 10px 0 0;
.item-title {
color: #fff;
}
.item-value {
font-size: 20px;
}
}
.item.main {
background-color: #fff;
color : #393D49;
border-radius : 15px;
box-shadow : 1px 1px 3px #999;
margin-right: 25px;
.item-title {
color: #393D49;
}
}
}

41
source/scss/card/_ul-card-data-simple.scss
View File

@@ -1,41 +0,0 @@
.ul-card-data-simple {
display : flex;
align-items : center;
justify-content : flex-start;
background-color: #fff;
.item {
margin : 15px 0;
padding : 0 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;
}
}
.item.line {
border-right: 1px solid #eee;
}
}