Merge remote-tracking branch 'origin/master'
This commit is contained in:
asd
commit
b0157de4fe
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<a-menu mode="horizontal" @click="navto">
|
<a-menu mode="horizontal" @click="navto" class="nav">
|
||||||
<a-menu-item key="/index">
|
<a-menu-item key="/index">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<mail-outlined />
|
<mail-outlined />
|
||||||
@ -27,6 +27,21 @@
|
|||||||
志愿填报
|
志愿填报
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
</a-menu>
|
</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>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
@ -38,13 +53,24 @@
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
top: 0;
|
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;
|
padding: 20px 40px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script setup lang="ts">
|
<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 { ref } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|||||||
42
src/main.ts
42
src/main.ts
@ -1,25 +1,31 @@
|
|||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import "normalize.css"
|
import "normalize.css"
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import { createRouter,createWebHashHistory, RouteRecordRaw } from "vue-router"
|
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
|
||||||
const routes:RouteRecordRaw[] = [{
|
const routes: RouteRecordRaw[] = [{
|
||||||
path:"/",
|
path: "/",
|
||||||
component:() => import('./layout/index.vue'),
|
component: () => import('./layout/index.vue'),
|
||||||
children:[{
|
children: [{
|
||||||
path: "index",
|
path: "index",
|
||||||
component: () => import("./pages/index.vue")
|
component: () => import("./pages/index.vue")
|
||||||
},{
|
}, {
|
||||||
path:"major",
|
path: "major",
|
||||||
component: () => import('./pages/major.vue')
|
component: () => import('./pages/major.vue')
|
||||||
},{
|
}, {
|
||||||
path:"login",
|
path: "login",
|
||||||
component:()=> import('./pages/login.vue')
|
component: () => import('./pages/login.vue')
|
||||||
}]
|
}, {
|
||||||
|
path: "university",
|
||||||
|
component: () => import('./pages/university.vue')
|
||||||
|
}, {
|
||||||
|
path: "fillout",
|
||||||
|
component: () => import('./pages/fillout.vue')
|
||||||
|
}]
|
||||||
|
|
||||||
}]
|
}]
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
|
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
|
||||||
history: createWebHashHistory(),
|
history: createWebHashHistory(),
|
||||||
routes, // `routes: routes` 的缩写
|
routes, // `routes: routes` 的缩写
|
||||||
})
|
})
|
||||||
createApp(App).use(router).mount('#app')
|
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>
|
<template>
|
||||||
<div>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.select {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.table {
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user