login.vue

<template>
  <div class="login">
    <div class="login_div_">
      <!-- <div class="left_login_mc">
        <el-row style="font-size:15px;width:100%;" class="ml_l">
          <a href="http://193.5.103.166:8089/illimg/76.0.3809.87_chrome_installer_32.exe">谷歌浏览器下载</a>
        </el-row>
      </div> -->
        <div class="login-box">
          <div class="left-box">
            <div class="ploce-box"></div>
            <div class="content-box">
              <div>欢迎登录</div>
              <div class="plat-name">青岛社保管理系统</div>
            </div>
            <div class="version-box">
              <div>版权所有：青岛社保管理局</div>
              <div>版本：v-1.0.0.0</div>
            </div>
          </div>
          <div class="right-box">
            <div class="header">系统登录</div>
            <div class="login-input-box">
              <el-input
                placeholder="用户名"
                suffix-icon="el-icon-user"
                class="item-input"
                v-model="userName">
              </el-input>
            </div>
            <div class="login-input-box">
                 <el-input
                placeholder="密码"
                suffix-icon="el-icon-lock"
                class="item-input"
                type="passWord"
                v-model="passWord">
              </el-input>
            </div>
            <div class="login-button" @click="login">登录</div>
            <div class="login-about">技术支持：北京文安智能科技股份有限公司</div>
          </div>
        </div>
        <!-- <el-col :span="10" :offset="4" class="login-box">
          <el-col :span="24" class="login-header mt20">
            <div class="login-header-box pl10">
              <div class="pl25 header-box-title">系统登录</div>
            </div>
          </el-col>
          <el-row class="login-info">
            <el-col :span="20" :offset="2" class="box">
              <el-input
                :span="10"
                class="el_input_b"
                oninput="if(value.length>6)value=value.slice(0,6)"
                v-model="userName"
                placeholder="用户ID"
              ></el-input>
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="20" :offset="2" class="box">
              <el-input
                v-model="passWord"
                class="el_input_b"
                type="password"
                onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"
                @keyup.enter.native="login"
                placeholder="密码"
              ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20" :offset="2" class="box mt20">
              <el-button type="primary pull-right" class="login-btn" @click="login">登录</el-button>
            </el-col>
          </el-row>
        </el-col> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userName: "",
      passWord: ""
    };
  },
  methods: {
    login() {
      debugger;
      //--添加验证
      if (this.userName == "") {
        this.$message.error("请输入用户名");
        return;
      }

      if (this.userName != "admin" && this.userName.length != 6) {
        this.$message.error("请输入6位用户ID");
        return;
      }

      if (this.passWord == "") {
        this.$message.error("请输入密码在继续");
        return;
      }
      //--------\
      // this.$router.push("/layout");
      // this.$router.push("/show");
      var data = { username: this.userName, password: this.passWord };
      this.axios
        .post(this.API.auth.login, data)
        .then(response => {
          localStorage.setItem("atoken", response.data.atoken);
          localStorage.setItem("rtoken", response.data.rtoken);
          localStorage.setItem("user_id", response.data.user_unid);
          localStorage.setItem("username", this.userName);
          sessionStorage.removeItem("threemenu");
          sessionStorage.removeItem("menu");
          //----cyl 添加获取更加详细的用户信息---

          this.axios
            .get(this.API.auth.edituser(localStorage.getItem("user_id")))
            .then(response => {
              localStorage.setItem("namemc", response.data.name);
            });

          //---end

          this.$router.push("/show");

          // console.log(response.data)
          // localStorage.setItem("atoken",'dc62ae05-21be-43ad-9be2-d5f8a6bd0dac');
        })
        .catch(err => {
          let info = "用户名或密码错误！";
          if (err.message == "Network Error") info = "网络错误!";
          this.$message.error(info);
        });
    }
  }
};
</script>
<style lang="stylus">
.login {
  position relative
  height: 100%;
  background: url('../../assets/img/login.jpg');
  background-size: 100% 100%;
}

.login-box {
  position absolute
  top 0
  right 0
  left 0
  bottom 0
  margin auto
  height: 60vh;
  width: 54.8vw;
  overflow: hidden;
  color: #fff;
  border-radius: 5px;
  background-size 100% 100%
  .left-box{
    height: 60vh;
    width 43vw
    background: url('../../assets/img/loginbox.png') no-repeat;
    background-size 100% 100%
    .ploce-box{
      position absolute
      height 4vw
      width  4vw
      background: url('../../assets/img/police.png') no-repeat;
      background-size 100% 100%
      left 3vw
      top 3.2vh
    }
    .content-box{
      letter-spacing .3vw
      position absolute
      bottom 14vh
      left 8vw
      font-size 2.3rem
      text-align center
      .plat-name{
        margin-top 1vh
      }
    }
    .version-box{
      position absolute
      bottom 5vh
      left 8vw
      letter-spacing .2vw
      opacity .8
    }
  }
  .right-box{
    position absolute
    top 0
    right 3.5vw
    width 20.7vw
    height 60vh
    background #fff
    border-radius 2px
    .header{
      width 100%
      text-align center
      font-size 2.2rem
      letter-spacing .2vw
      color #0b76fb
      margin-top 6vh
    }
    .login-about{
      width 100%
      position absolute
      font-size 1rem
      color #0b76fb
      bottom 2vh
      text-align center
      opacity .8
    }
    .login-input-box{
      width 15.1vw
      margin 10vh auto 0

    }
    .login-input-box:nth-child(3){
      margin-top 4vh
    }
    .login-button{
      width 15.1vw
      margin 5vh auto
      background #0b76fb
      border-radius 20px
      text-align center
      height 4vh
      line-height 4vh
    }
  }
}

.login-info {
  margin-top: 40px;
}

.header-box-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  overflow: hidden;
}

.login-btn {
  width: 100px;
  height: 40px;
  border-radius: 5px;
}

.el_input_b .el-input__inner {
  background: #fff !important;
  color: #394389 !important;
}

.left_login_mc {
  float: left;
  width: 390px;
  height: 150px;
  margin-left: 62%;
  margin-top: 260px;
  background: #2E7CA2;
  opacity: 0.7;
}

.ml_l {
  margin-left: 88px;
}
</style>