proginn-frontend/pages/frontend/skill_cert/cert_form.vue

<template>
  <div class="container">
    <skillCertHeader title="全职自由工作者认证"></skillCertHeader>
    <div class="description rule">
      <div class="col-title">
        <span class="label">认证说明</span>
      </div>
      <p class="content">
        1. 程序员客栈签约通过 <br/>2. 每周有40小时+进行平台项目工作，非自由职业者无需申请； <br/>3. 需提交社保缴纳记录(或者其他能证明自由职业身份)的截图；<br/>4.
        如果近3个月如果有社保缴费记录，请备注缴费来源，否则不过 <br/>5. 确认诚信保证书+相关条约； <br/>6. 无纠纷记录，差评，能及时响应客户； <br/>7. 良好的责任心，工作态度和习惯，沟通能力 <br/>8.
        客栈头像为本人露脸照片
        <br/>9. 认证失败费用无法退回，请确保已理解所有内容 <br/>有效期【180天】<br/>审核时间：2个工作日内
      </p>
    </div>
    <div class="description condition">
      <div class="col-title">
        <span class="label">认证权益</span>
      </div>
      <p class="content">
        1. 会优先对接给需要全职开发者的客户 <br/>2. 拥有单独展示列表，获得更多曝光机会 <br/>3. 认证后派单权重提高 <br/>4. 拥有专属标志，增加客户信任感 <br/>5. 全职认证+会员可以同时接2单
      </p>
    </div>
    <div class="col-title cert-flow">
      <span class="label">认证流程</span>
    </div>
    <div class="content cert-flow-content">
      1.认证失败费用无法退回，请确保已理解以上内容。 <br/>2.确保个人通过签约的资料真实有效。 <br/>3.对远程工作有极大的热情，乐于参与其中并为雇主创造价值。
    </div>
    <div class="improve_profile">
      <span class="label">1、完善个人主页</span>
      <img class="icon" src="@/assets/img/skill_cert/icon_arrow_right.png" alt=""/>
    </div>
    <div class="security">
      <span class="security-title">2、上传三个月内的社保证明截图</span>
      <span class="label">如何查询</span>
      <img class="icon" src="@/assets/img/skill_cert/icon_tips.png" alt=""/>
    </div>
    <div class="width-infinity">
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-success="handleSuccess"
        :before-upload="beforeAvatarUpload"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">支持2M以内的PNG、JPG、JPEG格式的图片</div>
      </el-upload>
    </div>
    <span class="promise">3、承诺保证</span>
    <div class="description promise-content">
      <p class="title">承诺保证书</p>
      <p class="label">本人承诺在【程序员客栈自由工作】认证过程中提交的信息真实有效，如因此给其他组织或个人（含本人）造成损失，一切本人承担</p>
    </div>
    <div class="agree-action">
      <img class="icon" src="@/assets/img/skill_cert/icon_checked.png" alt=""/>
      <span class="label">我已阅读并同意承诺保证书</span>
    </div>
    <el-input class="input" type="textarea" placeholder="请输入..." :autosize="{ minRows: 8}"
              v-model="form.desc"></el-input>
    <div class="buttons">
      <el-button class="submit" type="primary" @click="submit">申请认证</el-button>
    </div>
  </div>
</template>

<script>
  import skillCertHeader from "@/components/skill_cert_header/skill_cert_header";

  export default {
    name: "cert_form",
    components: {
      skillCertHeader
    },
    data() {
      return {
        form: {
          desc: ''
        }
      }
    },
    methods: {
      handleSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!(isJPG || isPNG)) {
          this.$message.error('上传图片只能是 PNG/JPG/JPEG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      submit() {
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    margin: 10px auto;
    background: #ffffff;
    border-radius: 10px;
    padding: 0 85px;
    @media(max-width: 768px) {
      padding: 0 15px;
    }
    box-sizing: border-box;

    .width-infinity {
      width: 100%;
    }

    .content {
      margin: 14px 14px 0 14px;
      font-size: 15px;
      font-family: PingFangSC, PingFangSC-Regular, sans-serif;
      font-weight: 400;
      text-align: left;
      color: #222222;
      line-height: 24px;
    }

    .description {
      width: 100%;
      background: #f4f5f9;
      border-radius: 8px;
      padding-bottom: 32px;
    }

    .rule {
      margin-top: 20px;
      margin-bottom: 10px;
    }

    .condition {
      .item {
        display: flex;
        margin-top: 17px;

        .text {
          margin-left: 14px;
          font-size: 15px;
          font-family: PingFangSC, PingFangSC-Regular, sans-serif;
          font-weight: 400;
          text-align: left;
          color: #222222;
          line-height: 24px;
        }

        .action {
          margin-left: 28px;
          font-size: 15px;
          font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
          font-weight: 600;
          text-align: left;
          color: #308eff;
          line-height: 24px;
        }
      }
    }

    .col-title {
      display: inline-flex;
      align-items: center;
      height: 43px;

      &::before {
        content: '';
        width: 2px;
        height: 14px;
        background: #308eff;
        border-radius: 2px;
      }

      .label {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
        font-weight: 600;
        color: #222222;
        padding: 0 10px;
      }
    }

    .cert-flow {
      width: 100%;
      margin-top: 19px;
      margin-bottom: 4px;
    }

    .cert-flow-content {
      width: 100%;
      color: #999999;
    }

    .improve_profile {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 22px;

      .label {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Medium, sans-serif;
        font-weight: 500;
        text-align: left;
        color: #308eff;
        line-height: 24px;
      }

      .icon {
        width: 13px;
        height: 13px;
      }
    }

    .security {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 22px;
      margin-bottom: 14px;

      .security-title {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Medium, sans-serif;
        font-weight: 500;
        text-align: left;
        color: #222222;
        line-height: 24px;
      }

      .label {
        margin-left: 10px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium, sans-serif;
        font-weight: 500;
        text-align: left;
        color: #308eff;
        line-height: 20px;
      }

      .icon {
        width: 16px;
        height: 16px;
      }
    }

    .promise {
      width: 100%;
      margin-top: 32px;
      margin-bottom: 20px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Medium, sans-serif;
      font-weight: 500;
      text-align: left;
      color: #222222;
      line-height: 24px;
    }

    .promise-content {
      padding: 43px;

      .title {
        font-size: 21px;
        font-family: PingFangSC, PingFangSC-Medium, sans-serif;
        font-weight: 500;
        text-align: center;
        color: #222222;
        line-height: 24px;
      }

      .label {
        margin-top: 13px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular, sans-serif;
        font-weight: 400;
        text-align: center;
        color: #222222;
        line-height: 24px;
      }
    }

    .agree-action {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 14px;
      margin-bottom: 22px;

      .icon {
        width: 20px;
        height: 20px;
      }

      .label {
        margin-left: 4px;
      }
    }

    .buttons {
      width: 100%;

      .submit {
        width: 208px;
        height: 58px;
        margin-top: 22px;
        margin-bottom: 49px;
        background: #308eff;
        border-radius: 8px;

        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium, sans-serif;
        font-weight: 500;
        color: #ffffff;
        line-height: 26px;
      }
    }
  }
</style>