模拟志愿布局

src/views/career/zhiyuan/NewSimulatedVolunteer.vue

@@ -11,17 +11,7 @@
           <div class="step-label">{{ item.label }}</div>
         </div>
       </div>
-<!--      <div class="zhiyuan-breadcrumb f14 f-666 fx-row jc-center ai-center">-->
-<!--       <i class="el-icon-location"></i>-->
-<!--        位置：-->
-<!--        <el-breadcrumb separator-class="el-icon-arrow-right">-->
-<!--        <el-breadcrumb-item>模拟志愿</el-breadcrumb-item>-->
-<!--        <el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item>-->
-<!--      </el-breadcrumb>-->
-<!--      </div>-->
-<!--      <ul class="zhiyuan-progress">-->
-<!--        <li :class="{'active': step == $route.name}" v-for="step in steps">{{ step }}</li>-->
-<!--      </ul>-->
+      <h1 class="text-center f-primary" >{{active.title}}</h1>
     </div>
     <router-view></router-view>
   </div>
@@ -31,20 +21,23 @@ export default {
   data() {
     return {
       topStep: [
-        { index: 0, label: "高考分数" },
-        { index: 1, label: "填报批次" },
-        { index: 2, label: "院校专业" },
-        { index: 3, label: "保存志愿" },
+        { index: 0, label: "高考分数",title:'(一)输入高考的成绩' },
+        { index: 1, label: "填报批次",title:'(二)选择填报批次'  },
+        { index: 2, label: "院校专业",title:'(三)选择院校专业'  },
+        { index: 3, label: "保存志愿",title:'(四)我的志愿'  },
       ],
     }
   },
   computed: {
     active() {
+      const curStep = this.topStep.find(item => {
+        return item.label == this.$route.name
+      })
+      console.log(curStep)
       return {
         name: this.$route.name,
-        index: this.topStep.findIndex(item => {
-          item.label == this.$route.name
-        }) + 1
+        index:curStep.index + 1,
+        title: curStep.title
       }
     }
   },

src/views/career/zhiyuan/components/phase.vue

@@ -11,7 +11,7 @@
         </a>
       </div>
     </div>
-    <div class="recommend-wrap" style="width: 80%">
+    <div class="recommend-wrap" >
       <div class="fx-row jc-between recommend ai-center">
         <div class="left">
           <p class="mb15 f20 bold f-666">普通类院校本科批</p>
@@ -45,7 +45,9 @@ export default {
 
 <style scoped>
  .phase {
-  padding: 0 40px 0 100px;}
+   width: 70%;
+   margin: 0 auto;
+ }
  em{
    font-weight: 400;
    font-style: normal;

src/views/career/zhiyuan/components/recommend.vue

@@ -1,43 +1,134 @@
 <template>
-  <div class="recommend">
-    <h3 class="text-center f-666 mt30">湖南2022年普通类本科批学校志愿智能模拟</h3>
-    <p class="mt10 f14">
-      <span class="mr20">您的高考成绩 (预估)</span>
-      <span class="mr20 f-primary">选科科目： <em class="f-primary">历史,生物,政治</em></span>
-      <span class="mr20">总分：<em class="f-primary">750</em> </span>
-      </p>
-    <div class="text-center mt20 mb20"><el-button type="primary" @click="show =true">开始志愿选择</el-button></div>
-    <mx-table :prop-defines="propDefines" :rows="rows"></mx-table>
-    <select-volunteer  v-model="show"></select-volunteer>
+  <div>
+    <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>-->
   </div>
 </template>
 <script>
-import SelectVolunteer from './select-volunteer'
 export default {
-  components: {SelectVolunteer},
-  created() {
-    this.form = this.$route.query
-  },
   data() {
     return {
-      form:{},
-      show: false,
-      rows: [{},{},{},{},{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},,{},{},],
-      propDefines: {
-        index: {
-          label: '',
-          type:'index'
-        },
-        volunteerGroup:{
-          label: '志愿组'
-        },
-        major:{
-          label: '专业'
-        },
-        obey:{
-          label: '是否服从其他专业',
-          width: '100px'
-        },
+      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:{
+    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 = ''
+        }
       }
     }
   }
@@ -45,18 +136,45 @@ export default {
 </script>
 
 <style scoped>
-.recommend{
-  margin: 0 auto;
-  width: 80%;
-}
-p{
-  background: #f3f3f3;
-  padding-left: 20px;
-  height: 36px;
-  line-height: 36px;
-}
-em{
-  font-weight: 400;
-  font-style: normal;
+.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>

src/views/career/zhiyuan/components/score.vue

@@ -83,8 +83,9 @@ export default {
 
 <style scoped lang="scss">
 .form{
-  position: relative;
-  padding: 40px 280px 10px 280px;
+  width: 620px;
+  padding: 40px 0;
+  margin: 0 auto;
 }
 .form {
   ::v-deep {