up

src/views/login/index.vue

@@ -1,36 +1,44 @@
 <template>
   <div class="login-container">
+    <img src="../../assets/imgs/bg_bottom.png" class="bg_bottom" />
+    <img src="../../assets/imgs/bg_left.png" class="bg_left" />
+    <img src="../../assets/imgs/footer_logo.png" class="footer_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>
       </div>
+      <img src="../../assets/imgs/bg_box.png" width="100%" />
+      <div class="box_middle">
+        <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" auto-complete="on" />
+        </el-form-item>
 
-      <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" 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="请输入密码" 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;"
-        @click.native.prevent="handleLogin">登录</el-button>
+        <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" 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;"
+          @click.native.prevent="handleLogin">登录</el-button>
+      </div>
 
+      <img src="../../assets/imgs/bg_box_bottom.png" width="100%" />
     </el-form>
+    <div class="footer">
+      2022 © 中共苏州独立支部旧址
+    </div>
   </div>
 </template>
 
@@ -101,7 +109,7 @@
         this.$refs.loginForm.validate(valid => {
           if (valid) {
             this.loading = true
-            this.$store.dispatch('user/login', this.loginForm).then(() => {
+            this.$store.dispatch('user/login', this.loginForm).then(() => {
 
               this.$router.push({
                 path: this.redirect || '/'
@@ -124,8 +132,8 @@
   /* 修复input 背景不协调 和光标变色 */
   /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-  $bg:#283443;
-  $light_gray:#fff;
+  $bg:#ffffff;
+  $light_gray:#55320f;
   $cursor: #fff;
 
   @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@@ -134,6 +142,28 @@
     }
   }
 
+  .footer {
+    position: fixed;
+    bottom: 20px;
+    text-align: center;
+    width: 100%;
+  }
+
+  .footer_logo {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    margin-left: -210px;
+  }
+
+  .box_middle {
+    background: url("../../assets/imgs/bg_box_line.png") repeat-y;
+    background-size: 100% 100%;
+    padding: 20px 60px;
+    margin-top: -10px;
+  }
+
+
   /* reset element-ui css */
   .login-container {
     .el-input {
@@ -168,22 +198,36 @@
 </style>
 
 <style lang="scss" scoped>
-  $bg:#2d3a4b;
-  $dark_gray:#889aa4;
-  $light_gray:#eee;
+  $bg:#f9efe5;
+  $dark_gray:#55320f;
+  $light_gray:#55320f;
+
+  .bg_bottom {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+
+  .bg_left {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 90%;
+  }
 
   .login-container {
     min-height: 100%;
     width: 100%;
     background-color: $bg;
     overflow: hidden;
+    position: relative;
 
     .login-form {
       position: relative;
       width: 520px;
       max-width: 100%;
-      padding: 160px 35px 0;
-      margin: 0 auto;
+      padding: 20px 35px 0;
+      margin: 160px auto;
       overflow: hidden;
     }