登陆页面搭建

src/router/index.js

@@ -4,7 +4,7 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 import Layout from '@/layout'
-
+import Login from "@/views/login/Login.vue"
 const routes = [
   {
     path: '/',
@@ -19,6 +19,12 @@ const routes = [
       }
     ]
   },
+  {
+    path: "/login",
+    component: Login,
+    name: "login",
+    meta: { title: '登录', icon: "el-icon-user-solid", affix: true },
+  }
 ]
 
 const router = new VueRouter({

src/views/login/Login.vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <div class="pageBox">
+            <div class="loginBox">
+                <el-form ref="form" :model="form" >
+                    <el-form-item class="loginItem">
+                        <p>账号</p>
+                        <input class="loginInput" v-model="form.username">
+                    </el-form-item>
+                    <el-form-item class="loginItem">
+                        <p>密码</p>
+                        <input class="loginInput" v-model="form.password">
+                    </el-form-item>
+                    <el-form-item class="loginItem">
+                        <el-button>提交</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+                username: "",
+                password: ""
+            }
+        }
+    },
+    methods: {
+
+    },
+    created() {
+        ;
+    },
+}
+</script>
+
+<style scoped>
+.pageBox {
+    width: 100vw;
+    height: 100vh;
+    background-image: url("../../assets/loginBackground.png");
+    background-repeat: no-repeat;
+    background-size: 88%;
+    background-color: #14093E;
+}
+.loginBox{
+    width: 640px;
+    height: 650px;
+}
+.loginItem {
+    width: 432px;
+}
+.loginInput{
+    width: 432px;
+    height: 44px;
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    border: 1px solid #FFFFFF;
+    background-color: transparent;
+}
+</style>