feat

src/views/login.vue

@@ -8,36 +8,35 @@
 <template>
 <div class="login">
     <div class="loginPage">
-      <div class="loginPage-left">
-        <div>
-          <img src="../../public/img/logo4.png" alt="">
-          <p>欢迎登录</p>
-          <p>优创后台系统</p>
+        <div class="loginPage-left">
+            <div>
+                <img src="../../public/img/logo4.png" alt="">
+                <p>欢迎登录</p>
+                <p>优创招聘面试管理系统</p>
+            </div>
         </div>
-      </div>
-      <div class="loginPage-right">
-        <div class="loginPage-right-content">
-          <el-form :model="loginForm" :rules="pwdRules" ref="pwdLogin" label-width="0">
-            <el-form-item prop="loginname">
-              <!-- <el-input v-model="loginForm.loginname" name="loginname" type="tel" autocomplete="new-password" placeholder="请输入账号"> -->
-                <!-- <span slot="prefix" class="iconfont iconshouji"></span> -->
-              <!-- </el-input> --><i class="el-icon-postcard"></i>
-              <input v-model="loginForm.loginname" name="loginname" type="tel" autofocus autocomplete="new-password" placeholder="请输入账号">
-            </el-form-item>
-            <el-form-item prop="password">
-              <!-- <el-input type="password" v-model="loginForm.password" name="password" @keyup.enter.native="login" autocomplete="new-password" placeholder="请输入密码">
+        <div class="loginPage-right">
+            <div class="loginPage-right-content">
+                <el-form :model="loginForm" :rules="pwdRules" ref="pwdLogin" label-width="0">
+                    <el-form-item prop="loginname">
+                        <!-- <el-input v-model="loginForm.loginname" name="loginname" type="tel" autocomplete="new-password" placeholder="请输入账号"> -->
+                        <!-- <span slot="prefix" class="iconfont iconshouji"></span> -->
+                        <!-- </el-input> --><i class="el-icon-postcard"></i>
+                        <input v-model="loginForm.loginname" name="loginname" type="tel" autofocus autocomplete="new-password" placeholder="请输入账号">
+                    </el-form-item>
+                    <el-form-item prop="password">
+                        <!-- <el-input type="password" v-model="loginForm.password" name="password" @keyup.enter.native="login" autocomplete="new-password" placeholder="请输入密码">
                 <span slot="prefix" class="iconfont iconmima"></span>
               </el-input> --><i class="el-icon-unlock"></i>
-              <input v-model="loginForm.password" name="password" type="password" autocomplete="new-password" @keyup.enter="login" placeholder="请输入密码">
-            </el-form-item>
-            <div class="login-btn" @click="login">登录</div>
-          </el-form>
-          <div class="forget" @click="forget">忘记密码？</div>
+                        <input v-model="loginForm.password" name="password" type="password" autocomplete="new-password" @keyup.enter="login" placeholder="请输入密码">
+                    </el-form-item>
+                    <div class="login-btn" @click="login">登录</div>
+                </el-form>
+                <div class="forget" @click="forget">忘记密码？</div>
+            </div>
         </div>
-      </div>
-  </div>
+    </div>
 </div>
-
 </template>
 
 <style lang="scss" scoped>
@@ -52,114 +51,129 @@
 //   line-height: 5px;
 // }
 .login {
-  background-image: url(../../public/static/loginBG.png);
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.loginPage {
-  box-shadow:0px 0px 99px #DBD9D9;
-  border-radius: 3px;
-  background-color: #fff;
-  display: flex;
-  width: 60%;
-  height: 60%;
-  &-left {
-    flex: 2;
-    border-radius: 3px 0 0 3px;
-    background-color: #00A0E9;
+    background-image: url(../../public/static/loginBG.png);
+    width: 100vw;
+    height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
-    flex-direction: column;
-    div {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      position: relative;
-      top: -5%;
-    }
-    img {
-      width: 70%;
-      // margin: 0 auto;
-      // height: auto;
-      margin-bottom: 30px;
-    }
-    p {
-      margin-bottom: 10px;
-      width: 65%;
-      font-size: 30px;
-      color: #fff;
-      font-family:"微软雅黑";
-    }
-  }
-  &-right {
-    flex: 3;
-    height: 100%;
-    &-content {
-      width: 100%;
-      height: 90%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      margin-top: 7%;
-      .el-form {
-        width: 40%;
-        // height: 20%;
-        background-color: rgba($color: #fff, $alpha: 0);
-        /deep/ .el-form-item__content {
-          display: flex;
-        }
-      }
-      .login-btn {
-        text-align: center;
-        line-height: 40px;
-        border: none;
+}
+
+.loginPage {
+    box-shadow: 0px 0px 99px #DBD9D9;
+    border-radius: 3px;
+    background-color: #fff;
+    display: flex;
+    width: 60%;
+    height: 60%;
+
+    &-left {
+        flex: 2;
+        border-radius: 3px 0 0 3px;
         background-color: #00A0E9;
-        height: 40px;
-        width: 100%;
-        font-size: 16px;
-        box-shadow:0px 0px 15px #DBD9D9;
-        margin-top: 30px;
-        color: #fff;
-        font-family:"微软雅黑";
-        box-sizing: content-box;
-        padding: 0 7px;
-        margin-left: -13px;
-      }
-      .forget {
-        margin-top: 50px;
-        color: #00A0E9;
-        font-size: 14px;
-      }
-      input {
-        border: none;
-        height: 35px;
-        padding: 5px 65px;
-        font-size: 14px;
-        width: 100%;
-        margin: 15px auto;
-        outline: none;
-        border-bottom: rgb(159, 163, 167) 2px solid;
-        margin-left: -45px;
-      }
-      input:focus {
-        border-bottom: #00A0E9 2px solid;
-      }
-      i {
-        font-size: 34px;
-        line-height: 72px;
-        position: relative;
-        z-index: 66;
-      }
-      .flex {
         display: flex;
-      }
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        div {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: relative;
+            top: -5%;
+        }
+
+        img {
+            width: 70%;
+            // margin: 0 auto;
+            // height: auto;
+            margin-bottom: 30px;
+        }
+
+        p {
+            margin-bottom: 10px;
+            width: 65%;
+            font-size: 24px;
+            color: #fff;
+            font-family: "微软雅黑";
+        }
+    }
+
+    &-right {
+        flex: 3;
+        height: 100%;
+
+        &-content {
+            width: 100%;
+            height: 90%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin-top: 7%;
+
+            .el-form {
+                width: 40%;
+                // height: 20%;
+                background-color: rgba($color: #fff, $alpha: 0);
+
+                /deep/ .el-form-item__content {
+                    display: flex;
+                }
+            }
+
+            .login-btn {
+                text-align: center;
+                line-height: 40px;
+                border: none;
+                background-color: #00A0E9;
+                height: 40px;
+                width: 100%;
+                font-size: 16px;
+                box-shadow: 0px 0px 15px #DBD9D9;
+                margin-top: 30px;
+                color: #fff;
+                font-family: "微软雅黑";
+                box-sizing: content-box;
+                padding: 0 7px;
+                margin-left: -13px;
+            }
+
+            .forget {
+                margin-top: 50px;
+                color: #00A0E9;
+                font-size: 14px;
+            }
+
+            input {
+                border: none;
+                height: 35px;
+                padding: 5px 65px;
+                font-size: 14px;
+                width: 100%;
+                margin: 15px auto;
+                outline: none;
+                border-bottom: rgb(159, 163, 167) 2px solid;
+                margin-left: -45px;
+            }
+
+            input:focus {
+                border-bottom: #00A0E9 2px solid;
+            }
+
+            i {
+                font-size: 34px;
+                line-height: 72px;
+                position: relative;
+                z-index: 66;
+            }
+
+            .flex {
+                display: flex;
+            }
+        }
     }
-  }
 }
 </style>
 
@@ -226,8 +240,7 @@ export default {
     forget () {
       this.$alert('请联系yc1min客服重置密码！', '提示', {
         confirmButtonText: '确定',
-        callback: action => {
-        }
+        callback: action => {}
       })
     }
   }