mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-08 13:22:47 +08:00
新增极简图标卡片；
This commit is contained in:
@@ -1,157 +1,171 @@
|
|||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>卡片A</legend>
|
<legend>卡片A</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
<div class="ul-padding-md">
|
<div class="ul-padding-md">
|
||||||
<div class="ul-common-flex-list">
|
<div class="ul-common-flex-list">
|
||||||
<div class="ul-card-a" data-repeat="3">
|
<div class="ul-card-a" data-repeat="3">
|
||||||
<div class="ul-card-a-left">
|
<div class="ul-card-a-left">
|
||||||
<img width="100%" src="{$site_logo_src}" alt="">
|
<img width="100%" src="{$site_logo_src}" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-card-a-right">
|
<div class="ul-card-a-right">
|
||||||
<div class="ul-card-a-main">
|
<div class="ul-card-a-main">
|
||||||
<div class="ul-card-a-title">
|
<div class="ul-card-a-title">
|
||||||
卡片标题
|
卡片标题
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-card-a-desc">
|
<div class="ul-card-a-desc">
|
||||||
这是卡片说明
|
这是卡片说明
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>银行卡</legend>
|
<legend>银行卡</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
<div class="ul-padding-md">
|
<div class="ul-padding-md">
|
||||||
<div class="ul-card-bank" data-repeat="3">
|
<div class="ul-card-bank" data-repeat="3">
|
||||||
<div class="ul-common-flex-sb ul-card-bank-header">
|
<div class="ul-common-flex-sb ul-card-bank-header">
|
||||||
<div class="ul-card-bank-title">
|
<div class="ul-card-bank-title">
|
||||||
中国银行
|
中国银行
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-card-bank-number">
|
<div class="ul-card-bank-number">
|
||||||
尾号 ********123456
|
尾号 ********123456
|
||||||
</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>
|
||||||
<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>
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>详细属性卡片</legend>
|
<legend>详细属性卡片</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
<div class="ul-padding-md layui-bg-gray">
|
<div class="ul-padding-md layui-bg-gray">
|
||||||
<div class="layui-card ul-card">
|
<div class="layui-card ul-card">
|
||||||
<div class="layui-card-header">
|
<div class="layui-card-header">
|
||||||
<span class="ul-card-status layui-bg-green">意向</span>
|
<span class="ul-card-status layui-bg-green">意向</span>
|
||||||
<span class="ul-card-title">卡片面板</span>
|
<span class="ul-card-title">卡片面板</span>
|
||||||
<span class="ul-card-options">
|
<span class="ul-card-options">
|
||||||
<span>2021年3月29日</span>
|
<span>2021年3月29日</span>
|
||||||
<span class=""><i class="layui-icon layui-icon-right"></i></span>
|
<span class=""><i class="layui-icon layui-icon-right"></i></span>
|
||||||
</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>
|
||||||
<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>
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>数据卡片</legend>
|
<legend>数据卡片</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
<div class="ul-card-data-container ul-padding-md">
|
<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 ul-card-data" data-repeat="2">
|
||||||
<div class="ul-card-data-a-title">
|
<div class="ul-card-data-a-title">
|
||||||
509778.80
|
509778.80
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-card-data-a-options">
|
<div class="ul-card-data-a-options">
|
||||||
<div class="ul-card-data-a-item">
|
<div class="ul-card-data-a-item">
|
||||||
<i class="layui-icon layui-icon-gift"></i>
|
<i class="layui-icon layui-icon-gift"></i>
|
||||||
余额
|
余额
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-card-data-a-item">
|
<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 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>
|
||||||
</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">
|
|
||||||
盈亏总额(元)
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-card-data-b-value">
|
<div class="ul-card-data-b ul-card-data" data-repeat="2">
|
||||||
0.00
|
<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>
|
<div class="ul-card-data-c-item" data-repeat="3">
|
||||||
<div class="ul-card-data-c ul-card-data">
|
<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>
|
</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>
|
</fieldset>
|
||||||
1
source/scss/card/_index.scss
Normal file
1
source/scss/card/_index.scss
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@import './ul-card-simple-icon';
|
||||||
29
source/scss/card/_ul-card-simple-icon.scss
Normal file
29
source/scss/card/_ul-card-simple-icon.scss
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -3,6 +3,7 @@
|
|||||||
@import './nav/index';
|
@import './nav/index';
|
||||||
@import './form/index';
|
@import './form/index';
|
||||||
@import './fieldset/index';
|
@import './fieldset/index';
|
||||||
|
@import './card/index';
|
||||||
|
|
||||||
|
|
||||||
/* 头部开始 */
|
/* 头部开始 */
|
||||||
|
|||||||
Reference in New Issue
Block a user