<template>
  <div class="login">
    <div class="loginCon">
      <div class="title">
        <img class="logo" src="../assets/logo.png" alt="" />
        <p>巴音孟克火眼识才系统</p>
      </div>
      <div class="input">
        <div>
          <label for="name"><img src="../assets/name.png" alt="" /></label>
          <input type="text" v-model="username" id="name" placeholder="请输入用户名" />
        </div>
        <div>
          <label for="pwd"><img src="../assets/pwd.png" alt="" /></label>
          <input id="pwd" type="password" v-model="password" placeholder="请输入密码" />
        </div>
      </div>
      <button class="btn" @click="login()" type="button">登录</button>
    </div>
    <div class="footer">
      <p>版权所有©2021巴音孟克投资集团有限公司 保留所有权利</p>
      <p>粤ICP备12345689号-8</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    msg: String,
  },
  data() {
    return {
      username:"",
      password:""
    };
  },

  methods: {
    login() {
      let param = new URLSearchParams();
      param.append("account", this.username);
      param.append("password", this.password);
      let that = this;
      this.axios
        .post("/hysc/auth/token", param)
        .then(function (response) {
          if (response.data.code == 200) {
            localStorage.token="bearer "+response.data.data.accessToken
             localStorage.userData= JSON.stringify(response.data.data) 
            that.$router.push("/index");
          }else{
       that.$alert(response.data.msg,"登录失败", {
            confirmButtonText: "确定",
          });
          }
   
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>


<style scoped>
.login {
  background-image: url("../assets/logoBer.png");
  background-size: 100%;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginCon {
  width: 460px;
  height: 400px;
  background: linear-gradient(
    138deg,
    rgba(40, 132, 211, 0.7) 0%,
    rgba(13, 51, 138, 0.7) 100%,
    rgba(13, 51, 138, 0.7) 100%
  );
  border-radius: 6px;
  padding-top: 35px;
  text-align: center;
  box-sizing: border-box;
}
.loginCon .title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo {
  width: 55px;
  height: 47px;
}
.loginCon .title p {
  font-size: 22px;
  font-family: STYuanti-SC-Regular, STYuanti-SC;
  font-weight: 400;
  margin-left: 12px;
  color: #ffffff;
}
.input {
  margin-top: 58px;
  text-align: center;
}
.input input {
  width: 350px;
  height: 40px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0);
  padding-left: 51px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.input input::placeholder {
  font-size: 16px;
  font-family: STYuanti-SC-Regular, STYuanti-SC;
  font-weight: 400;
  color: #dddde8;
  letter-spacing: 2px;
}
.input > div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  position: relative;
}
.input div label {
  position: absolute;
  left: 66px;
}
.input div img {
  width: 100%;
}
.btn {
  width: 200px;
  height: 40px;
  margin: auto;
  background: #083c7e;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-family: STYuanti-SC-Regular, STYuanti-SC;
  font-weight: 400;
  color: #dddde8;
  cursor:pointer
}
.footer {
  width: 100%;
  height: 100px;
  background: rgba(0, 15, 35, 0.8);
  position: fixed;
  bottom: 0px;
  box-sizing: border-box;
  padding-top: 10px;
  left: 0px;
}
.footer p {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #d4d4d4;

  line-height: 24px;
  text-align: center;
}
</style>
