今天写了一个银行/信用卡/贷款审核进度的页面,除背景和 logo 之外,均使用 HTML+CSS 编写。
只做了简单的手机端兼容,主要是审核进度的进度条效果实现。代码如下:
HTML:
<div class="review-box">
<span class="line-box">
<span class="line-inner"></span>
</span>
<ul class="status-box">
<li>
<span class="dot-box on">
<span class="dot-inner">
</span>
</span>
<p>待审核</p>
</li>
<li>
<span class="dot-box">
<span class="dot-inner">
</span>
</span>
<p>审核中</p>
</li>
<li>
<span class="dot-box">
<span class="dot-inner">
</span>
</span>
<p>放款成功</p>
</li>
</ul>
</div>
CSS:
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
/*审核状态*/
.line-box{
display: block;
width: 65%;
height: 2px;
background: #FFF;
margin: 0 auto;
}
.line-box .line-inner{
display: block;
width: 25%;
height: 2px;
background: #00C6FF;
}
.status-box{
display: flex;
justify-content: space-around;
color: #FFF;
margin-top: -10px;
}
.status-box .dot-box{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
background: #FFF;
box-shadow: 0 5px 10px 0 rgba(239,100,56,0.37);
}
.status-box .dot-box.on{
background: #00C6FF;
}
.status-box .dot-inner{
position: absolute;
left: 7px;
top: 7px;
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #FFF;
}
我将完整的页面上传到我的 GitHub 上面了,有需要的可以去下载:点击访问
声明:本文由w3h5原创,转载请注明出处:《手机版银行信用卡审核进度页面(附源码)》 https://cloud.tencent.com/developer/article/1538001