sso-ssr/components/certification/RealNameCertification.vue

<template>
  <div class="certification">
    <div class="container">
      <div class="content" v-if="activeTab == 0">
        <div class="content-top">
          <h3>实名认证</h3>
          <div class="step">
            <img src="/images/all/step01.png" alt=""/>
            <div class="step-item"><span class="active">认证申请</span><span>等待审核</span><span>审核结果</span></div>
          </div>
        </div>
        <form action="">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="真实姓名"/>
            <span class="tip">身份已被认证，请确认。<a href="">仍有问题？</a></span>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="身份证号"/>
          </div>
          <button class="btn">提交</button>
          <div class="form-group agree">
            <input type="checkbox"/>
            <span class="agree">我已阅读并同意 <a href="/common/agreement">《优软云服务条款》</a></span>
          </div>
        </form>
      </div>
      <div class="content" v-if="activeTab == 1">
        <div class="content-top">
          <h3>实名认证</h3>
          <div class="step">
            <img src="/images/all/step02.png" alt=""/>
            <div class="step-item"><span class="active">认证申请</span><span class="active">等待审核</span><span>审核结果</span></div>
          </div>
        </div>
        <div class="content-bottom">
          <p><img src="/images/all/await.png" alt=""/>实名认证申请已提交，等待审核中</p>
          <span>我们会在1个工作日内审核您的资料，请耐心等待...</span>
          <div class="close-btn">关闭</div>
        </div>
      </div>
      <div class="content" v-if="activeTab == 2">
        <div class="content-top">
          <h3>实名认证</h3>
          <div class="step">
            <img src="/images/all/step03.png" alt=""/>
            <div class="step-item"><span class="active">认证申请</span><span class="active">等待审核</span><span class="active">审核结果</span></div>
          </div>
        </div>
        <div class="content-bottom">
          <p class="pass"><img src="/images/all/times.png" alt=""/>审核不通过</p>
          <span>您好，您提交的实名认证资料未通过审核，请重新认证</span>
          <div class="close-btn">重新认证</div>
        </div>
      </div>
      <div class="content" v-if="activeTab == 3">
        <div class="content-top">
          <h3>实名认证</h3>
          <div class="step">
            <img src="/images/all/step03.png" alt=""/>
            <div class="step-item"><span class="active">认证申请</span><span class="active">等待审核</span><span class="active">审核结果</span></div>
          </div>
        </div>
        <div class="content-bottom">
          <p class="passed"><img src="/images/all/pass.png" alt=""/>审核通过</p>
          <span>恭喜您，您提交的实名认证申请通过审核了！</span>
          <div class="close-btn">关闭</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'realNameCertification',
    data () {
      return {
        activeTab: 3
      }
    }
  }
</script>
<style lang="scss" scoped>
  .certification {
    margin: 0 auto;
    width: 100%;
    background: #eee;
    .container{
      padding-top: 50px;
      margin: 0 auto;
      width: 980px;
      text-align: center;
      .content{
        padding: 0 50px;
        margin: 50px auto 0;
        width: 100%;
        text-align: center;
        background: #fff;
          .content-top{
            height: 80px;
            line-height: 80px;
            h3{
              margin-bottom: 0;
              font-size: 24px;
              color: #000;
              border-bottom: 1px solid #dcdcdc;
            }
            .step{
              position: relative;
              margin-top: 10px;
              img{
                width: 315px;
                height: 46px;
              }
              .step-item{
                position: absolute;
                top: 45px;
                left: 265px;
                span{
                  margin-right: 85px;
                  font-size: 14px;
                  color: #b4b4b4;
                }
                span.active {
                  color: #0076ad;
                }
              }
            }
          }
          form {
            padding-bottom: 44px;
            margin-top: 152px;
            .form-group{
              position: relative;
              margin: 0 auto 16px;
              width: 360px;
              height: 44px;
              line-height: 44px;
              input{
                padding: 0 0 0 18px;
                width: 360px;
                height: 44px;
                line-height: 44px;
                font-size: 14px;
                color: #000;
                border-radius: 0;
              }
              span.tip{
                position: absolute;
                top: 0;
                right: -238px;
                font-size: 13px;
                color: #8c8c8c;
                a{
                  font-size: 13px;
                  color: #0076ad;
                }
              }
              i{
                position: absolute;
                top: 13px;
                left: 20px;
                font-size: 20px;
                color: #a0a0a0;
              }
              input[type='checkbox']{
                margin: 0 14px 0 55px;
                float: left;
                width: 16px;
                height: 16px;
              }
              span.agree{
                float: left;
                margin-top: -15px;
                font-size: 14px;
                color: #8b8b8b;
                a{
                  color: #0076ad;
                }
              }
            }
            .form-group.agree{
              margin: 20px auto 0 !important;
            }
            .btn {
              margin: 34px 0 16px 0;
              width: 360px;
              height: 44px;
              line-height: 4px;
              font-size: 16px;
              color: #fff;
              background: #0076AD;
              border-radius: 3px;
            }
          }
          .content-bottom{
            margin-top: 155px;
            padding-bottom: 50px;
            p{
              font-size: 24px;
              color: #323232;
              img{
                margin-right: 20px;
                width: 30px;
                height: 28px;
              }
            }
            p.pass{
              font-size: 24px;
              color: #e77405;
              img{
                height: 30px;
              }
            }
            p.passed {
              color: #2ab300;
              img{
                height: 30px;
              }
            }
            span{
              display: inline-block;
              margin: 15px 0 140px 0;
              font-size: 14px;
              color: #8b8b8b;
            }
            .close-btn{
              margin: 0 auto;
              width: 200px;
              height: 36px;
              line-height: 36px;
              font-size: 14px;
              text-align: center;
              color: #323232;
              border: 1px solid #d2d2d2;
              border-radius: 3px;
              cursor: pointer ;
            }
          }
      }
    }
  }
</style>