优化登录页背景放大缩小

src/views/components/header/index.vue

@@ -120,7 +120,12 @@ export default {
       });
     },
     handlePage(flag) {
-      this.$router.push({ path: '/login', query: { status: flag } });
+      // this.$router.push({ path: '/login', query: { status: flag } });
+      let routerJump = this.$router.resolve({
+        path: '/login',
+        query: { status: flag }
+      });
+      window.open(routerJump.href, '_blank');
     },
     handlePath(path) {
       this.path = path;

src/views/home/demand.vue

@@ -58,7 +58,7 @@
               }"
             >
               <div class="title text_hidden_two">
-                <span>{{ item.title }}</span>
+                <span style="text-align:left">{{ item.title }}</span>
               </div>
 
               <div v-html="item.text" class="text text_hidden_four"></div>
@@ -277,6 +277,7 @@ export default {
             justify-content: space-between;
             height: 100%;
             .title {
+              text-align: left;
               font-size: 16px;
               font-weight: bold;
               color: #333;

src/views/login.vue

@@ -1,24 +1,22 @@
 <template>
   <div class="login">
     <div class="login-title">
-      <router-link to="/home">
+      <!-- <router-link to="/home">
         <span>嘉策科技创新服务平台</span>
         <br />
-        <span>欢迎来到嘉策</span>
-      </router-link>
+        <span>欢迎您</span>
+      </router-link> -->
     </div>
     <div class="my-box">
       <div class="my-left">
         <div class="bg-img">
-          <img src="@/assets/login.png" alt="" />
+          <!-- <img src="@/assets/login.png" alt="" /> -->
         </div>
       </div>
       <div class="my-right">
         <!-- 登录 -->
-        <div
-          style="min-width: 360px; max-width: 360px; padding-bottom: 55px"
-          v-show="status"
-        >
+        <!-- min-width: 360px; max-width: 360px; padding-bottom: 55px -->
+        <div class="right_box" v-show="status">
           <div class="m-title">
             <div>
               欢迎登录<i
@@ -121,10 +119,8 @@
           </div>
         </div>
         <!-- 注册 -->
-        <div
-          style="min-width: 360px; max-width: 360px; padding-bottom: 55px"
-          v-show="!status"
-        >
+        <!-- min-width: 360px; max-width: 360px; padding-bottom: 55px -->
+        <div class="right_box" v-show="!status">
           <div class="m-title">
             <div>
               欢迎注册<i class="el-icon-sort" @click="status = true"></i>
@@ -347,6 +343,9 @@ export default {
   },
   created() {
     this.getCookie();
+    let { status } = this.$route.query;
+    status = status === 'true' ? true : false;
+    this.status = status;
   },
   methods: {
     disagree() {
@@ -489,10 +488,6 @@ export default {
         }
       });
     }
-  },
-  created() {
-    const { status } = this.$route.query;
-    this.status = status;
   }
 };
 </script>
@@ -602,7 +597,7 @@ $loginForm: 383px;
   height: 38px;
 }
 .my-box {
-  min-height: 454px;
+  min-height: 460px;
   display: flex;
   border-radius: 10px;
   position: absolute;
@@ -613,37 +608,49 @@ $loginForm: 383px;
   border-radius: 10px;
   overflow: hidden;
   .my-left {
-    min-width: 500px;
+    // padding: 137px 48px 96px;
+    background-color: #3494ff;
+    // min-width: 500px;
     .bg-img {
+      width: 405px;
       height: 100%;
-      background-color: #3494ff;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      img {
-        width: 405px;
-        height: 325px;
-      }
+      // background-color: #3494ff;
+      // display: flex;
+      // justify-content: center;
+      // align-items: center;
+      background: url('../assets/login.png') no-repeat center center;
+      background-size: 80%;
+      // img {
+      //   width: 405px;
+      //   height: 325px;
+      // }
     }
   }
   .my-right {
-    min-width: 550px;
+    // min-width: 550px;
+    // padding: 84px 100px 0;
+    margin: 50px auto 15px;
     display: flex;
     justify-content: center;
-    .m-title {
-      color: #333;
-      font-size: 26px;
-      font-weight: 700;
-      text-align: center;
-      margin: 55px auto 45px;
-      div {
-        position: relative;
-        i {
-          transform: rotate(90deg);
-          position: absolute;
-          top: 0;
-          right: 0;
-          cursor: pointer;
+    .right_box {
+      margin: 0 100px;
+      min-width: 325px;
+      .m-title {
+        color: #333;
+        font-size: 26px;
+        font-weight: 700;
+        text-align: center;
+        // margin: 55px auto 45px;
+        margin-bottom: 45px;
+        div {
+          position: relative;
+          i {
+            transform: rotate(90deg);
+            position: absolute;
+            top: 0;
+            right: 0;
+            cursor: pointer;
+          }
         }
       }
     }