123 lines
2.1 KiB
Vue
123 lines
2.1 KiB
Vue
<style scoped>
|
|
.selection {
|
|
width: 100%;
|
|
margin: auto;
|
|
}
|
|
</style>
|
|
<template>
|
|
<div>
|
|
<n-grid cols="1 200:2 600:4">
|
|
<n-gi span="1">
|
|
<n-select
|
|
placeholder="区域"
|
|
class="selection"
|
|
v-model:value="select_area"
|
|
:options="options_area"
|
|
/>
|
|
</n-gi>
|
|
<n-gi span="1">
|
|
<n-select
|
|
placeholder="时间"
|
|
max-tag-count="responsive"
|
|
class="selection"
|
|
v-model:value="select_time"
|
|
:options="options_time"
|
|
/>
|
|
</n-gi>
|
|
<n-gi span="1">
|
|
<n-select
|
|
placeholder="类型"
|
|
class="selection"
|
|
max-tag-count="responsive"
|
|
v-model:value="select_type"
|
|
:options="options_type"
|
|
/>
|
|
</n-gi>
|
|
<n-gi span="1">
|
|
<n-select
|
|
placeholder="时薪"
|
|
class="selection"
|
|
v-model:value="select_pay"
|
|
:options="options_pay"
|
|
/>
|
|
</n-gi>
|
|
</n-grid>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const select_area = ref("in");
|
|
const select_time = ref("all");
|
|
const select_type = ref("all");
|
|
const select_pay = ref(0);
|
|
const options_area = ref([
|
|
{
|
|
label: "校内",
|
|
value: "in",
|
|
disabled: false,
|
|
},
|
|
{
|
|
label: "校外",
|
|
value: "out",
|
|
},
|
|
]);
|
|
const options_time = ref([
|
|
{
|
|
label: "全天",
|
|
value: "all",
|
|
disabled: false,
|
|
},
|
|
{
|
|
label: "中午",
|
|
value: "noon",
|
|
disabled: false,
|
|
},
|
|
{
|
|
label: "上午",
|
|
value: "moning",
|
|
disabled: false,
|
|
},
|
|
{
|
|
label: "下午",
|
|
value: "afnon",
|
|
disabled: false,
|
|
},
|
|
{
|
|
label: "晚上",
|
|
value: "night",
|
|
},
|
|
]);
|
|
const options_type = ref([
|
|
{
|
|
label: "全部",
|
|
value: "all",
|
|
disabled: false,
|
|
},
|
|
{
|
|
label: "室内",
|
|
value: "in",
|
|
disabled: false,
|
|
},
|
|
{
|
|
label: "室外",
|
|
value: "out",
|
|
},
|
|
]);
|
|
const options_pay = ref([
|
|
{
|
|
label: "全部",
|
|
value: 0,
|
|
disabled: false,
|
|
},
|
|
{
|
|
label: "<10￥/h",
|
|
value: 10,
|
|
disabled: false,
|
|
},
|
|
{
|
|
label: ">10￥/h",
|
|
value: 11,
|
|
},
|
|
]);
|
|
</script>
|