diff --git a/src/layout/index.vue b/src/layout/index.vue
index f79aa46..d59b01b 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="top">
-            <a-menu mode="horizontal" @click="navto">
+            <a-menu mode="horizontal" @click="navto" class="nav">
                 <a-menu-item key="/index">
                     <template #icon>
                         <mail-outlined />
@@ -27,6 +27,21 @@
                     志愿填报
                 </a-menu-item>
             </a-menu>
+            <div class="rigth">
+                <a-button type="link">登录</a-button>
+                <a-button type="link">注册</a-button>
+                <a-button type="primary">
+                    <template #icon>
+                        <UserOutlined />
+                    </template>
+                </a-button>
+                <a-button type="text">
+                    <template #icon>
+                        <UnorderedListOutlined />
+                    </template>
+                    志愿清单
+                </a-button>
+            </div>
         </div>
         <div class="body">
             <router-view></router-view>
@@ -38,13 +53,24 @@
     position: sticky;
     z-index: 999;
     top: 0;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #f0f0f0;
+    .rigth {
+        flex-shrink: 0;
+        padding-right: 20px;
+    }
+    .nav {
+        width: 100%;
+        border-bottom: none;
+    }
 }
-.body{
+.body {
     padding: 20px 40px;
 }
 </style>
 <script setup lang="ts">
-import { MailOutlined, FileSearchOutlined, AuditOutlined, EditOutlined } from '@ant-design/icons-vue';
+import { MailOutlined, FileSearchOutlined, AuditOutlined, EditOutlined, UserOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter()
diff --git a/src/main.ts b/src/main.ts
index 8918a49..c79322b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,25 +1,31 @@
 import App from './App.vue'
 import "normalize.css"
 import { createApp } from 'vue'
-import { createRouter,createWebHashHistory, RouteRecordRaw } from "vue-router"
-const routes:RouteRecordRaw[] = [{
-    path:"/",
-    component:() => import('./layout/index.vue'),
-    children:[{
-      path: "index",
-      component: () => import("./pages/index.vue")
-    },{
-      path:"major",
-      component: () => import('./pages/major.vue')
-    },{
-        path:"login",
-        component:()=> import('./pages/login.vue')
-    }]
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
+const routes: RouteRecordRaw[] = [{
+  path: "/",
+  component: () => import('./layout/index.vue'),
+  children: [{
+    path: "index",
+    component: () => import("./pages/index.vue")
+  }, {
+    path: "major",
+    component: () => import('./pages/major.vue')
+  }, {
+    path: "login",
+    component: () => import('./pages/login.vue')
+  }, {
+    path: "university",
+    component: () => import('./pages/university.vue')
+  }, {
+    path: "fillout",
+    component: () => import('./pages/fillout.vue')
+  }]
 
 }]
 const router = createRouter({
-    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
-    history: createWebHashHistory(),
-    routes, // `routes: routes` 的缩写
-  })
+  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
+  history: createWebHashHistory(),
+  routes, // `routes: routes` 的缩写
+})
 createApp(App).use(router).mount('#app')
diff --git a/src/pages/fillout.vue b/src/pages/fillout.vue
new file mode 100644
index 0000000..147ba6e
--- /dev/null
+++ b/src/pages/fillout.vue
@@ -0,0 +1,149 @@
+<template>
+    <div>
+        <div class="select">
+            <div>
+                院校省份：
+                <a-checkbox-group
+                    v-model="value"
+                    name="checkboxgroup"
+                    :options="plainOptions"
+                    @change="onChange"
+                />
+                <br />院校省份：
+                <a-checkbox-group
+                    v-model="value"
+                    name="checkboxgroup"
+                    :options="plainOptions"
+                    @change="onChange"
+                />
+                <br />院校省份：
+                <a-checkbox-group
+                    v-model="value"
+                    name="checkboxgroup"
+                    :options="plainOptions"
+                    @change="onChange"
+                />
+                <br />
+            </div>
+            <div>
+                院校省份：
+                <a-checkbox-group
+                    v-model="value"
+                    name="checkboxgroup"
+                    :options="plainOptions"
+                    @change="onChange"
+                />
+                <br />院校省份：
+                <a-checkbox-group
+                    v-model="value"
+                    name="checkboxgroup"
+                    :options="plainOptions"
+                    @change="onChange"
+                />
+                <br />院校省份：
+                <a-checkbox-group
+                    v-model="value"
+                    name="checkboxgroup"
+                    :options="plainOptions"
+                    @change="onChange"
+                />
+                <br />
+            </div>
+        </div>
+        <div class="table">
+            <a-table :columns="columns" :data-source="data">
+                <template v-slot:name="text">{{ text }}</template>
+            </a-table>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+const value = ref<string[]>([])
+const options = ref([
+    { label: 'Apple', value: 'Apple' },
+    { label: 'Pear', value: 'Pear' },
+    { label: 'Orange', value: 'Orange' },
+]);
+const plainOptions = ref(['Apple', 'Pear', 'Orange']);
+function onChange(checkedValues: string) {
+    console.log('checked = ', checkedValues);
+    console.log('value = ', value.value);
+}
+
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    scopedSlots: { customRender: 'name' },
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+    width: 80,
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address 1',
+    ellipsis: true,
+  },
+  {
+    title: 'Long Column Long Column Long Column',
+    dataIndex: 'address',
+    key: 'address 2',
+    ellipsis: true,
+  },
+  {
+    title: 'Long Column Long Column',
+    dataIndex: 'address',
+    key: 'address 3',
+    ellipsis: true,
+  },
+  {
+    title: 'Long Column',
+    dataIndex: 'address',
+    key: 'address 4',
+    ellipsis: true,
+  },
+];
+
+const data = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
+    tags: ['nice', 'developer'],
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+];
+
+</script>
+
+<style lang="scss" scoped>
+.select {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+.table {
+    margin-top: 60px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/university.vue b/src/pages/university.vue
index 3c47c5f..147ba6e 100644
--- a/src/pages/university.vue
+++ b/src/pages/university.vue
@@ -1,13 +1,149 @@
 <template>
     <div>
-       
+        <div class="select">
+            <div>
+                院校省份：
+                <a-checkbox-group
+                    v-model="value"
+                    name="checkboxgroup"
+                    :options="plainOptions"
+                    @change="onChange"
+                />
+                <br />院校省份：
+                <a-checkbox-group
+                    v-model="value"
+                    name="checkboxgroup"
+                    :options="plainOptions"
+                    @change="onChange"
+                />
+                <br />院校省份：
+                <a-checkbox-group
+                    v-model="value"
+                    name="checkboxgroup"
+                    :options="plainOptions"
+                    @change="onChange"
+                />
+                <br />
+            </div>
+            <div>
+                院校省份：
+                <a-checkbox-group
+                    v-model="value"
+                    name="checkboxgroup"
+                    :options="plainOptions"
+                    @change="onChange"
+                />
+                <br />院校省份：
+                <a-checkbox-group
+                    v-model="value"
+                    name="checkboxgroup"
+                    :options="plainOptions"
+                    @change="onChange"
+                />
+                <br />院校省份：
+                <a-checkbox-group
+                    v-model="value"
+                    name="checkboxgroup"
+                    :options="plainOptions"
+                    @change="onChange"
+                />
+                <br />
+            </div>
+        </div>
+        <div class="table">
+            <a-table :columns="columns" :data-source="data">
+                <template v-slot:name="text">{{ text }}</template>
+            </a-table>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue"
+const value = ref<string[]>([])
+const options = ref([
+    { label: 'Apple', value: 'Apple' },
+    { label: 'Pear', value: 'Pear' },
+    { label: 'Orange', value: 'Orange' },
+]);
+const plainOptions = ref(['Apple', 'Pear', 'Orange']);
+function onChange(checkedValues: string) {
+    console.log('checked = ', checkedValues);
+    console.log('value = ', value.value);
+}
+
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    scopedSlots: { customRender: 'name' },
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+    width: 80,
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address 1',
+    ellipsis: true,
+  },
+  {
+    title: 'Long Column Long Column Long Column',
+    dataIndex: 'address',
+    key: 'address 2',
+    ellipsis: true,
+  },
+  {
+    title: 'Long Column Long Column',
+    dataIndex: 'address',
+    key: 'address 3',
+    ellipsis: true,
+  },
+  {
+    title: 'Long Column',
+    dataIndex: 'address',
+    key: 'address 4',
+    ellipsis: true,
+  },
+];
+
+const data = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
+    tags: ['nice', 'developer'],
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+];
 
 </script>
 
 <style lang="scss" scoped>
-
+.select {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+.table {
+    margin-top: 60px;
+}
 </style>
\ No newline at end of file