flashPoint/src/pages/Login copy.vue

<template>
  <div class="loginbox">
    <!-- <div class="left_card">
      <img style="height:100%;width:100%" src="../../static/icon/登录配图.png" alt="">
    </div> -->
    <form>
      <div class="contain">
        <div style="display: flex; flex-direction: column">
          <span class="title">用户名</span>
          
          <el-input
            class="numkeyboard"
            size="medium"
            autocomplete=“off”
            v-model="username"
            type="text"
            placeholder="请输入用户名"
          ></el-input>
        </div>
        <div style="display: flex; flex-direction: column; margin-top: 10px">
          <span class="title">密码</span>
          <el-input         
            class="numkeyboard no-autofill-pwd"
            size="medium"
            auto-complete="new-password"
            v-model="password"
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </div>
        <el-row>
          <button @click="Login" class="Btlogin">登录</button>
        </el-row>
      </div>
    </form>
    <div class="footer">
        COPYRIGHT © 2022 杭州研一智控科技有限公司 版权所有
      </div>
  </div>
</template>

<script>
import { userLogin } from "@/api/api";

export default {
  name: "Login",
  data() {
    return {
      username:"请输入",
      password:"",
    };
  },
   mounted(){
    this.username=undefined
     console.log(this.username,'登录',this.password)
   },
  methods: {
    go(res) {
      switch (res) {
        case "home":
          this.$router.push("/home");
          break;
      }
    },
    Login() {
      console.log(this.username,'登录1',this.password)
      var that = this;
      if (that.username == "" || that.password == "") {
        that.$message({
          message: "请填写账号，密码",
          type: "warning",
        });
      } else {
        const loading = this.$loading({
          lock: true,
          text: "登陆中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        userLogin({ user_name: this.username, password: this.password })
          .then((response) => {
            console.log(response.data);
            let data = response.data;
            if (data.status == 1) {
              that.$message.error(data.message);
            } else {
              if (data.data.is_enabled == 1) {
                sessionStorage.LoginUser = JSON.stringify(data.data);
                this.$emit("send_user", data.data);
                that.go("home");
              } else {
                that.$message.error("账户禁用");
              }
            }
            loading.close();
          })
          .catch((error) => {
            loading.close();
            that.$message.error(error.message);
          });
      }
    },
  },
};
</script>
<style scoped lang="less">

.no-autofill-pwd {
  /deep/  .el-input__inner {
    -webkit-text-security:disc!important;
  }
}
.loginbox {
  width: 1024px;
  height: 658px;
  box-shadow: 24px 24px 24px 1px rgba(14, 66, 210, 0.08);
  border-radius: 8px 8px 8px 8px;
  padding-top:128px;
  .contain {
    width:480px;
    margin:0 auto;
    // margin:128px auto 0;
    text-align: left;
    .title{
      font-size:28px;
      margin-bottom:15px;
      color:#666666;
    }
    .numkeyboard{
      width:480px;
      .el-input__inner{
        height:80px !important;
      }
      
    }
    .Btlogin{
      width:480px;
      height: 100px;
      border:0;
      background: linear-gradient(180deg, #FF7B83 0%, #850006 100%);
      box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.4);
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      font-size: 40px;
      color: #FFFFFF;
      margin-top:50px;
    }
  }
  .footer{
    margin:62px auto 0;
    width: 630px;
    height: 31px;
    font-size: 24px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #C3C3C3;
    line-height: 36px;
  }
}

</style>
<style>
.loginbox .el-input--medium .el-input__inner {
  width: 480px;
  height: 80px;
  background: #FFFFFF;
  box-shadow: inset 0px 3px 6px 1px rgba(0,0,0,0.16);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #DCDCDC;
  font-size: 32px;
  font-weight: 400;
  color: #3A3A3A;
}
</style>