yizhizan-h5/pages/my/jobApplicant/login.vue

<template>
  <view class="login">
    <view class="logo-box">
      <image src="@/static/images/jobApplicant/logo.svg" mode="scaleToFill" />
    </view>
    <view class="login-btn-box">
      <view class="login-btn wechat"
        ><image src="@/static/images/jobApplicant/wechat.svg" mode="scaleToFill" />
        微信登录</view
      >
      <view class="login-btn password"
        ><image
          src="@/static/images/jobApplicant/password.svg"
          mode="scaleToFill"
        />账号密码登录</view
      >
      <view class="login-btn phone"
        ><image
          src="@/static/images/jobApplicant/phone.svg"
          mode="scaleToFill"
        />手机验证码登录</view
      >
      <view class="txt-desc">
        <view class="check-box" @click="isArgee">
          <image
            src="@/static/images/jobApplicant/check.svg"
            v-if="argee"
            mode="scaleToFill"
          />
          <image
            src="@/static/images/jobApplicant/border.svg"
            v-else
            mode="scaleToFill"
          />
        </view>
        已阅读并同意<text>《亿职赞用户协议》</text>
        和<text>《隐私协议》</text>，允许亿职赞统一管理本人账号信息
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      argee: false, //同意协议
    };
  },
  /**
   *
   */
  methods: {
    isArgee() {
      this.argee = !this.argee;
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  .logo-box {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 160rpx;
      height: 160rpx;
    }
  }
  .login-btn-box {
    flex-shrink: 0;
    padding: 0 32rpx;
    padding-bottom: 160rpx;
    box-sizing: border-box;
    .login-btn {
      padding: 20rpx;
      box-sizing: border-box;
      border-radius: 100rpx;
      color: rgba(255, 255, 255, 1);
      font-family: DM Sans;
      font-size: 32rpx;
      font-weight: 400;
      line-height: 44rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 16rpx;
      image {
        width: 28rpx;
        height: 28rpx;
        margin-right: 20rpx;
      }
    }
    .wechat {
      background: linear-gradient(
        90deg,
        rgba(13, 39, 247, 1),
        rgba(19, 193, 234, 1) 100%
      );
    }
    .password {
      background: rgba(1, 107, 246, 1);
    }
    .phone {
      background: #99c4fa;
    }
  }
  .txt-desc {
    font-family: DM Sans;
    font-size: 16rpx;
    font-weight: 400;
    letter-spacing: 0%;
    text-align: left;
    display: flex;
    align-items: center;
    color: #605d67;
    text {
      color: #016bf6;
    }
    .check-box {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 16rpx;
      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
}
</style>