vpp/src/views/Login/Login.vue

<template>
    <div class="login">
        <div class="tab">
            <div style="width: 100%;text-align: center">
                <div class="tab-wrapper">
                    <img :class="flag1? 'active1':'active2'" alt=""
                         src="./img/img_2.png" style="display: inline-block;position: absolute;top:50px;">
                    <div :class="flag1? 'active':''" class="tab1" @click="handleChange">账号登录</div>
                    <img alt="" src="./img/split.png" style="display: inline-block;position: absolute;top:-12px;">
                    <div :class="flag2? 'active':''" class="tab2" @click="handleChange1">人脸识别</div>
                </div>
                <div v-if="flag1">
                    <div class="input-div">
                        <img alt="" class="phone-img" src="./img/phone.png">
                        <el-input v-model="input" class="phone" placeholder="请输入手机号/邮箱"></el-input>
                    </div>
                    <div class="input-div">
                        <img alt="" class="password-img" src="./img/password.png">
                        <el-input v-model="password" class="password" placeholder="请输入登录密码"
                                  show-password></el-input>
                    </div>
                    <div style="text-align: left">
                        <el-checkbox v-model="checked" class="rememberMe">记住密码</el-checkbox>
                    </div>
                </div>
                <div v-if="flag2">
                    <div class="code">
                        人脸扫描
                    </div>
                </div>
            </div>
            <div v-if="activeName === 'first'" class="button-div">
                <el-button type="primary" @click="loginSubmit">登录</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
            <a class="left" href="">下载浏览器</a>
            <a class="right" href="">立即注册</a>
        </div>

    </div>
</template>

<script>
import {Base64} from "js-base64";

export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },

    data() {
        return {
            activeName: 'first',
            input: '',
            password: '',
            checked: false,
            flag1: true,
            flag2: false,
            Base64: '',
        };
    },
    mounted() {
        let username = localStorage.getItem("input");
        if (username) {
            this.input = localStorage.getItem("input");
            this.password = Base64.decode(localStorage.getItem("password"));// base64解密
            this.checked = true;
        }
    },
    methods: {
        loginSubmit() {
            if (this.input !== 'admin') {
                this.$message.error("用户不存在")
            } else {
                if (this.password !== '123456') {
                    this.$message.error("密码错误")
                } else {
                    if (this.checked) {
                        let password = Base64.encode(this.password); // base64加密
                        localStorage.setItem("input", this.input);
                        localStorage.setItem("password", password);
                    } else {
                        localStorage.removeItem("input");
                        localStorage.removeItem("password");
                    }
                    this.$message.success("登录成功")
                    setTimeout(() => {
                        this.$router.push('/xndc');
                    }, 400);
                }
            }
        },
        cancel() {
            this.input = ''
            this.password = ''
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleChange() {
            this.flag1 = true
            this.flag2 = false
        },
        handleChange1() {
            this.flag1 = false
            this.flag2 = true
        }
    }
}
</script>

<style lang="less" scoped>
.login {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url("./img/login.png") no-repeat;
  background-size: 100% 100%;
}


/deep/ .el-tabs__nav {
  float: none;
}


/deep/ .el-tabs__active-bar {
  display: none;
}

/deep/ .el-tabs__item {

}

.tab-wrapper {
  width: 100%;
  height: 100%;
  text-align: center;

  .tab2 {
    margin-left: 33px;
  }

  .tab1 {
    margin-right: 33px;

  }

  .tab1, .tab2 {
    width: 100%;
    font-size: 24px !important;
    font-weight: 1000;
    height: 100%;
    color: #c4c4c4;
    display: inline;


    &:hover {
      cursor: pointer
    }
  }

  .active {
    color: white;
  }

  .active1 {
    left: 28%;
  }

  .active2 {
    left: 62%;
  }

  .line {
    width: 2px;
    height: 20px;
    background-color: #000;
  }
}


.tab {
  width: 27%;
  height: 60%;
  position: absolute;
  top: 26%;
  left: 12%;


  .phone-img {
    position: absolute;
    width: 22px;
    height: 28px;
    top: 18%;
  }

  .password-img {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 40%;
  }


}

.button-div {
  text-align: left;
}


.code {
  width: 100px;
  height: 100px;
  background-color: #fff;
}

.left, .right {
  position: absolute;
  color: #fff;
  bottom: 10%;
  font-size: 20px;
  color: rgb(0, 255, 231);
}

.left {
  left: -10px;
}

.right {
  right: -10px;
}


/deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-bottom: 2px solid #fff;
  border-radius: 0;
  height: 100%;
  padding-bottom: 4%;
  margin-top: 15%;
  padding-left: 11% !important;
  font-size: 19px;
  font-weight: 1000;
  color: #fff;
}

/deep/ .el-tabs__content {
  text-align: left;
}

/deep/ .el-checkbox {
  margin-top: 5%;
  font-size: 20px;
}

/deep/ .el-checkbox__label {
  font-size: 20px;
  font-weight: 1000;
  color: white;
}

/deep/ .el-checkbox__inner {
  width: 25px;
  height: 25px;
  font-size: 20px;
  border-radius: 5px;
  background-image: url("./img/img2.png")
}

/deep/ .el-input__clear {
  height: 160%;
  font-size: 20px;
}

/deep/ .el-icon-view:before {
  content: "\e6ce";
  font-size: 25px;
}

/deep/ .el-button {
  height: 32%;
  width: 32%;
  font-weight: bold;
  font-size: 23px;
  margin-top: 8%;
}

/deep/ .el-button--default {
  margin-left: 15% !important;
  border: 0px solid rgb(23, 73, 146);
  background: url("./img/img_1.png") no-repeat;
  background-size: 100% 100%;
}

/deep/ .el-button--primary {
  margin-left: 10%;
  border: 0;
  background: url("./img/img.png") no-repeat;
  background-size: 100% 100%;
}

/deep/ .el-checkbox__inner::after {
  box-sizing: content-box;
  content: "";
  border: 1px solid #FFF;
  border-left: 0;
  border-top: 0;
  height: 10px;
  left: 10px;
  position: absolute;
  top: 5px;
  transform: rotate(45deg) scaleY(0);
  width: 4px;
  transition: transform .15s ease-in .05s;
  transform-origin: center;
}
</style>