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

新增导航,新增银行卡

Browse Source
This commit is contained in:
augushong
2021-04-22 00:24:34 +08:00
parent fb0f0d03b3
commit 7cf709a60a
3 changed files with 151 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
demo/card.html
View File

@@ -2,7 +2,7 @@
<legend>卡片A</legend>
<div class="layui-field-box">
<div class="ul-padding-md" data-repeat="3">
<div class="ul-card-a" >
<div class="ul-card-a">
<div class="ul-card-a-left">
<img width="100%" src="{$site_logo_src}" alt="">
</div>
@@ -21,6 +21,40 @@
</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>
</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">

20
demo/nav.html
View File

@@ -182,4 +182,24 @@
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>带图片和边框的导航</legend>
<div class="layui-field-box">
<div class="ul-nav-poster" style="width: 200px;">
<div class="ul-nav-poster-item" data-repeat="6">
<div class="ul-nav-poster-left">
<div class="ul-nav-poster-img" style="background-image: url('{$site_logo_src}');">
</div>
<div class="ul-nav-post-title">
国产专区
</div>
</div>
<div class="ul-nav-poster-right">
<div class="ul-nav-poster-desc">进入系统</div>
</div>
</div>
</div>
</div>
</fieldset>

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

@@ -710,7 +710,7 @@
padding: 15px;
cursor: pointer;
}
.ul-card-a-left{
.ul-card-a-left {
width: 40%;
}
.ul-card-a-right {
@@ -726,3 +726,98 @@
margin-top: 5px;
font-size: 14px;
}
.ul-nav-poster {
padding: 5px;
border: 1px solid #ddd;
border-top-width: 3px;
}
.ul-nav-poster-item {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.ul-nav-poster-left {
display: flex;
align-items: center;
}
.ul-nav-post-title {
color: #333;
font-weight: bold;
}
.ul-nav-poster-desc {
color: #999;
font-size: 12px;
font-weight: 100;
}
.ul-nav-poster-img {
width: 48px;
height: 48px;
background-size: cover;
background-position: center;
}
.ul-nav-poster-item:not(:last-child) {
border-bottom: 1px dashed #ddd;
}
.ul-card-bank {
width: 249px;
border: 1px solid #e4e4e4;
border-radius: 5px;
box-shadow: 0 1px 1px #e9e9e9;
float: left;
margin-right: 14px;
margin-bottom: 10px;
color: #666666;
font-size: 12px;
cursor: pointer;
}
.ul-card-bank-header {
padding: 10px 0;
margin: 0 14px;
border-bottom: 1px dotted #d9d9d9;
}
.ul-common-flex-sb {
display: flex;
align-items: center;
justify-content: space-between;
}
.ul-card-bank-body {
height: 40px;
padding: 10px 10px 20px 0;
}
.ul-card-bank-line {
width: 88px;
height: 23px;
font-weight: 100;
text-align: center;
background: #2e4158;
border-radius: 0 3px 0 0;
font-size: 14px;
float: left;
}
.ul-card-bank-footer {
padding: 3px 14px;
background: #f8f8f8;
border-top: 1px solid #e7e7e7;
}
.ul-card-bank-line-triangle {
width: 0px;
height: 3px;
display: block;
float: right;
border-left: 9px solid transparent;
border-bottom: 20px solid #fff;
}
.ul-card-bank-tips {
color: #6cf;
font-size: 14px;
}