assess-app/pages/login/index.vue

<template>
  <view class="page-box login-box">
      <view class="login-form">
        <view class="from-title">
          <view class="title-list">
            <view class="title-text dominant-text-color sys-size-28 text-center sys-weight-500" @click="setType(1)">验证码登录</view>
            <view class="title-text sys-size-28 text-center sys-weight-500" @click="setType(2)">密码登录</view>
          </view>
          <view class="title-bg one-background-color"></view>
        </view>

      </view>


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

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

    },
    methods: {
      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;
        }
        .title-bg::after {
          content: '';
          position: absolute;
          right: -50rpx;
          bottom: 0;
          width: 50rpx;
          height:50rpx;
          background-color: #fff;
          border-radius: 50rpx 50rpx  50rpx 0;
          clip-path:path('M 50,0 C 25,0 25,50 0,50 L 50,50 Z');
        }
        .title-list{
          display: flex;
          justify-content: space-between;
          z-index: 1;
          position: relative;
          .title-text{
            width: 50%;
            height: 102rpx;
            line-height: 102rpx;
          }
        }

      }
    }

  }
</style>