<template>
  <div class="backGround">
    <div class="projectName">{{$store.state.projectName}}</div>
    <div class="loginBody">
      <div class="loginTitle">登录窗口</div>
      <div class="loginText">欢迎登录后台系统</div>
      <div class="loginInoputs">
        <div class="userInpBody">
          <div class="userIcon"><img src="../imgs/yonghuming.png"></div>
          <input type="text" id="userInp" placeholder="输入你的用户名" v-model="userName">
        </div>
        <div class="passWordInpBody">
          <div class="passWordIcon"><img src="../imgs/mima.png"></div>
          <input type="password" id="passWordInp" placeholder="输入你的密码" v-model="password">
        </div>
        <button class="loginBtn" @click="LoginInitiation">安全登录</button>
      </div>
    </div>
  </div>
</template>
<script>
import { httpGet } from "@/common/httpBean.js"
import login from "@/axios/api.js"
export default {
  data() {
    return {
      userName:"",
      password:"",
    }
  },
  methods:{
    LoginInitiation(){
      if(this.userName == "" || this.password == ""){
          alert("请输入正确的用户名或密码!")
      }else{
        // httpGet(login,{name:123,id:123}).then( res => {
        //   console.log(res);
        //   //localStorage.getItem()
        // })
        this.$router.push({path: 'homepage',query:{ index:this.userName}});
      }
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.backGround {
  padding-top: 100px;
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  background-image: url("../imgs/bg.png");
}
.projectName{
  text-align: center;
  font-size: 70px;
  font-weight: 600;
  background-image:-webkit-linear-gradient(bottom,rgb(36,162,254),rgb(255,255,255)); 
  background-clip:text; 
  -webkit-text-fill-color:transparent; 
  letter-spacing: 3px;
}
.loginBody{
  position: relative;
  padding-top: 73px;
  box-sizing: border-box;
  margin: 0 auto;
  width: 60%;
  height: 85%;
  background-image: url("../imgs/kuang.png");
  background-size: 100% 100%;
}
.loginTitle{
  margin-left: 50px;
  text-align: center;
  font-size: 30px;
  color:rgb(47,213,255);
  letter-spacing: 6px;
}
.loginText{
  margin-top: 30px;
  margin-left: 50px;
  text-align: center;
  font-size: 35px;
  color:rgb(151,227,244);
  letter-spacing: 6px;
  margin-bottom: 30px;
}
.loginInoputs{
  position: absolute;
  right: 120px;
  width: 400px;
  height: 300px;
}
.userInpBody{
  display: flex;
  padding: 2px;
  border: 1px solid rgb(18,70,113);
  margin-bottom: 20px;
}
.userIcon{
  padding: 15px;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  background-color: rgb(18,70,113);
}
#userInp{
  margin-left: 10px;
  width: 80%;
  background: none;
	outline: none;
	border: none;
  font-size: 20px;
  color: rgb(47,213,255);
  letter-spacing: 3px;
}
::-webkit-input-placeholder { /* WebKit browsers */
  color:rgb(47,213,255);
}
.passWordInpBody{
  display: flex;
  padding: 2px;
  border: 1px solid rgb(18,70,113);
  margin-bottom: 50px;
}
.passWordIcon{
  padding: 15px;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  background-color: rgb(18,70,113);
}
#passWordInp{
  margin-left: 10px;
  width: 80%;
  background: none;
	outline: none;
	border: none;
  font-size: 20px;
  color: rgb(47,213,255);
  letter-spacing: 3px;
}
.loginBtn{
  width: 100%;
  height: 60px;
  font-size: 22px;
  background-color:rgb(24,180,255);
  border: 0px;
  color: white;
  letter-spacing: 10px;
  cursor: pointer;
}
</style>