update login views

src/views/login/index.vue

 <template>
-  <div class="login-container" :style="{ backgroundImage: `url(${backgroundImg})` }">
-
+  <div class="login-container">
+    <div class="content">
+      <div class="left">
+        <img :src="loginBackground" alt="">
+      </div>
+      <div class="right">
         <div class="logo-container">
           <!--      <h1>灵雀</h1>-->
           <img :src="logo" alt="">
@@ -66,6 +70,8 @@
 
           <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
         </el-form>
+      </div>
+    </div>
 
     <div class="bottom-container">
       copyright© 2019 苏州英思唯智能科技有限公司.
@@ -75,7 +81,8 @@
 
 <script>
 import md5 from 'md5'
-import logo from '@/assets/logo-login.jpg'
+import loginBackground from '@/assets/login-background.png'
+import logo from '@/assets/logo-login.png'
 import backgroundImg from '@/assets/background-img.svg'
 import { getCaptcha } from '@/api/components/basic-services'
 
@@ -109,6 +116,7 @@ export default {
       otherQuery: {},
       logo: logo,
       backgroundImg: backgroundImg,
+      loginBackground: loginBackground,
       captchaUrl: ''
     }
   },
@@ -251,7 +259,7 @@ $cursor: rgba(0,0,0,.65);
 </style>
 
 <style lang="scss" scoped>
-$bg:#f0f2f5;
+$bg:#29569a;
 $dark_gray:#889aa4;
 $light_gray:#eee;
 $cursor: rgba(0,0,0,.65);
@@ -264,10 +272,28 @@ $cursor: rgba(0,0,0,.65);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-
+  .content{
+    display: flex;
+    max-width: 1200px;
+    margin: 0 auto;
+    justify-content: space-around;
+    align-items: center;
+    height: 100vh;
+    .left{
+      width: 560px;
+      margin-right: 80px;
+      img{
+        width: 100%;
+      }
+    }
+    .right{
+      flex-shrink: 0;
+      width: 520px;
+      margin-left: 20px;
+      margin-right: 20px;
       .logo-container{
         max-width: 300px;
-    margin: 100px auto 50px auto;
+        margin: 0 auto 20px auto;
         text-align: center;
         padding-left: 20px;
         padding-right: 20px;
@@ -276,7 +302,6 @@ $cursor: rgba(0,0,0,.65);
           width: 100%;
         }
       }
-
       .login-form {
         background-color: #fff;
         position: relative;
@@ -301,6 +326,8 @@ $cursor: rgba(0,0,0,.65);
           }
         }
       }
+    }
+  }
 
   .tips {
     font-size: 14px;
@@ -344,7 +371,7 @@ $cursor: rgba(0,0,0,.65);
     user-select: none;
   }
   .bottom-container{
-    color: rgba(0,0,0,0.45);
+    color: rgba(255,255,255, 0.75);
     font-size: 14px;
     position: absolute;
     bottom: 20px;
@@ -355,25 +382,12 @@ $cursor: rgba(0,0,0,.65);
     left: 0;
     right: 0;
   }
-}
-@media (min-width: 992px) {
-  .login-container{
-    .logo-container{
-      margin-top: 120px;
-    }
-  }
-}
-@media (min-width: 1200px) {
-  .login-container{
-    .logo-container{
-      margin-top: 150px;
-    }
+
+  @media (max-width: 1200px) {
+    .content{
+      .left{
+        display: none;
       }
-}
-@media (min-width: 1400px) {
-  .login-container{
-    .logo-container{
-      margin-top: 200px;
     }
   }
 }