登录

src/main.ts

@@ -11,6 +11,9 @@ const routes:RouteRecordRaw[] = [{
     },{
       path:"major",
       component: () => import('./pages/major.vue')
+    },{
+        path:"login",
+        component:()=> import('./pages/login.vue')
     }]
 
 }]

src/pages/login.vue

@@ -0,0 +1,63 @@
+<template>
+<div class="login">
+  <div class="infos">
+    <div class="top">
+      <img src="../static/img/logo.jpg" class="logo">
+      <h1>高考志愿填报</h1>
+    </div>
+    <a-form
+        name="custom-validation"
+        ref="formRef"
+        :model="formState"
+        v-bind="layout"
+        @finish="handleFinish"
+        @finishFailed="handleFinishFailed"
+    >
+      <a-form-item has-feedback  name="pass">
+        <a-input type="password" autocomplete="off" placeholder="请输入用户名" class="shuru"/>
+      </a-form-item>
+      <a-form-item has-feedback  name="checkPass">
+        <a-input  type="password" autocomplete="off" placeholder="请输入密码" class="shuru"/>
+      </a-form-item>
+      <a-button type="primary" class="shuru">登录</a-button>
+
+    </a-form>
+
+  </div>
+
+</div>
+</template>
+
+<script>
+export default {
+  name: "login"
+}
+</script>
+
+<style scoped lang="scss">
+.login{
+  height: 80vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+.top{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  line-height: 70px;
+  margin-bottom: 30px;
+  .logo{
+    width:140px;
+    height: 140px;
+    margin-right: 20px;
+  }
+}
+  .infos{
+    margin: 0 auto;
+    .shuru{
+      width: 400px;
+    }
+  }
+}
+</style>