update login views

src/views/login/index.vue

 <template>
-  <div class="login-container" :style="{ backgroundImage: `url(${backgroundImg})` }">
-
-    <div class="logo-container">
-      <!--      <h1>灵雀</h1>-->
-      <img :src="logo" alt="">
-    </div>
+  <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="">
+        </div>
 
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
+        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
 
-      <div class="title-container">
-        <div class="title">账号登录</div>
-      </div>
+          <div class="title-container">
+            <div class="title">账号登录</div>
+          </div>
 
-      <el-form-item prop="username">
+          <el-form-item prop="username">
         <span class="svg-container">
           <svg-icon icon-class="user" />
         </span>
-        <el-input
-          ref="username"
-          v-model="loginForm.username"
-          placeholder="用户名"
-          name="username"
-          type="text"
-          tabindex="1"
-          autocomplete="on"
-        />
-      </el-form-item>
+            <el-input
+              ref="username"
+              v-model="loginForm.username"
+              placeholder="用户名"
+              name="username"
+              type="text"
+              tabindex="1"
+              autocomplete="on"
+            />
+          </el-form-item>
 
-      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
-        <el-form-item prop="password">
+          <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
+            <el-form-item prop="password">
           <span class="svg-container">
             <svg-icon icon-class="password" />
           </span>
-          <el-input
-            :key="passwordType"
-            ref="password"
-            v-model="loginForm.password"
-            :type="passwordType"
-            placeholder="密码"
-            name="password"
-            tabindex="2"
-            autocomplete="on"
-            @blur="capsTooltip = false"
-          />
-          <span class="show-pwd" @click="showPwd">
+              <el-input
+                :key="passwordType"
+                ref="password"
+                v-model="loginForm.password"
+                :type="passwordType"
+                placeholder="密码"
+                name="password"
+                tabindex="2"
+                autocomplete="on"
+                @blur="capsTooltip = false"
+              />
+              <span class="show-pwd" @click="showPwd">
             <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
           </span>
-        </el-form-item>
-      </el-tooltip>
+            </el-form-item>
+          </el-tooltip>
 
-      <el-form-item prop="captcha" class="captcha">
+          <el-form-item prop="captcha" class="captcha">
         <span class="svg-container">
           <svg-icon icon-class="captcha" />
         </span>
-        <el-input
-          v-model="loginForm.captcha"
-          placeholder="验证码"
-          @keyup.native="checkCapsLock"
-          @keyup.enter.native="handleLogin"
-        />
-        <div class="captcha-container" @click="getCaptcha">
-          <img :src="captchaUrl" alt="">
-        </div>
-      </el-form-item>
+            <el-input
+              v-model="loginForm.captcha"
+              placeholder="验证码"
+              @keyup.native="checkCapsLock"
+              @keyup.enter.native="handleLogin"
+            />
+            <div class="captcha-container" @click="getCaptcha">
+              <img :src="captchaUrl" alt="">
+            </div>
+          </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
-    </el-form>
+          <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,41 +272,60 @@ $cursor: rgba(0,0,0,.65);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-
-  .logo-container{
-    max-width: 300px;
-    margin: 100px auto 50px auto;
-    text-align: center;
-    padding-left: 20px;
-    padding-right: 20px;
-    img{
-      margin: 0 auto;
-      width: 100%;
-    }
-  }
-
-  .login-form {
-    background-color: #fff;
-    position: relative;
-    width: 520px;
-    max-width: 100%;
-    padding: 35px 35px 0;
+  .content{
+    display: flex;
+    max-width: 1200px;
     margin: 0 auto;
-    overflow: hidden;
-    .captcha{
-      .el-input{
-        width: 70%;
+    justify-content: space-around;
+    align-items: center;
+    height: 100vh;
+    .left{
+      width: 560px;
+      margin-right: 80px;
+      img{
+        width: 100%;
       }
-      .captcha-container{
-        width: 80px;
-        height: 30px;
-        position: absolute;
-        right: 5px;
-        top: 12px;
+    }
+    .right{
+      flex-shrink: 0;
+      width: 520px;
+      margin-left: 20px;
+      margin-right: 20px;
+      .logo-container{
+        max-width: 300px;
+        margin: 0 auto 20px auto;
+        text-align: center;
+        padding-left: 20px;
+        padding-right: 20px;
         img{
+          margin: 0 auto;
           width: 100%;
         }
       }
+      .login-form {
+        background-color: #fff;
+        position: relative;
+        width: 520px;
+        max-width: 100%;
+        padding: 35px 35px 0;
+        margin: 0 auto;
+        overflow: hidden;
+        .captcha{
+          .el-input{
+            width: 70%;
+          }
+          .captcha-container{
+            width: 80px;
+            height: 30px;
+            position: absolute;
+            right: 5px;
+            top: 12px;
+            img{
+              width: 100%;
+            }
+          }
+        }
+      }
     }
   }
 
@@ -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 (min-width: 1400px) {
-  .login-container{
-    .logo-container{
-      margin-top: 200px;
+
+  @media (max-width: 1200px) {
+    .content{
+      .left{
+        display: none;
+      }
     }
   }
 }