zz-admin/src/view/login/login.vue

<template>
  <div id="login">
    <div class="loginPopple">
      <div class="leftImgs">
        <img
          class="img1"
          src="@/assets/images/loginPage/kc@2x.png"
          alt=""
        /><img
          class="img2"
          src="@/assets/images/loginPage/qz@2x.png"
          alt=""
        /><img
          class="img3"
          src="@/assets/images/loginPage/ks@2x.png"
          alt=""
        /><img class="img4" src="@/assets/images/loginPage/bag@2x.png" alt="" />
      </div>
      <div class="poRightLogin">
        <div class="navImg">
          <img src="@/assets/images/loginPage/welcome@2x.png" alt="" />
        </div>
        <div class="userNameBox">
          <h4>用户名</h4>
          <input
            type="text"
            placeholder="输入用户名"
            v-model="loginData.username"
          />
        </div>
        <div class="passwordBox">
          <h4>密码</h4>
          <div class="passwordListB">
            <input
              :type="showPassword ? 'text' : 'password'"
              placeholder="输入密码"
              autocomplete="new-password"
              v-model="loginData.password"
            />
            <div class="iconImg" @click="showPassword = !showPassword">
              <img
                v-if="showPassword"
                src="@/assets/images/loginPage/pass.png"
                alt=""
              />
              <img v-else src="@/assets/images/loginPage/passno.png" alt="" />
            </div>
          </div>
        </div>
        <div class="codeBox">
          <input
            type="text"
            placeholder="输入验证码"
            v-model="loginData.code"
          />
          <div class="codeImg" @click="getUuid">
            <img :src="uuidBase64" alt="点击刷新" />
          </div>
        </div>
        <div class="toolList">
          <label class="checkBox"
            ><input type="checkbox" v-model="isRemember" />7天内免登录</label
          >
          <div class="forget">忘记密码</div>
        </div>
        <div class="loginbtnbox" @click="getApi">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import cookie from "@/utils/cookie.js";
export default {
  data() {
    return {
      showPassword: false, //密码是否可见
      isRemember: false, //是否选中7天内免登录
      uuidBase64: "", //验证码图片
      uuid: "", //验证码编码
      loginData: {
        //登入信息收集
        username: "",
        password: "",
        code: "",
      },
    };
  },
  created() {
    this.getUuid(); //初始化获取验证码方法
    var self = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        self.getApi();
      }
    };
    if (this.$route.query.TenantId) {
      sessionStorage.TenantId = this.$route.query.TenantId;
    } else {
      if (sessionStorage.TenantId) {
        sessionStorage.removeItem("TenantId");
      }
    }
  },
  methods: {
    //获取验证码图片
    getUuid() {
      this.$api
        .captchaImage()
        .then((res) => {
          this.uuidBase64 = "data:image/png;base64," + res.data.img;
          this.uuid = res.data.uuid;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    //登录
    getApi() {
      if (!this.loginData.username) {
        this.$message.warning("请输入用户名");
        return;
      }
      if (!this.loginData.password) {
        this.$message.warning("请输入密码");
        return;
      }
      var data = {
        code: this.loginData.code.trim(),
        username: this.loginData.username.trim(),
        password: this.loginData.password.trim(),
        uuid: this.uuid,
      };
      this.$api
        .login(data)
        .then((res) => {
          if (res.code === 200) {
            if (this.isRemember) {
              cookie.setCookie("token", res.token, 7);
            } else {
              cookie.setCookie("token", res.token, 1);
            }
            this.initRoutes();
          } else {
            this.getUuid();
            this.loginData.code = "";
          }
        })
        .catch((err) => {
          this.getUuid();
          this.$message.error(err);
          console.log(err);
        });
    },
    //重定向跳转
    initRoutes() {
      this.$router
        .replace({
          name: "home",
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
#login {
  width: 100%;
  background: url("../../assets/images/loginPage/bg@2x.png") no-repeat center;
  background-size: cover;
  min-height: 100vh;
  .loginPopple {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 1060px;
    height: 660px;
    background-color: #f9fdfe;
    // background: url("../../assets/images/loginPage/bg2@2x.png") no-repeat center;
    background-size: 1060px 660px;
    border-radius: 16px;
    box-shadow: 0px 30px 21px 9px rgba(71, 166, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    // font-family: Alibaba PuHuiTi;
    animation: showStatus 1s;
    .leftImgs {
      margin-left: 30px;
      flex: 1;
      height: 592px;
      // background: red;
      border-radius: 18px;
      padding: 20px;
      overflow: hidden;
      background: url("../../assets/images/loginPage/card@2x.png") no-repeat
        center;
      background-size: contain;
      position: relative;
      img {
        border-radius: 50%;
        box-shadow: 0px 10px 16px 4px rgba(71, 166, 255, 0.1);
      }
      .img1 {
        position: absolute;
        top: 404px;
        left: 28px;
        width: 89px;
        height: 89px;
        animation: img1s linear 3s infinite;
      }
      .img2 {
        position: absolute;
        top: 363px;
        left: 171px;
        width: 66px;
        height: 66px;
        animation: img2s linear 3s infinite;
      }
      .img3 {
        position: absolute;
        top: 449px;
        right: 175px;
        width: 65.4px;
        height: 65.4px;
        animation: img1s linear 3s infinite;
      }
      .img4 {
        position: absolute;
        top: 377px;
        right: 32px;
        width: 87px;
        height: 87px;
        animation: img2s linear 3s infinite;
      }
      @keyframes img1s {
        25%{
          transform: translateY(-20px);
        }
        50%{
          transform: translateY(0px);
        }
        75%{
          transform: translateY(20px);
        }
      }
      @keyframes img2s {
        25%{
          transform: translateY(20px);
        }
        50%{
          transform: translateY(0px);
        }
        75%{
          transform: translateY(-20px);
        }
      }
    }
    .poRightLogin {
      width: 530px;
      height: 592px;
      padding: 0px 71px;
      input {
        font-size: 16px;
      }
      .navImg {
        margin-top: 56px;
        width: 387px;
        height: 22px;
        margin-block: 56px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .userNameBox {
        margin-bottom: 21px;
        h4 {
          font-weight: 400;
          color: #737fa0;
        }
        input {
          height: 46px;
          line-height: 46px;
          border: none;
          background-color: transparent;
          outline: none;
          border-bottom: 2px solid #a9d0ef;
          width: 100%;
          font-weight: bold;
          color: #2f4379;
          letter-spacing: 1px;
          &::placeholder {
            color: #737fa0;
            font-weight: 400;
          }
        }
      }
      .passwordBox {
        margin-bottom: 29px;
        h4 {
          font-weight: 400;
          color: #737fa0;
        }
        .passwordListB {
          height: 46px;
          display: flex;
          align-items: center;
          border-bottom: 2px solid #a9d0ef;
          input {
            height: 100%;
            line-height: 100%;
            border: none;
            background-color: transparent;
            font-weight: bold;
            color: #2f4379;
            outline: none;
            flex: 1;
            padding-right: 15px;
            letter-spacing: 2px;

            &::placeholder {
              color: #737fa0;
              font-weight: 400;
            }
          }
          .iconImg {
            cursor: pointer;
            width: 18px;
            height: 18px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .codeBox {
        height: 56px;
        display: flex;
        align-items: center;
        border-bottom: 2px solid #a9d0ef;
        input {
          flex: 1;
          padding-right: 10px;
          border: none;
          background-color: transparent;
          outline: none;
          font-weight: bold;
          letter-spacing: 2px;
          color: #2f4379;
          &::placeholder {
            color: #737fa0;
            font-weight: 400;
          }
        }
        .codeImg {
          width: 100px;
          height: 45px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .toolList {
        margin: 24px 0px 49px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .forget {
          cursor: pointer;
          color: #737fa0;
          font-weight: 300;
        }
        .checkBox {
          display: flex;
          align-items: center;
          color: #2f4379;
          input {
            margin-right: 6px;
          }
        }
      }
      .loginbtnbox {
        cursor: pointer;
        margin: 0 auto;
        width: 280px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        border-radius: 8px;
        box-shadow: 0px 10px 16px 4px rgba(47, 67, 121, 0.1);
        background: #2f4379;
        color: #fff;
        transition: all 0.2s;
        &:hover {
          transform: scale(1.03);
        }
      }
    }
  }
}
@keyframes showStatus {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>