登录界面 css 优化

QMPlusVuePage/src/store/module/user.js

@@ -1,6 +1,5 @@
 import { login } from '@/api/user'
 import router from '@/router/index'
-import { Message } from 'element-ui'
 export const user = {
     namespaced: true,
     state: {
@@ -36,26 +35,17 @@ export const user = {
     },
     actions: {
         async LoginIn({ commit }, loginInfo) {
-            try {
-                const res = await login(loginInfo)
-                commit('setUserInfo', res.data.user)
-                commit('setToken', res.data.token)
-                commit('setExpiresAt', res.data.expiresAt)
-                if (res.success) {
-                    const redirect = router.history.current.query.redirect
-                    if (redirect) {
-                        router.push({ path: redirect, replace: true })
-                    } else {
-                        router.push({ path: '/layout/dashbord', replace: true })
-                    }
+            const res = await login(loginInfo)
+            commit('setUserInfo', res.data.user)
+            commit('setToken', res.data.token)
+            commit('setExpiresAt', res.data.expiresAt)
+            if (res.success) {
+                const redirect = router.history.current.query.redirect
+                if (redirect) {
+                    router.push({ path: redirect, replace: true })
+                } else {
+                    router.push({ path: '/layout/dashbord', replace: true })
                 }
-            } catch (err) {
-                Message({
-                    type: 'error',
-                    message: err,
-                    showClose: true
-                })
-                return Promise.reject(err)
             }
         }
     },

QMPlusVuePage/src/style/base.scss

@@ -30,6 +30,20 @@
     margin-left: 14px;
 }
 
+.bottom-mg-lg {
+    margin-bottom: 20px;
+}
+
 .left-mg-lg {
     margin-left: 18px;
+}
+
+.title-1 {
+    text-align: center;
+    font-size: 32px;
+    margin-bottom: 32px;
+}
+
+.title-3 {
+    text-align: center;
 }

QMPlusVuePage/src/view/login/login.vue

@@ -1,22 +1,28 @@
 <template>
   <el-container class="login-regist-box">
-    <vue-particle-line>
-  </vue-particle-line>
+    <vue-particle-line></vue-particle-line>
     <el-main class="login-box">
-      <el-form :model="loginForm" :rules="rules" label-width="100px" ref="loginForm" status-icon>
-        <el-form-item label="用户名" prop="username">
-          <el-input v-model="loginForm.username"></el-input>
+      <h1 class="title-1">GIN-VUE-ADMIN</h1>
+      <el-form :model="loginForm" :rules="rules" ref="loginForm" status-icon>
+        <el-form-item prop="username">
+          <el-input placeholder="请输入用户名" v-model="loginForm.username"></el-input>
         </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input :type="lock==='lock'?'password':'text'" v-model="loginForm.password">
+        <el-form-item prop="password">
+          <el-input
+            :type="lock==='lock'?'password':'text'"
+            placeholder="请输入密码"
+            v-model="loginForm.password"
+          >
             <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
           </el-input>
         </el-form-item>
+        <el-form-item>
+          <el-button @click="submitForm" style="width:100%">登 录</el-button>
+        </el-form-item>
       </el-form>
-      <el-button @click="submitForm" style="float:right;width:calc(100% - 100px)">登 录</el-button>
+      <h3 class="title-3 fl-right">测试用户:admin 密码:123456</h3>
     </el-main>
   </el-container>
-
 </template>
 
 <script>
@@ -25,7 +31,7 @@ export default {
   name: 'Login',
   data() {
     const checkUsername = (rule, value, callback) => {
-      if (value.length < 6 || value.length > 12) {
+      if (value.length < 5 || value.length > 12) {
         return callback(new Error('请输入正确的用户名'))
       } else {
         callback()
@@ -79,14 +85,14 @@ export default {
 
 <style scoped lang="scss">
 .login-regist-box {
-  background: #409eff;
+  background: #fff;
   height: 100vh;
-  .login-box{
+  .login-box {
     width: 40vw;
     position: absolute;
     left: 50%;
     margin-left: -22vw;
-    top:25vh;
+    top: 25vh;
   }
 }
 </style>

QMPlusVuePage/src/view/login/regist.vue

@@ -1,14 +1,18 @@
 <template>
   <el-container class="login-regist-box">
-       <vue-particle-line>
-  </vue-particle-line>
+    <vue-particle-line></vue-particle-line>
     <el-main class="login-box">
-      <el-form :model="registForm" :rules="rules" label-width="100px" ref="registForm" status-icon>
-        <el-form-item label="用户名" prop="username">
-          <el-input v-model="registForm.username"></el-input>
+      <h1 class="title-1">GIN-VUE-ADMIN</h1>by 奇淼
+      <el-form :model="registForm" :rules="rules" ref="registForm" status-icon>
+        <el-form-item prop="username">
+          <el-input placeholder="请输入用户名" v-model="registForm.username"></el-input>
         </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input :type="lock==='lock'?'password':'text'" v-model="registForm.password">
+        <el-form-item prop="password">
+          <el-input
+            :type="lock==='lock'?'password':'text'"
+            placeholder="请输入密码"
+            v-model="registForm.password"
+          >
             <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
           </el-input>
         </el-form-item>
@@ -17,8 +21,10 @@
             <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
           </el-input>
         </el-form-item>
+        <el-form-item>
+          <el-button @click="submitForm" style="width:100%">注 册</el-button>
+        </el-form-item>
       </el-form>
-      <el-button style="float:right;width:calc(100% - 100px)" @click="submitForm">注 册</el-button>
     </el-main>
   </el-container>
 </template>
@@ -37,7 +43,7 @@ export default {
       }
     }
     const checkUsername = (rule, value, callback) => {
-      if (value.length < 6 || value.length > 12) {
+      if (value.length < 5 || value.length > 12) {
         return callback(new Error('请输入正确的用户名'))
       } else {
         callback()
@@ -98,14 +104,14 @@ export default {
 
 <style scoped lang="scss">
 .login-regist-box {
-  background: #409eff;
+  background: #fff;
   height: 100vh;
-  .login-box{
+  .login-box {
     width: 40vw;
     position: absolute;
     left: 50%;
     margin-left: -22vw;
-    top:25vh;
+    top: 25vh;
   }
-}  
+}
 </style>