<template>
  <div class="user">
    <div class="user-login">
      <div class="login-type flex">
        <div @click="change" :class='[type==0?"active":""]'>密码登录</div>
        <div @click="change" :class='[type==1?"active":""]' style="color:#000000">手机验证码登录</div>
      </div>
      <div class="el-form">
        <!-- 密码登录 -->
        <el-form ref="param" :model="param" :rules="rules"  class="ms-content" v-if="type==0">
          <el-form-item prop="phone" style="width:3rem;height: 0.45rem;">
            <el-input v-model="param.phone" placeholder="请输入手机号或邮箱" key="param.phone">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
             <el-input v-model="param.password" placeholder="请输入密码" key="param.password">
            </el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button type="primary" @click="submitForm()" style="width: 100%;">登录</el-button>
          </div>
        </el-form>

        <!-- 手机验证码验证 -->
        <el-form ref="phone" :model="phone" :rules="rules"  class="ms-content" v-if="type==1">
          <el-form-item  prop="phone" class="item">
            <el-input v-model="phone.phone" placeholder="请输入手机号" maxlength="30"></el-input>
          </el-form-item>
          <div class="getphonecode">
            <el-form-item  prop="phonecode" class="item">
              <el-input v-model="phone.phonecode" placeholder="请输入短信验证码" style="width:1.8rem" maxlength="30"></el-input>
            </el-form-item>
            <div class="phonecode">获取短信验证码</div>
          </div>
          <div class="login-btn">
            <el-button type="primary" @click="submitForm()" style="width: 100%;">登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  // import axios from 'axios';

  export default {
    data: function() {
      return {
        type: "0",
        yzshow: true,
        param: {
          phone: "",
          password: ""
        },
        ca: {
          type: ""
        },
        phone:{
          phone:"",
          phonecode:""
        },
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          phonecode: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }]
        },
      };
    },
    created() {

    },
    methods: {
      change() {
        let type = this.type;
        if (type == '0') {
          this.type = 1
        } else if (type == '1') {
          this.type = 0
        }
      },
      submitForm(){

      }
    }
  };
</script>

<style scoped>

  .getphonecode {
    position: relative;
  }

  .getphonecode>.phonecode {
    font-size: .14rem;
    font-weight: 400;
    color: rgba(51, 136, 255, 1);
    position: absolute;
    top: 0.13rem;
    right: 0rem;
  }

  .code-login {
    font-size: .14rem;
    color: rgba(4, 134, 254, 1);
    text-align: center;
    margin-top: 0.3rem;
  }

  .login-font {
    margin-top: 0.14rem;
  }

  .user {
    width: 100%;
    height: 6rem;
    background: rgba(216, 216, 216, 1);
    position: relative;
  }

  .user-login {
    width: 3.80rem;
    height:3.5rem;
    background: rgba(255, 255, 255, 1);
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
  }

  .login-type {
    width: 100%;
    height: .77rem;
    border-bottom: 1px solid rgba(216,216,216,1);
  }

  .login-type>div {
    height: 0.77rem;
    width: 1.9rem;
    text-align: center;
    line-height: 0.77rem;
    color: rgba(4, 134, 254, 1);
    font-size: .2rem;
  }
  .login-type>.active {
     border-bottom: 2px solid rgba(4,134,254,1);
  }

  .el-form {
    padding: 0.2rem
  }
</style>
