页面搭建

src/styles/index.scss

@@ -1,29 +1,34 @@
 body {
-    height: 100%;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    font-family: Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
-    font-weight: normal;
-  }
-  
-  label {
-    font-weight: 700;
-  }
-  
-  html {
-    height: 100%;
-    font-size: 10px;
-    box-sizing: border-box;
-  }
-  
-  #app {
-    height: 100%;
-    // overflow-y: hidden;
-  }
-  
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-  }
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
+  font-weight: normal;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  font-size: 10px;
+  box-sizing: border-box;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  height: 100%;
+  // overflow-y: hidden;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}

src/views/login/Login.vue

@@ -2,17 +2,23 @@
     <div>
         <div class="pageBox">
             <div class="loginBox">
-                <el-form ref="form" :model="form" >
+                <div class="loginTitle">
+                    <p class="loginTitleP">请登录您的账号</p>
+                </div>
+                <el-form ref="form" :model="form">
                     <el-form-item class="loginItem">
-                        <p>账号</p>
-                        <input class="loginInput" v-model="form.username">
+                        <p class="loginItemP">账号</p>
+                        <input class="loginInput" v-model="form.username" @blur="userRule" placeholder="请输入账号">
+                        <p class="blurP" v-if="userBlur">账号不能为空</p>
                     </el-form-item>
                     <el-form-item class="loginItem">
-                        <p>密码</p>
-                        <input class="loginInput" v-model="form.password">
+                        <p class="loginItemP">密码</p>
+                        <input class="loginInput" v-model="form.password" @blur="passRule" placeholder="请输入密码">
+                        <p class="blurP" v-if="passBlur">密码不能为空</p>
                     </el-form-item>
                     <el-form-item class="loginItem">
-                        <el-button>提交</el-button>
+                        <el-checkbox v-model="rememberUser" @change="rememberNow">记住账号</el-checkbox><br>
+                        <el-button class="loginButton" @click="loginNow">登录</el-button>
                     </el-form-item>
                 </el-form>
             </div>
@@ -27,19 +33,75 @@ export default {
             form: {
                 username: "",
                 password: ""
-            }
+            },//账号密码表单
+            rememberUser: false,//是否记住账号
+            userBlur: false,//用户名验证
+            passBlur: false,//密码验证
         }
     },
     methods: {
-
+        // 用户验证
+        userRule(e) {
+            if (e.target._value) {
+                this.userBlur = false
+            } else {
+                this.userBlur = true
+            }
+        },
+        // 密码验证
+        passRule(e) {
+            if (e.target._value) {
+                this.passBlur = false
+            } else {
+                this.passBlur = true
+            }
+        },
+        // 登录按钮
+        loginNow() {
+            console.log(this.form.username, this.form.password, 'login');
+            if (this.form.username != '' && this.form.password != "") {
+                if (!this.userBlur && !this.passBlur) {
+                    this.$router.push("/")
+                } else {
+                    this.$message({
+                        message: '账号或密码不能为空',
+                        type: 'error'
+                    });
+                }
+            } else {
+                this.$message({
+                    message: '账号或密码不能为空',
+                    type: 'error'
+                });
+            }
+        },
+        // 记住账号
+        rememberNow(e) {
+            this.rememberUser = e
+            if (this.rememberUser) {
+                localStorage.setItem('username', JSON.stringify(this.form.username))
+            } else {
+                localStorage.removeItem('username')
+            }
+        },
+        // 拿到已经保存的用户名
+        getSaveUser() {
+            let user = localStorage.getItem("username")
+            if (user) {
+                user = JSON.parse(user)
+                this.form.username = user
+            }
+        }
     },
     created() {
-        ;
+        // 通过本地使用户名显示
+        this.getSaveUser()
     },
 }
 </script>
 
 <style scoped>
+/* 整个大盒子css */
 .pageBox {
     width: 100vw;
     height: 100vh;
@@ -47,20 +109,78 @@ export default {
     background-repeat: no-repeat;
     background-size: 88%;
     background-color: #14093E;
+    position: relative;
+    overflow: hidden;
 }
-.loginBox{
+
+/* 登录盒子css */
+.loginBox {
     width: 640px;
     height: 650px;
+    position: absolute;
+    top: 200px;
+    right: 0px;
 }
+
 .loginItem {
     width: 432px;
 }
-.loginInput{
+
+/* 表单内输入框css */
+.loginInput {
     width: 432px;
     height: 44px;
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
-    border: 1px solid #FFFFFF;
+    border: 1px solid #dbdbdb;
     background-color: transparent;
+    color: white;
+}
+
+/* 表单内标题p标签css */
+.loginTitleP {
+    width: 210px;
+    height: 42px;
+    font-size: 30px;
+    font-family: PingFang SC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 35px;
+    margin-left: 100px;
+    margin-bottom: 52px;
+}
+
+/* 表单内p标签css */
+.loginItemP {
+    width: 40px;
+    height: 28px;
+    font-size: 20px;
+    font-family: PingFang SC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 23px;
+    margin-bottom: 12px;
+}
+
+/* 登录按钮css */
+.loginButton {
+    width: 434px;
+    height: 44px;
+    background: #6D58AA;
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    border: none;
+    color: white;
+}
+
+/* 表单验证p标签css */
+.blurP {
+    width: 84px;
+    height: 20px;
+    font-size: 12px;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FF0000;
+    line-height: 16px;
 }
 </style>