Merge remote-tracking branch 'origin/master'
This commit is contained in:
asd
commit
b0157de4fe
@ -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()
|
||||
|
||||
28
src/main.ts
28
src/main.ts
@ -1,19 +1,25 @@
|
||||
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:[{
|
||||
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",
|
||||
}, {
|
||||
path: "major",
|
||||
component: () => import('./pages/major.vue')
|
||||
},{
|
||||
path:"login",
|
||||
component:()=> import('./pages/login.vue')
|
||||
}, {
|
||||
path: "login",
|
||||
component: () => import('./pages/login.vue')
|
||||
}, {
|
||||
path: "university",
|
||||
component: () => import('./pages/university.vue')
|
||||
}, {
|
||||
path: "fillout",
|
||||
component: () => import('./pages/fillout.vue')
|
||||
}]
|
||||
|
||||
}]
|
||||
@ -21,5 +27,5 @@ const router = createRouter({
|
||||
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
|
||||
history: createWebHashHistory(),
|
||||
routes, // `routes: routes` 的缩写
|
||||
})
|
||||
})
|
||||
createApp(App).use(router).mount('#app')
|
||||
|
||||
149
src/pages/fillout.vue
Normal file
149
src/pages/fillout.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user