kechengfuzhu/kcui/src/view/Login.vue

<template>
  <div style="width: 100%;height: 100%;background-color: #00173a;">
    <img style="width: 100%;height: 100%;position: absolute;z-index:99;" src="../assets/img/loginBg.png">
    <headInfo style="position: absolute;z-index: 100"></headInfo>
    <div class="loginBox">
      <div style="position: absolute;top:10%;color: white;font-size: 1.2vw;left: 38%">用户登陆</div>
      <div class="password-input-container">
        <img src="../assets/img/userInfo.png" style="position: absolute;z-index: 99;width: 100%;height: 100%;">
        <input
            type="text"
            :placeholder="placeholder1"
            v-model="userName"
        />
      </div>
      <div class="password-input-container1">
        <img src="../assets/img/password.png" style="position: absolute;z-index: 99;width: 100%;height: 100%;">
        <input
            type="text"
            :placeholder="placeholder2"
            v-model="password"
        />
      </div>
      <div class="checkBox">
        <el-checkbox style="color: white;position: absolute;right: 0;"  v-model="checked">记住密码</el-checkbox>
      </div>
      <div class="loginButton" @click="login">
        <div style="height: 100%;width: 100%;position: absolute;line-height: 2.4vw;text-align: center;font-size: 1vw;color: white;letter-spacing: 3px;">登录</div>
        <img src="../assets/img/loginButton.png" style="width: 100%;height: 100%;">
      </div>
      <div class="regist">
        <div style="float: left;margin-left: 25%;">没有账号，请进行</div><div style="color: rgba(90,208,255,0.9);float: left;" @click="openRest">注册</div>
      </div>

        <img src="../assets/img/loginBox.png" style="width: 100%;height: 100%;">
    </div>
    <el-dialog title="注册信息" :visible.sync="regist">
      <el-form :model="form">
        <el-form-item label="用户账号" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户类型" :label-width="formLabelWidth">
          <el-select v-model="form.userType" placeholder="请选择用户类型">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="学生" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级信息" :label-width="formLabelWidth">
          <el-input v-model="form.classInfo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="regist = false">取 消</el-button>
        <el-button type="primary" @click="goRegist">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>

import headInfo from "@/components/Head.vue";
import {doLogin, registered} from "@/api/login";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  components: {headInfo},
  data() {
    return{
      placeholder1:"请输入账号",
      userName:"",
      placeholder2:"请输入密码",
      password:"",

      checked:false,

      //这是注册的信息
      regist:false,
      form: {
        name: '',
        password:'',
        userType: 0,
        classInfo: '',

      },
      formLabelWidth: '120px'
    }
  },
  methods:{
    login(){
      var data = {
        userName:this.userName,
        password:this.password,
      }
      doLogin(data).then((res)=>{
        if(res.code==200){
          if(res.info.userType==1){
            localStorage.setItem("type",res.info.userType)
            localStorage.setItem("name",res.info.userName)
          }
          this.$router.push('/Mulu')
        }else {
          console.log("失败")
        }
      })
    },
    Check() {
      this.checked = true;
    },
    openRest(){
      this.regist = true;
    },
    goRegist(){
      var data = {
        userName:this.form.name,
        password:this.form.password,
        userType:this.form.userType,
        classInfo:this.form.classInfo

      }
      registered(data).then((res)=>{

        console.log(res);
      })
    }
  },
  mounted() {
    this.login();

  }
}
</script>
<style scoped>
.loginBox{
  width: 20%;
  height: 40%;
  //background-color: #42b983;
  position: absolute;
  z-index: 100;
  top: 30%;
  left: 10%;
}
.password-input-container {
  width: 80%;
  height: 14%;
  //background: #b94289;
  position: absolute;
  top: 25%;
  left: 10%;
}
.password-input-container1{
  width: 80%;
  height: 14%;
  //background: #b94289;
  position: absolute;
  top: 45%;
  left: 10%;
}

input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  color: white; /* 文字颜色 */
  background-color: transparent;
  padding-left:3%;
  position: absolute;
  z-index: 2000;

}
input::placeholder {
  color: white;
  opacity: 1; /* Firefox 默认将 placeholder 的透明度设置为 0.54 */

}
.checkBox{
  width: 80%;
  height: 5%;
  position: absolute;
  top: 61%;
  left: 10%;
}
/* 自定义样式 */
.el-checkbox__inner {
  background-color: transparent !important;
  border-color: transparent !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: transparent !important;
  border-color: transparent !important;
}

.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: transparent !important;
  border-color: transparent !important;
}


/*登录按钮*/
.loginButton{
  width: 80%;
  height: 12%;
  position: absolute;
  bottom: 15%;
  left: 10%;

}
.regist{
  width: 80%;
  height: 12%;
  position: absolute;
  bottom: 2%;
  left: 10%;
  color: #Ffffff;
  text-align: center;
}

</style>