crowd-test-service-frontend/src/pages/UserCenter/Authentication.vue

<template>
  <div>
    <div class="right-modifyPsw">
      <div class="right-modifyPsw-title">
        <span style="font-size: 18px;font-weight: bold">身份认证</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="authentication-card authentication-card-select">
            <div class="authentication-card-title">个人认证</div>
            <el-row :gutter="10">
              <el-col :span="5">
                <div class="authentication-card-img">
                  <img src="../../assets/img/idcard1.png" >
                </div>
              </el-col>
              <el-col :span="19">
                <div class="authentication-card-title">手持证件照上传</div>
                <div class="authentication-card-info">需要进行人工审核，审核周期1-3个工作日</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="authentication-card">
            <div class="authentication-card-title">企业认证</div>
            <el-row :gutter="10">
              <el-col :span="5">
                <div class="authentication-card-img">
                  <img src="../../assets/img/idcard2.png" >
                </div>
              </el-col>
              <el-col :span="19">
                <div class="authentication-card-title">手持证件照上传</div>
                <div class="authentication-card-info">需要进行人工审核，审核周期1-3个工作日</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

  export default {
    name: "Authentication",
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style scoped lang="less">
  .right-modifyPsw {
    padding: 20px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);

    .right-modifyPsw-title {
      padding: 10px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }

    .authentication-card{
      background:rgba(249,249,249,1);
      padding: 20px 20px 30px 20px;
      .authentication-card-title {
        font-size:20px;
        font-family:Source Han Sans CN;
        font-weight:500;
        margin-bottom: 20px;
      }
      .authentication-card-info{
        font-size:16px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(153,153,153,1);
      }
      .authentication-card-img {
        background:rgba(0,118,203,1);
        border-radius:50%;
        width: 65px;
        height: 65px;
        text-align: center;
        vertical-align: middle;
        display: table-cell;
      }
    }
    .authentication-card-select {
      background-image: url("../../assets/img/selectAuthentication.png");
      background-size: 100% 100%;
    }
  }
</style>