refactor: login page

clarkdo · Oct 14, 2017 · c4ab867 · c4ab867
1 parent c40d42b
commit c4ab867
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 77 deletions.
diff --git a/client/assets/img/login-bg.jpeg b/client/assets/img/login-bg.jpeg
diff --git a/client/assets/img/login-bg.png b/client/assets/img/login-bg.png
diff --git a/client/pages/login.vue b/client/pages/login.vue
@@ -1,44 +1,45 @@
 <template>
   <div class="login container">
-    <header class="header" ref="header">
-      <img class="logo" src="~/assets/img/logo.svg">
-    </header>
-    <img src="~/assets/img/login-bg.png" alt="" class="bg">
-    <el-card>
-      <el-form :model="user" ref="user" @keyup.enter.native='!logging && login()'>
-        <el-form-item prop="userName" :rules="[{ required: true, message: $t('login.userRequired')}]">
-          <el-col :span="24">
-            <el-input v-model="user.userName" :placeholder="$t('login.userPlaceholder')"></el-input>
-          </el-col>
-        </el-form-item>
-        <el-form-item prop="password" :rules="[{ required: true, message: $t('login.pwdRequired')}]">
-          <el-col :span="24">
-            <el-input v-model="user.password" type="password" :placeholder="$t('login.pwdPlaceholder')"></el-input>
-          </el-col>
-        </el-form-item>
-        <el-form-item prop="captcha" :rules="[{ required: true, message: $t('login.captchaRequired')}]">
-            <el-col :span="12">
-              <el-input v-model="user.captcha" :placeholder="$t('login.captchaPlaceholder')"></el-input>
-            </el-col>
-            <el-col :offset="1" :span="11" ref="captcha">
-              <div v-html="captchaSvg" @click='refreshCaptcha' class="captcha"></div>
-            </el-col>
-        </el-form-item>
-        <el-row>
-          <el-col :span="24">
-            <el-button type="primary" class="login-btn" :loading="logging" @click="login">{{$t('login.login')}}</el-button>
-          </el-col>
-        </el-row>
-        <!--<el-row>
-          <el-col :span="5">
-            <el-checkbox v-model="keepPwd">记住密码</el-checkbox>
-          </el-col>
-          <el-col :offset='14' :span="5">
-            <label>忘记密码?</label>
-          </el-col>
-        </el-row>-->
-      </el-form>
-    </el-card>
+    <img class="logo" src="~/assets/img/logo.svg">
+    <el-row class="login-row" type="flex" justify="center">
+      <el-col :xs="{span: 14, offset: 5}" :sm="{span: 10, offset: 7}" :lg="{span: 6, offset: 9}">
+        <el-card>
+          <el-form :model="user" ref="user" @keyup.enter.native='!logging && login()'>
+            <el-form-item prop="userName" :rules="[{ required: true, message: $t('login.userRequired')}]">
+              <el-col :span="24">
+                <el-input v-model="user.userName" :placeholder="$t('login.userPlaceholder')"></el-input>
+              </el-col>
+            </el-form-item>
+            <el-form-item prop="password" :rules="[{ required: true, message: $t('login.pwdRequired')}]">
+              <el-col :span="24">
+                <el-input v-model="user.password" type="password" :placeholder="$t('login.pwdPlaceholder')"></el-input>
+              </el-col>
+            </el-form-item>
+            <el-form-item prop="captcha" :rules="[{ required: true, message: $t('login.captchaRequired')}]">
+                <el-col :span="12">
+                  <el-input v-model="user.captcha" :placeholder="$t('login.captchaPlaceholder')"></el-input>
+                </el-col>
+                <el-col :offset="1" :span="11" ref="captcha">
+                  <div v-html="captchaSvg" @click='refreshCaptcha' class="captcha"></div>
+                </el-col>
+            </el-form-item>
+            <el-row>
+              <el-col :span="24">
+                <el-button type="primary" class="login-btn" :loading="logging" @click="login">{{$t('login.login')}}</el-button>
+              </el-col>
+            </el-row>
+            <!--<el-row>
+              <el-col :span="5">
+                <el-checkbox v-model="keepPwd">记住密码</el-checkbox>
+              </el-col>
+              <el-col :offset='14' :span="5">
+                <label>忘记密码?</label>
+              </el-col>
+            </el-row>-->
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -99,51 +100,31 @@ export default class Login extends Vue {
 </script>
 
 <style scoped lang="scss">
-img.bg {
-  width: 100%;
-  height: auto;
-  min-width: 760px;
-  // max-width: 1440px;
-  min-height: 695px;
-  // max-height: 800px;
-  position: fixed;
-}
-.header {
-  width: 100%;
-  height: 60px;
-  z-index: 100;
-  position: relative;
-  background-color: #fbfdff;
+.login {
+  background: url(~/assets/img/login-bg.jpeg) no-repeat center center fixed;
+  background-size: cover;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   img.logo {
-    position: absolute;
+    position: fixed;
     top: 12px;
-    left: 100px;
+    left: 20px;
+  }
+  .login-row {
+    height: 100%;
+    flex-direction: column;
   }
 }
 .el-card {
-  width: 65%;
-  margin-left: 20%;
-  margin-top: 120px;
-  @media (min-width: 760px) {
-    width: 38%;
-    margin-left: 50%;
-    margin-top: 150px;
-  }
-  @media (min-width: 1012px) {
-    width: 35%;
-    margin-left: 55%;
-    margin-top: 180px;
-  }
-  @media (min-width: 1430px) {
-    width: 28%;
-    margin-left: 60%;
-    margin-top: 210px;
-  }
-  position: relative;
+  background-color: rgba(255, 255, 255, 0.5);
   .el-form {
-    margin-top: 8%;
-    margin-bottom: 8%;
+    margin-top: 4%;
+    margin-bottom: 4%;
     .captcha {
+      background-color: rgba(255, 255, 255, 0.5);
       max-height: 36px;
       cursor: pointer;
     }