suyiScreen/src/views/login/login.vue

<template>
  <div class="loginMain">
    <div class="loginTop">
      <div class="loginTitle">重要用户配电站房数字化管理系统登录</div>
    </div>
    <div class="loginContent">
      <div class="loginIcon">
        <img src="@/assets/newbanImg/beijingyuan.png" style="width: 100%; height: 100%" />
      </div>
      <div class="loginForm">
        <div class="welcome">欢迎登录</div>
        <el-form :model="loginForm" :rules="rules" status-icon label-position="left" label-width="70px" class="form"
          ref="loginForm">
          <el-form-item label="用户名" prop="userName">
            <el-input type="text" v-model="loginForm.account"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm()">登录</el-button>
            <el-button @click="empty()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { doLogin } from '../../api/api'
import JSEncrypt from 'jsencrypt'
export default {
  name: "login",
  data() {
    return {
      loginForm: {
        account: "admin",
        password: "123",
      },
      rules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 8, message: "长度请在1到8个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, max: 8, message: "长度请在1到8个字符", trigger: "blur" },
        ],
      },
    };
  },
  mounted() { },
  methods: {
    //登录事件
    submitForm() {
      const jsRsa = new JSEncrypt()
      // console.log(jsRsa);
      // 公钥
      const publicKeyStr = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKxh6IUqXHZWWUt2DgbU9/52E5eIoi1Cd3jRPSNyL5NeDOq9JmALTPPZKB2LL2XmZY+rJ9GrXbJsLuocQKcIv6ECAwEAAQ=='
      // 设置公钥
      jsRsa.setPublicKey(publicKeyStr)
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 通过jsRsa加密
          let accountA = jsRsa.encrypt(this.loginForm.account)
          let passwordA = jsRsa.encrypt(this.loginForm.password)
          let userMsg = {
            account:accountA,
            password:passwordA
          }
          // console.log(this.loginForm, '密码');
          doLogin(userMsg).then(res => {

            if (res.data.code == 200) {
              // 存储token
              localStorage.setItem('tokenStr', res.data.result.token)
              // 存储用户名
              localStorage.setItem('account', res.data.result.account)
              localStorage.setItem('roleId', res.data.result.roleId)

            }
          })
          this.$message.success("登录成功");
          this.$router.push("/index");
        } else {
          this.$message.error("请输入正确的账号和密码");
          console.log("error submit!!");
          return false;
        }
      });
    },
    //清空
    empty() {
      this.$message.success("用户名已重置");
      this.loginForm.userName = ''
      this.loginForm.password = ''
    }
  },
};
</script>

<style lang="scss" scoped>
.loginMain {
  width: 1920px;
  height: 1080px;
  background: url("../../assets/newbanImg/mapBeijing.png") no-repeat;
  background-size: 100% 100%;

  .loginTop {
    width: 100%;
    height: 8%;
    display: flex;
    align-items: center;

    .loginTitle {
      color: #fff;
      font-size: 45px;
    }
  }

  .loginContent {
    width: 100%;
    height: calc(100% - 8%);
    position: relative;

    .loginIcon {
      width: 1091px;
      height: 934px;
      position: absolute;
      //   top: 9%;
      left: 22%;
      -webkit-animation: scaleout 1.5s infinite ease-in-out;
      animation: scaleout 1.5s infinite ease-in-out;
    }

    @-webkit-keyframes scaleout {
      0% {
        -webkit-transform: scale(1);
      }

      100% {
        -webkit-transform: scale(1.02);
        opacity: 0;
      }
    }

    .loginForm {
      position: absolute;
      width: 25%;
      height: 35%;
      left: 39%;
      top: 20%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 7px;
      background: url("../../assets/borad-bg.png") no-repeat;
      background-size: 100% 100%;

      .welcome {
        color: #fff;
        font-size: 20px;
        height: 8%;
      }

      .form {
        width: 100%;
        height: calc(100% - 8%);
        box-sizing: border-box;
        padding: 10px;
        padding-top: 40px;

        .el-form-item {
          margin-bottom: 50px;
        }

        ::v-deep .el-form-item__content {
          margin-left: 0 !important;
          line-height: 40px;
          position: relative;
          font-size: 14px;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-evenly;
        }
      }
    }
  }
}
</style>