console
<body>
<header>我的银行卡</header>
<section>
<div class="item jianhang">
<div class="top">
<div class="title pull-left">
<div class="bank">建设银行</div>
<div class="card-type">储蓄卡</div>
</div>
<div class="cardID pull-right"><span class="hide">****</span> <span>9527</span></div>
</div>
<div class="clear"></div>
<div class="bottom">
每日支付限额 10000 元
</div>
</div>
<div class="item zhaoshang">
<div class="top">
<div class="title pull-left">
<div class="bank">招商银行</div>
<div class="card-type">信用卡</div>
</div>
<div class="cardID pull-right"><span class="hide">****</span> <span>4396</span></div>
</div>
<div class="clear"></div>
<div class="bottom">
每日支付限额 20000 元
</div>
</div>
<div class="item wangshang">
<div class="top">
<div class="title pull-left">
<div class="bank">网商银行</div>
<div class="card-type">银行账户</div>
</div>
<div class="cardID pull-right"><span class="hide">****</span> <span>1024</span></div>
</div>
<div class="clear"></div>
<div class="bottom">
每日支付限额 40000 元
</div>
</div>
<div class="item nonghang">
<div class="top">
<div class="title pull-left">
<div class="bank">农业银行</div>
<div class="card-type">储蓄卡</div>
</div>
<div class="cardID pull-right"><span class="hide">****</span> <span>8848</span></div>
</div>
<div class="clear"></div>
<div class="bottom">
每日支付限额 80000 元
</div>
</div>
<div class="item jiaotong">
<div class="top">
<div class="title pull-left">
<div class="bank">交通银行</div>
<div class="card-type">储蓄卡</div>
</div>
<div class="cardID pull-right"><span class="hide">****</span> <span>1987</span></div>
</div>
<div class="clear"></div>
<div class="bottom">
每日支付限额 80000 元
</div>
</div>
</section>
</body>
<style>
*{
margin:0;
padding:0;
}
body{
width:100%;
background: #eee;
}
header{
box-sizing: border-box;
width:100%;
height:75px;
font-size:20px;
font-weight:bold;
font-family: PingFangSC-Regular,Arial,sans-serif ;
text-align:center;
line-height:75px;
}
section{
width:100%;
height:auto;
overflow: hidden;
box-sizing: border-box;
}
.bg{
background:#388dcf;
}
.bg2{
background:lightblue;
}
section .item{
width:343px;
height:175px;
margin:0 auto;
box-sizing: border-box;
border-radius:7.5px;
padding: 16px 17px 17px 12px;
display:flex;
flex-direction: column;
justify-content: space-between;
margin-bottom:15px;
}
.pull-left{
float:left;
}
.clear{
clear:both;
}
.pull-right{
float:right;
}
.top .logo{
width: 39px;
height:39px;
border-radius: 50%;
}
.top .title{
color:white;
}
.top .title .bank{
font-size:17px;
font-weight: 600;
line-height:17px;
}
.top .title .card-type{
font-size:14px;
padding-top:4px;
}
.top .cardID{
padding-top:8px;
color:white;
font-family: PingFangSC-Regular, Arial, sans-serif ;
font-weight: bold;
font-size: 16px;
font-weight:550;
}
.bottom{
color:white;
text-align:right;
font-size: 14px;
}
.hide{
color: #afc4e6;
}
.jianhang{
background: linear-gradient(to bottom right, #398cce, #3864be);
box-shadow: 0px 0px 3px #3864be;
}
.zhaoshang{
background: linear-gradient(to bottom right, #ff7566, #ff5262);
box-shadow: 0px 0px 3px #ff5262;
}
.wangshang{
background: linear-gradient(to bottom right, #01aa9a, #028caf);
box-shadow: 0px 0px 3px #028caf;
}
.nonghang{
background: linear-gradient(to bottom right, #438A4E, #0C4139);
box-shadow: 0px 0px 3px #0C4139;
}
.jiaotong{
background: linear-gradient(to bottom right, #A49264, #A58671);
box-shadow: 0px 0px 3px #A58671;
}
</style>