theluyuan/gaokaobaoming
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
asd 2021-10-21 22:20:47 +08:00
commit b0157de4fe
4 changed files with 340 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/layout/index.vue
View File

@ -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 {
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()

6
src/main.ts
View File

@ -14,6 +14,12 @@ const routes:RouteRecordRaw[] = [{
}, {
path: "login",
component: () => import('./pages/login.vue')
}, {
path: "university",
component: () => import('./pages/university.vue')
}, {
path: "fillout",
component: () => import('./pages/fillout.vue')
}]
}]

149
src/pages/fillout.vue Normal file
View 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>

140
src/pages/university.vue
View File

@ -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>