assess-app/pages/login/index.vue

<template>
  <view class="page-box login-box">
      <view class="login-form sys-radius-50">
        <view class="from-title">
          <view class="title-list">
            <view class="title-text  sys-size-28 text-center sys-weight-600" :class="{'default-text':type===1}" @click="setType(1)">验证码登录</view>
            <view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===2}" @click="setType(2)">密码登录</view>
          </view>
          <view class="title-bg one-background-color" :class="{'title-bg-two':type===2}">
            <view class="bg-icon dominant-background-color "></view>
          </view>
        </view>
        <view class="from-box one-background-color">
          <view class="from-animation" v-if="type===1">
            <view class="input-item  sys-from-background-color sys-radius-30 ">
              <input type="number" class="login-input" placeholder="请输入手机号" maxlength="11"></input>
            </view>
            <view class="input-item   sys-from-background-color sys-radius-30">
              <input type="number" class="login-input" placeholder="请输入验证码"></input>
            </view>
          </view>
          <view class="from-animation" v-else>
            <view class="input-item  sys-from-background-color sys-radius-30 ">
              <input type="number" class="login-input" placeholder="请输入手机号" maxlength="11"></input>
            </view>
            <view class="input-item   sys-from-background-color sys-radius-30">
              <input type="password" class="login-input" placeholder="请输入密码"></input>
            </view>
          </view>

          <view class="input-agreement" @click="setIsConsent">
            <image class="agreement-agree" v-if="isConsent" src="/static/img/login/Checked2@3x.png" mode="aspectFill"></image>
            <image class="agreement-agree" v-else src="/static/img/login/Checked1@3x.png" mode="aspectFill"></image>
            <view class="agreement-text three-text-color sys-size-24">已阅读并同意</view>
            <view class="agreement-text dominant-text-color sys-size-24">《隐私政策》</view>
          </view>

          <view
              class="input-but dominant-background-color one-text-color sys-size-30 sys-radius-100 sys-weight-600"
              :class="{'sys-selected-but':isLogin,'sys-unselected-but':!isLogin}"
          >登陆</view>
        </view>
      </view>


  </view>
</template>
<script>
  export default {
    components: {

    },
    data() {
      return {
        type:1,
        password:'',
        code:'',
        isConsent:false,
        isLogin:false
      }
    },
    mounted() {

    },
    methods: {
      setIsConsent(){
        this.isConsent=!this.isConsent
      },
      setType(type){
        if(type!==this.type){
          this.type=type
        }
      },
      login() {
        uni.redirectTo({
          url: '/pages/index/index'
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  @import "/static/css/login.css";
  .page-box{

    padding-top: 370rpx;
    .login-form{
      margin: 0 30rpx;
      height: 630rpx;
      border-radius: 50rpx;

      .from-title{
        background-color: rgba(255,255,255,0.5);
        border-radius: 50rpx 50rpx 0 0;
        height: 110rpx;
        position: relative;

        .title-bg{
          position: absolute;
          border-radius: 50rpx 50rpx 0 0;
          top: 0;
          left: 0;
          height:110rpx;
          width: 50%;
          transition: .5s ease;
          z-index: 0;
          .bg-icon{
            margin: 86rpx auto 0 auto;
            width: 36rpx;
            height: 6rpx;
            border-radius: 99rpx;
          }
        }
        .title-bg-two{
          left: 50%;
          transition: .5s ease;
        }
        //.title-bg::after {
        //  content: '';
        //  position: absolute;
        //  right: -50rpx;
        //  bottom: 0;
        //  width: 50rpx;
        //  height:50rpx;
        //  background-color: #fff;
        //  border-radius: 50rpx 50rpx  50rpx 0;
        //}
        .title-list{
          display: flex;
          justify-content: space-between;
          z-index: 1;
          position: relative;
          .title-text{
            width: 50%;
            height: 102rpx;
            line-height: 102rpx;
            color: #333333;
          }
          .default-text{
            color: #10B261;
          }
        }

      }
      .from-box{
        height:520rpx;
        box-shadow: 0rpx 4rpx 36rpx 0rpx rgba(196,196,196,0.25);
        border-radius: 0 0 50rpx 50rpx;
        padding: 50rpx 45rpx;
        .input-item{
          height: 96rpx;
          padding: 28rpx 40rpx;
        }
        .input-item:last-child{
          margin-top: 30rpx;
        }
        .input-agreement{
          margin-top: 25rpx;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .agreement-agree{
            width: 32rpx;
            height: 32rpx;
            transition: .5s ease;
          }
          .agreement-text{
            margin-left: 18rpx;
          }
        }
        .input-but{
          margin-top: 40rpx;
          width: 100%;
          height: 96rpx;
          line-height: 96rpx;
          text-align: center;
        }
      }
    }

  }
</style>