interest-purchase/src/pageSubs/other/login.vue

<!--
 * @Descripttion: 登录
 * @version: 1.0.0
 * @Author: dream
 * @Date: 2021-03-26 13:47:30
 * @LastEditors: dream
 * @LastEditTime: 2021-03-26 18:42:59
-->
<template>
	<view class="login-main">
    <image class="logo-img" src="~@/static/common/icon_logo.png" mode="aspectFit" />
    <view class="form">
      <view class="u-flex u-p-t-32 u-p-b-32 u-border-bottom">
        <view class="u-m-r-32 u-font-28 u-line-40 bold">手机号</view>
        <input class="form-input u-line-40" placeholder="请输入手机号" />
      </view>
      <view class="u-flex u-p-t-32 u-p-b-32 u-border-bottom">
        <view class="u-m-r-32 u-font-28 u-line-40 bold">验证码</view>
        <input class="form-input u-line-40" placeholder="请输入手机验证码" />
        <u-verification-code
          ref="loginCode"
          :seconds="60"
          unique-key="login-code"
          @change="changeCode"
        ></u-verification-code>
        <u-button class="send-code-btn u-flex-1" @click="sendCode">{{tips}}</u-button>
      </view>
    </view>
    <button class="u-m-t-56 btn login-btn">登录</button>
    <button class="u-m-t-24 btn wx-login-btn">微信一键登录</button>
    <view class="u-m-t-12">
      <u-checkbox v-model="checked" size="28" shape="circle">
        <text class="u-font-24">阅读并同意以下协议</text>
        <text class="u-font-24 primary-color">《用户协议》</text>
        <text class="u-font-24 primary-color">《数据信息授权书》</text>
      </u-checkbox>
    </view>
  </view>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      tips: '',
      checked: false
    }
  },
  onLoad () {

  },
  methods: {
    changeCode (text) {
      this.tips = text
    },
    sendCode () {
      this.$refs.loginCode.start()
    }
  }
}
</script>

<style lang="scss" scoped>
.login-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20%;
  height: 100%;
  background-color: $iph-standby-bg;
  .logo-img {
    width: 132px;
    height: 132px;
  }
  .form {
    box-sizing: border-box;
    margin-top: 112px;
    padding: 0 32px;
    width: 100%;
    .form-input {
      width: 390px;
      height: 44px !important;
      min-height: 44px !important;
    }
    .send-code-btn {
      /deep/ .u-btn {
        padding: 0;
        height: 40px;
        line-height: 40px !important;
        color: $u-type-primary;
        font-size: 28px;
        font-weight: 500;
        &::after {
          border-left: 2px solid $iph-border-base;
          border-top: 0;
          border-right: 0;
          border-bottom: 0;
          border-radius: 0;
        }
      }
    }
  }
  .btn {
    width: 686px;
    height: 88px;
    line-height: 88px;
    font-size: 32px;
    font-weight: 500;
  }
  .login-btn {
    color: $iph-standby-text;
    background-color: $u-type-primary;
    border-radius: 8px;
  }
  .wx-login-btn {
    color: $u-type-primary;
    background-color: $iph-standby-bg;
    border-radius: 8px;
    &::after {
      border-radius: 16px;
      border-color: $u-type-primary;
    }
  }
}
</style>