up

src/views/login/index.vue

@@ -2,42 +2,42 @@
   <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" />
+    <img src="../../assets/imgs/footer_logo.png" class="footer_logo" />
     <div class="formBox" ref="formBox">
-    <el-form ref="loginForm" :model="loginForm" :style="{marginTop:marginTop+'px'}" :rules="loginRules"
+      <el-form ref="loginForm" :model="loginForm" :style="{marginTop:marginTop+'px'}" :rules="loginRules"
-      class="login-form" auto-complete="on" label-position="left">
+        class="login-form" auto-complete="on" label-position="left">
-
+
-      <div class="title-container">
+        <div class="title-container">
-        <h3 class="title">预约管理系统</h3>
+          <h3 class="title">预约管理系统</h3>
-      </div>
+        </div>
-      <img src="../../assets/imgs/bg_box.png" width="100%" />
+        <img src="../../assets/imgs/bg_box.png" width="100%" />
-      <div class="box_middle">
+        <div class="box_middle">
-        <el-form-item prop="username">
+          <el-form-item prop="username">
-          <span class="svg-container">
+            <span class="svg-container">
-            <svg-icon icon-class="user" />
+              <svg-icon icon-class="user" />
-          </span>
+            </span>
-          <el-input ref="username" v-model="loginForm.username" placeholder="请输入登录名" name="username" type="text"
+            <el-input ref="username" v-model="loginForm.username" placeholder="请输入登录名" name="username" type="text"
-            tabindex="1" auto-complete="on" />
+              tabindex="1" auto-complete="on" />
-        </el-form-item>
+          </el-form-item>
-
+
-        <el-form-item prop="password">
+          <el-form-item prop="password">
-          <span class="svg-container">
+            <span class="svg-container">
-            <svg-icon icon-class="password" />
+              <svg-icon icon-class="password" />
-          </span>
+            </span>
-          <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
+            <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
-            placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
+              placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
-          <span class="show-pwd" @click="showPwd">
+            <span class="show-pwd" @click="showPwd">
-            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-          </span>
+            </span>
-        </el-form-item>
+          </el-form-item>
-
+
-        <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
+          <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
-          @click.native.prevent="handleLogin">登录</el-button>
+            @click.native.prevent="handleLogin">登录</el-button>
-      </div>
+        </div>
-
+
-      <img src="../../assets/imgs/bg_box_bottom.png" width="100%" />
+        <img src="../../assets/imgs/bg_box_bottom.png" width="100%" />
-    </el-form>
+      </el-form>
-    </div>
+    </div>
     <div class="footer">
       2022 © 中共苏州独立支部旧址
     </div>
@@ -60,7 +60,7 @@
         }
       }
       const validatePassword = (rule, value, callback) => {
-        if (value.length < 6) {
+        if (value.length == 0) {
           callback(new Error('密码输入错误'))
         } else {
           callback()
@@ -115,7 +115,7 @@
       var that = this;
       let height = this.$refs.formBox.offsetHeight; //100
       that.formHeight = height;
-      that.marginTop = (that.windowHeight - height*1.5) / 2;
+      that.marginTop = (that.windowHeight - height * 1.5) / 2;
       // <!--把window.onresize事件挂在到mounted函数上-->
       window.onresize = () => {
         return (() => {