|
|
@@ -0,0 +1,196 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="show"
|
|
|
+ width="80%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :before-close="close"
|
|
|
+ >
|
|
|
+
|
|
|
+ <div class="zhiyuan-filter">
|
|
|
+ <div class="header">
|
|
|
+ <h3 class="f-666">您的选考科目为：历史,生物,政治， 请手动选择志愿</h3>
|
|
|
+ </div>
|
|
|
+ <div class="filters">
|
|
|
+ <div class="filter">
|
|
|
+ <div class="filter_name">热门城市：</div>
|
|
|
+ <div class="items fx-row">
|
|
|
+ <div class="no_limited">
|
|
|
+ <!-- no_limited 隐藏 选中框 -->
|
|
|
+ <el-checkbox @change="change('city',$event)" v-model="cityIsAll" >不限</el-checkbox>
|
|
|
+ </div>
|
|
|
+ <el-checkbox-group v-model="filter_form.checkedCities">
|
|
|
+ <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filter">
|
|
|
+ <div class="filter_name">院校省份：</div>
|
|
|
+ <div class="items fx-row">
|
|
|
+ <div class="no_limited">
|
|
|
+ <el-checkbox @change="change('province',$event)" v-model="provinceIsAll" >不限</el-checkbox>
|
|
|
+ </div>
|
|
|
+ <el-checkbox-group v-model="filter_form.provinces">
|
|
|
+ <el-checkbox v-for="city in provinces" :label="city" :key="city">{{city}}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filter">
|
|
|
+ <div class="filter_name">专业类别：</div>
|
|
|
+ <div class="items fx-row">
|
|
|
+ <div class="no_limited">
|
|
|
+ <el-checkbox @change="change('major',$event)" v-model="majorIsAll" >不限</el-checkbox>
|
|
|
+ </div>
|
|
|
+ <el-radio-group v-model="filter_form.major">
|
|
|
+ <el-radio v-for="city in majors" :label="city" :key="city">{{city}}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filter">
|
|
|
+ <div class="filter_name">意向专业：</div>
|
|
|
+ <div class="items">
|
|
|
+ <div>
|
|
|
+ <el-autocomplete class="inline-input mr10" v-model="major" placeholder="搜索意向专业"></el-autocomplete>
|
|
|
+ <el-button plain size="mini" icon="el-icon-add">添加</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filter">
|
|
|
+ <div class="filter_name">更多筛选：</div>
|
|
|
+ <div class="items">
|
|
|
+ <div class="more">
|
|
|
+ <span >
|
|
|
+ <el-button plain size="mini">志愿梯度</el-button>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <el-button plain size="mini">院校类型</el-button>
|
|
|
+ </span><span>
|
|
|
+ <el-button plain size="mini">院校特色</el-button>
|
|
|
+ </span><span>
|
|
|
+ <el-button plain size="mini">办学类型</el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filter">
|
|
|
+ <div class="filter_name">搜索专业：</div>
|
|
|
+ <div class="items">
|
|
|
+ <div>
|
|
|
+ <el-autocomplete class="inline-input mr10" v-model="major" placeholder="请输入专业名词或者专业关键词"></el-autocomplete>
|
|
|
+ <el-button plain size="mini" icon="el-icon-add">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="zhiyuan-list">
|
|
|
+
|
|
|
+ </div>
|
|
|
+<!-- <span @click="close">关闭</span>-->
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ model:{
|
|
|
+ prop: 'show',
|
|
|
+ event: 'close'
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ show: { type: Boolean },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ cities: ['北京', '上海', '深圳', '广州', '杭州', '南京', '武汉', '西安', '长沙', '重庆', '南充'],
|
|
|
+ provinces:['湖南','安徽','福建','沈阳','山东','山西','甘肃','广东','广西','重庆','上海','黑龙江','吉林','辽宁','西藏','新疆'],
|
|
|
+ majors: ['哲学','经济学','法学','教育学','文学','历史学','理学','工学','农学','医学','管理学','艺术学'],
|
|
|
+ filter_form: {
|
|
|
+ checkedCities:[],
|
|
|
+ provinces: [],
|
|
|
+ major: ''
|
|
|
+ },
|
|
|
+ major: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ cityIsAll:{
|
|
|
+ get() {
|
|
|
+ return !this.filter_form.checkedCities.length
|
|
|
+ },
|
|
|
+ set(){}
|
|
|
+ },
|
|
|
+ provinceIsAll:{
|
|
|
+ get() {
|
|
|
+ return !this.filter_form.provinces.length
|
|
|
+ },
|
|
|
+ set(){}
|
|
|
+ },
|
|
|
+ majorIsAll:{
|
|
|
+ get() {
|
|
|
+ return !this.filter_form.major
|
|
|
+ },
|
|
|
+ set(){}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ close(){
|
|
|
+ this.$emit('close',false);
|
|
|
+ },
|
|
|
+ change(val,$event) {
|
|
|
+ if($event) {
|
|
|
+ if(val == 'city') {
|
|
|
+ this.filter_form.checkedCities = []
|
|
|
+ }
|
|
|
+ if(val == 'province') {
|
|
|
+ this.filter_form.provinces = []
|
|
|
+ }
|
|
|
+ if(val == 'major') {
|
|
|
+ this.filter_form.major = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.more span {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.filters{
|
|
|
+ padding: 0 20px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+}
|
|
|
+.filter_name{
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 70px;
|
|
|
+ line-height: 20px;
|
|
|
+ flex: none;
|
|
|
+ padding: 6px 0 6px 0;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+.zhiyuan-filter .filters .filter .items .no_limited{
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.zhiyuan-filter .filters .filter .items .no_limited >>> .el-checkbox__input {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.filters .filter{
|
|
|
+ padding: 10px 0;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.zhiyuan-filter .filters .filter >>> .el-checkbox, .zhiyuan-filter .filters .filter >>> .el-radio {
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 32px;
|
|
|
+ padding: 8px 8px;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+>>> .el-input--medium .el-input__inner{
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+}
|
|
|
+>>> .el-input{
|
|
|
+ width: 260px;
|
|
|
+}
|
|
|
+</style>
|
shilipojs