手机版银行信用卡审核进度页面（附源码）

今天写了一个银行/信用卡/贷款审核进度的页面，除背景和 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 上面了，有需要的可以去下载：点击访问

推荐阅读：

CSS3中元素背景的 gradient 渐变属性

UEditor百度富文本编辑器 设置百分比宽度

HTML利用meta标签设置IE文档模式及相关知识拓展

overflow的一些小细节笔记

小程序学习笔记 文件结构、配置（8.10）