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 10:38:28 +08:00
parent 7f453df942
commit f7d8cb9a99
4 changed files with 177 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
demo/pc/card.html
View File

@@ -1,157 +1,171 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>卡片A</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-common-flex-list">
<div class="ul-card-a" data-repeat="3">
<div class="ul-card-a-left">
<img width="100%" src="{$site_logo_src}" alt="">
</div>
<div class="ul-card-a-right">
<div class="ul-card-a-main">
<div class="ul-card-a-title">
卡片标题
</div>
<div class="ul-card-a-desc">
这是卡片说明
</div>
<legend>卡片A</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-common-flex-list">
<div class="ul-card-a" data-repeat="3">
<div class="ul-card-a-left">
<img width="100%" src="{$site_logo_src}" alt="">
</div>
<div class="ul-card-a-right">
<div class="ul-card-a-main">
<div class="ul-card-a-title">
卡片标题
</div>
<div class="ul-card-a-desc">
这是卡片说明
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>银行卡</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-card-bank" data-repeat="3">
<div class="ul-common-flex-sb ul-card-bank-header">
<div class="ul-card-bank-title">
中国银行
</div>
<div class="ul-card-bank-number">
尾号 ********123456
</div>
<legend>银行卡</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-card-bank" data-repeat="3">
<div class="ul-common-flex-sb ul-card-bank-header">
<div class="ul-card-bank-title">
中国银行
</div>
<div class="ul-card-bank-number">
尾号 ********123456
</div>
</div>
<div class="ul-common-flex-sb ul-card-bank-body">
<div class="ul-card-bank-line">
<div class="ul-card-bank-line-triangle"></div>
</div>
<div class="ul-card-bank-tips">
默认
</div>
</div>
<div class="ul-common-flex-sb ul-card-bank-footer">
<div class="ul-card-bank-time">
绑定日期:2021-03-15
</div>
<div class="ul-card-bank-name">
**宏
</div>
</div>
</div>
</div>
<div class="ul-common-flex-sb ul-card-bank-body">
<div class="ul-card-bank-line">
<div class="ul-card-bank-line-triangle"></div>
</div>
<div class="ul-card-bank-tips">
默认
</div>
</div>
<div class="ul-common-flex-sb ul-card-bank-footer">
<div class="ul-card-bank-time">
绑定日期:2021-03-15
</div>
<div class="ul-card-bank-name">
**宏
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>详细属性卡片</legend>
<div class="layui-field-box">
<div class="ul-padding-md layui-bg-gray">
<div class="layui-card ul-card">
<div class="layui-card-header">
<span class="ul-card-status layui-bg-green">意向</span>
<span class="ul-card-title">卡片面板</span>
<span class="ul-card-options">
<span>2021年3月29日</span>
<span class=""><i class="layui-icon layui-icon-right"></i></span>
</span>
<legend>详细属性卡片</legend>
<div class="layui-field-box">
<div class="ul-padding-md layui-bg-gray">
<div class="layui-card ul-card">
<div class="layui-card-header">
<span class="ul-card-status layui-bg-green">意向</span>
<span class="ul-card-title">卡片面板</span>
<span class="ul-card-options">
<span>2021年3月29日</span>
<span class=""><i class="layui-icon layui-icon-right"></i></span>
</span>
</div>
<div class="layui-card-body">
<div class="data-item">
<span class="data-title">入库时间:</span>
<span class="data-value">2021年3月29日16:33:21</span>
</div>
<div class="data-item">
<span class="data-title">用户名称:</span>
<span class="data-value">奥古斯宏</span>
</div>
<div class="data-item">
<span class="data-title">公司名称:</span>
<span class="data-value">临沂奥宏网络科技有限公司</span>
</div>
<div class="data-item">
<span class="data-title">电话:</span>
<span class="data-value">13012341234</span>
</div>
<div class="data-item">
<span class="data-title">相册:</span>
<span class="data-img">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
</span>
</div>
</div>
</div>
</div>
<div class="layui-card-body">
<div class="data-item">
<span class="data-title">入库时间:</span>
<span class="data-value">2021年3月29日16:33:21</span>
</div>
<div class="data-item">
<span class="data-title">用户名称:</span>
<span class="data-value">奥古斯宏</span>
</div>
<div class="data-item">
<span class="data-title">公司名称:</span>
<span class="data-value">临沂奥宏网络科技有限公司</span>
</div>
<div class="data-item">
<span class="data-title">电话:</span>
<span class="data-value">13012341234</span>
</div>
<div class="data-item">
<span class="data-title">相册:</span>
<span class="data-img">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
</span>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>数据卡片</legend>
<div class="layui-field-box">
<div class="ul-card-data-container ul-padding-md">
<div class="ul-card-data-a ul-card-data" data-repeat="2">
<div class="ul-card-data-a-title">
509778.80
</div>
<div class="ul-card-data-a-options">
<div class="ul-card-data-a-item">
<i class="layui-icon layui-icon-gift"></i>
余额
</div>
<div class="ul-card-data-a-item">
<div class="layui-btn layui-btn-xs">充值</div>
<div class="layui-btn layui-btn-xs">提现</div>
<div class="layui-btn layui-btn-xs">记录</div>
</div>
</div>
</div>
<div class="ul-card-data-b ul-card-data" data-repeat="2">
<div class="ul-card-data-b-main">
<div class="ul-card-data-b-icon layui-icon layui-icon-gift">
</div>
<div class="ul-card-data-b-info">
<div class="ul-card-data-b-title">
盈亏总额(元)
<legend>数据卡片</legend>
<div class="layui-field-box">
<div class="ul-card-data-container ul-padding-md">
<div class="ul-card-data-a ul-card-data" data-repeat="2">
<div class="ul-card-data-a-title">
509778.80
</div>
<div class="ul-card-data-a-options">
<div class="ul-card-data-a-item">
<i class="layui-icon layui-icon-gift"></i>
余额
</div>
<div class="ul-card-data-a-item">
<div class="layui-btn layui-btn-xs">充值</div>
<div class="layui-btn layui-btn-xs">提现</div>
<div class="layui-btn layui-btn-xs">记录</div>
</div>
</div>
</div>
<div class="ul-card-data-b-value">
0.00
<div class="ul-card-data-b ul-card-data" data-repeat="2">
<div class="ul-card-data-b-main">
<div class="ul-card-data-b-icon layui-icon layui-icon-gift">
</div>
<div class="ul-card-data-b-info">
<div class="ul-card-data-b-title">
盈亏总额(元)
</div>
<div class="ul-card-data-b-value">
0.00
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ul-card-data-c ul-card-data">
</div>
<div class="ul-card-data-c ul-card-data">
<div class="ul-card-data-c-item" data-repeat="3">
<div class="ul-card-data-c-value">
0
</div>
<div class="ul-card-data-c-title">
余额
</div>
</div>
</div>
<div class="ul-card-data-c-item" data-repeat="3">
<div class="ul-card-data-c-value">
0
</div>
<div class="ul-card-data-c-title">
余额
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>极简图标卡片</legend>
<div class="layui-field-box">
<div class="ul-card-simple-icon" data-repeat="3">
<div class="ul-card-simple-icon-image" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-card-simple-icon-title">
图标
</div>
</div>
</div>
</fieldset>

1
source/scss/card/_index.scss Normal file
View File

@@ -0,0 +1 @@
@import './ul-card-simple-icon';

29
source/scss/card/_ul-card-simple-icon.scss Normal file
View File

@@ -0,0 +1,29 @@
.ul-card-simple-icon {
display : inline-block;
margin-right : 15px;
margin-bottom : 15px;
box-shadow : 0 2px 12px 0 #bbb;
border-radius : 4px;
border : 1px solid #ebeef5;
background-color: #fff;
box-sizing : border-box;
width : 100px;
padding : 10px;
text-align: center;
.ul-card-simple-icon-image {
width : 80px;
height : 80px;
background-size : cover;
background-position: center;
display : inline-block;
}
.ul-card-simple-icon-title {
border-top : 2px solid #ebeef5;
margin-top : 8px;
padding-top: 8px;
}
}

1
source/scss/layui-ul.scss
View File

@@ -3,6 +3,7 @@
@import './nav/index';
@import './form/index';
@import './fieldset/index';
@import './card/index';
/* 头部开始 */