登陆页面背景图片

src/views/login.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="login">
+    <img :src="loginBg" alt="" srcset="" class="login-bg" />
     <el-form
       ref="loginForm"
       :model="loginForm"
@@ -93,12 +94,19 @@
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
+import intervalUpdate from "@/mixins/ems/intervalUpdate";
 
 export default {
   name: "Login",
+  mixins: [intervalUpdate],
+  computed: {
+    loginBg() {
+      return require(`./../assets/images/ems/loginBg/${this.bgNum}.png`);
+    },
+  },
   data() {
     return {
-      title: process.env.VUE_APP_TITLE,
+      bgNum: 1,
       codeUrl: "",
       loginForm: {
         username: "admin",
@@ -136,7 +144,14 @@ export default {
     this.getCode();
     this.getCookie();
   },
+  mounted() {
+    this.updateInterval(this.updateBgNum, 5000);
+  },
   methods: {
+    updateBgNum() {
+      if (this.bgNum >= 4) this.bgNum = 0;
+      this.bgNum += 1;
+    },
     getCode() {
       getCodeImg().then((res) => {
         this.captchaEnabled =
@@ -200,8 +215,15 @@ export default {
   justify-content: left;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/ems/login-background.png");
-  background-size: cover;
+}
+.login-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 .login-logo {
   display: block;
@@ -209,18 +231,13 @@ export default {
   height: auto;
   margin: 0 auto;
 }
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
-}
 
 .login-form {
   border-radius: 6px;
   background: #ffffff;
   width: 400px;
   padding: 0 25px 5px 25px;
-  z-index: 1;
+  z-index: 2;
   .el-input {
     height: 38px;
     input {