Merge branch 'feature/login-index' into feature/merge1115

src/views/login/index.vue

@@ -1,66 +1,40 @@
 <template>
   <div class="login-container">
-    <img src="@/assets/images/logo.png" alt class="logo">
-    <img src="@/assets/images/login-bujian.png" alt="" class="bujian">
-    <div class="login">
-      <div class="logo" />
-      <el-form
-        ref="loginForm"
-        :model="loginForm"
-        :rules="loginRules"
-        class="login-form"
-        auto-complete="on"
-        label-position="left"
-      >
-        <div class="title-container">
-          <h3 class="title">设备管理系统</h3>
-          <b>Equipment Management System</b>
-          <hr>
-        </div>
-
-        <el-form-item prop="username">
-          <span class="svg-container">
-            <svg-icon icon-class="user" />
-          </span>
-          <el-input
-            ref="username"
-            v-model="loginForm.username"
-            placeholder="Username"
-            name="username"
-            type="text"
-            tabindex="1"
-            auto-complete="on"
-          />
-        </el-form-item>
+    <!-- <img src="@/assets/images/logo.png" alt class="logo">
+    <img src="@/assets/images/login-bujian.png" alt="" class="bujian"> -->
+    <div class="content">
+      <div class="content-l"></div>
+      <div class="login">
+        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left" >
+          <div class="title-container">
+            <h3 class="title">设备管理系统</h3>
+            <b>Equipment Management System</b>
+            <hr>
+          </div>
+          <el-form-item prop="username">
+            <span class="svg-container">
+              <svg-icon icon-class="user" />
+            </span>
+            <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" tabindex="1" auto-complete="on" />
+          </el-form-item>
 
-        <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="Password"
-            name="password"
-            tabindex="2"
-            auto-complete="on"
-            @keyup.enter.native="handleLogin"
-          />
-          <span class="show-pwd" @click="showPwd">
-            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-          </span>
-        </el-form-item>
-
-        <el-button
-          :loading="loading"
-          type="primary"
-          style="width:100%;margin-bottom:30px;background:#009688;"
-          @click.native.prevent="handleLogin"
-        >登录</el-button>
-      </el-form>
+          <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="Password" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
+            <span class="show-pwd" @click="showPwd">
+              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+            </span>
+          </el-form-item>
+          <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;background:#009688;" @click.native.prevent="handleLogin" >登录</el-button>
+        </el-form>
+      </div>
     </div>
+    <!-- <div class="login">
+      <div class="logo" />
+
+    </div> -->
   </div>
 </template>
 
@@ -220,9 +194,12 @@ $light_gray: #000;
   min-height: 100%;
   width: 100%;
   position: relative;
-  background: url("../../assets/images/login-bg.jpg") no-repeat;
-  background-size:100%;
+  background: url("../../assets/images/login.png") no-repeat;
+  background-size:cover;
   overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   .logo{
     padding: 5px;
   }
@@ -235,71 +212,77 @@ $light_gray: #000;
     margin: auto;
   }
   .login {
-    border-radius: 5%;
     padding: 30px;
-    background: #fff;
-    width: 300px;
-    height: 310px;
-    position: absolute;
-    right: 95px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     margin: auto;
-    top: 0;
     bottom: 0;
-    .login-form {
-      position: relative;
-      width: 520px;
-      max-width: 100%;
-      overflow: hidden;
-    }
-
     .tips {
-      font-size: 14px;
-      color: #fff;
-      margin-bottom: 10px;
-
-      span {
-        &:first-of-type {
-          margin-right: 16px;
-        }
-      }
+      font-size: 14px; color: #fff; margin-bottom: 10px;
+      span { &:first-of-type { margin-right: 16px; } }
     }
 
-    .svg-container {
-      padding: 6px 5px 6px 15px;
-      color: $dark_gray;
-      vertical-align: middle;
-      width: 30px;
-      display: inline-block;
-    }
+    .svg-container { padding: 6px 5px 6px 15px; color: $dark_gray; vertical-align: middle; width: 30px; display: inline-block; }
 
     .title-container {
       position: relative;
-
-      .title {
-        font-size: 26px;
-        color: $light_gray;
-        margin: 0px auto 0 auto;
-        text-align: center;
-        font-weight: bold;
-      }
-      b {
-        text-align: center;
-        font: 14px/2 "";
-      }
+      .title { font-size: 26px; color: $light_gray; margin: 0px auto 0 auto; text-align: center; font-weight: bold; }
+      b { text-align: center; font: 14px/2 ""; display: block; }
     }
 
-    .show-pwd {
-      position: absolute;
-      right: 10px;
-      top: 7px;
-      font-size: 16px;
-      color: $dark_gray;
-      cursor: pointer;
-      user-select: none;
+    .show-pwd { position: absolute; right: 10px; top: 7px; font-size: 16px; color: $dark_gray; cursor: pointer; user-select: none; }
+    hr { color: #ccc; }
+  }
+}
+.content{
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  margin: 0 auto;
+}
+@media (min-width: 770px) {
+   .content{
+      width: 770px;
+      height: 420px;
     }
-    hr {
-      color: #ccc;
+   .content-l{
+    float: left;
+    width: 420px;
+    height: 420px;
+    background: url("../../assets/images/login-l.jpg") no-repeat;
+    background-size:cover;
+  }
+  .login{
+    float: left;
+    width: 350px;
+    height: 420px;
+    background: url("../../assets/images/login-r.jpg") no-repeat;
+    background-size:cover;
+  }
+  .login-form { position: relative; width: 360px; max-width: 100%; overflow: hidden; }
+}
+ @media (min-width: 1100px) {
+   .content{
+      width: 1100px;
+      height: 600px;
     }
+   .content-l{
+    float: left;
+    width: 593px;
+    height: 593px;
+    background: url("../../assets/images/login-l.jpg") no-repeat;
+    background-size:cover;
+  }
+  .login{
+    float: left;
+    width: 495px;
+    height: 593px;
+    background: url("../../assets/images/login-r.jpg") no-repeat;
+    background-size:cover;
   }
+  .login-form { position: relative; width: 520px; max-width: 100%; overflow: hidden; }
 }
+
 </style>