zy integration

.env.development

@@ -2,9 +2,9 @@
 ENV = 'development'
 
 # 名学金榜学习系统/生产环境
-VUE_APP_BASE_API = 'https://www.mingxuejinbang.com/prod-api'
+#VUE_APP_BASE_API = 'https://www.mingxuejinbang.com/prod-api'
 #VUE_APP_BASE_API = 'http://localhost:8080'
-#VUE_APP_BASE_API = 'http://back.mingxuejinbang.com/prod-api'
+VUE_APP_BASE_API = 'https://back.mingxuejinbang.com/prod-api'
 
 VUE_APP_MOBILE = "https://www.mingxuejinbang.com/h5"
 

src/api/webApi/career-news.js

@@ -2,11 +2,11 @@ import request from '@/utils/request'
 
 // 00 生涯课程类型
 export function types(params) {
-    return request({
-        url: '/front/news/types',
-        method: 'get',
-        params: params
-    })
+  return request({
+    url: '/front/news/types',
+    method: 'get',
+    params: params
+  })
 }
 
 export function typesNoToken(params) {
@@ -20,11 +20,11 @@ export function typesNoToken(params) {
 
 // 01 生涯课程列表
 export function list(params) {
-    return request({
-        url: '/front/news/list',
-        method: 'get',
-        params: params
-    })
+  return request({
+    url: '/front/news/list',
+    method: 'get',
+    params: params
+  })
 }
 
 export function listNoToken(params) {
@@ -38,32 +38,29 @@ export function listNoToken(params) {
 
 // 02 生涯课程详情
 export function info(params) {
-    return request({
-        url: '/front/news/info',
-        method: 'get',
-        params: params
-    })
+  return request({
+    url: '/front/news/info',
+    method: 'get',
+    params: params
+  })
 }
 
-
 // 01 热门院校榜单
-export function universitiesTop (params) {
-    return request({
-        url: '/front/syzy/home/universities/top',
-        method: 'get',
-        params: params
-    })
+export function universitiesTop(params) {
+  return request({
+    url: '/front/syzy/home/universities/top',
+    method: 'get',
+    params: params
+  })
 }
 
-
-
 // 02 热门专业榜单
-export function marjorsTop (params) {
-    return request({
-        url: '/front/syzy/home/marjors/top',
-        method: 'get',
-        params: params
-    })
+export function marjorsTop(params) {
+  return request({
+    url: '/front/syzy/home/marjors/top',
+    method: 'get',
+    params: params
+  })
 }
 
 // 高考视频
@@ -75,6 +72,16 @@ export function gkVideo(params) {
   })
 }
 
+// 高考视频
+export function gkVideoNoToken(params) {
+  return request({
+    url: '/front/newsVideo/listNoToken',
+    method: 'get',
+    withoutToken: true,
+    params: params
+  })
+}
+
 //  保存点击数
 export function saveClicked(params) {
   return request({
@@ -83,3 +90,11 @@ export function saveClicked(params) {
     params: params
   })
 }
+
+export function subTypes(params) {
+  return request({
+    url: '/front/newsVideo/subTypes',
+    method: 'get',
+    params: params
+  })
+}

src/api/webApi/career-other.js

@@ -1,186 +1,199 @@
-import request from "@/utils/request";
+import request from '@/utils/request'
 
-//GET
-///prod-api/front/customer/university/add
+// GET
+// /prod-api/front/customer/university/add
 // 03 关注院校
 export function concernUniversity(params) {
   return request({
-    url: "/front/customer/university/add",
-    method: "get",
+    url: '/front/customer/university/add',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET
-///prod-api/front/customer/university/list
-//01 关注院校列表
+// GET
+// /prod-api/front/customer/university/list
+// 01 关注院校列表
 export function concernedUniversities(params) {
   return request({
-    url: "/front/customer/university/list",
-    method: "get",
+    url: '/front/customer/university/list',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET
-///prod-api/front/customer/university/remove
-//02 移除关注院校
+// GET
+// /prod-api/front/customer/university/remove
+// 02 移除关注院校
 export function removeConcernedUniversity(params) {
   return request({
-    url: "/front/customer/university/remove",
-    method: "get",
+    url: '/front/customer/university/remove',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET
-///prod-api/front/customer/majors/add
+// GET
+// /prod-api/front/customer/majors/add
 // 03 关注专业
 export function addConcernMajor(params) {
   return request({
-    url: "/front/customer/marjors/add",
-    method: "get",
+    url: '/front/customer/marjors/add',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET
-///prod-api/front/customer/majors/list
-//01 关注专业列表
+// GET
+// /prod-api/front/customer/majors/list
+// 01 关注专业列表
 export function concernedMajors(params) {
   return request({
-    url: "/front/customer/marjors/list",
-    method: "get",
+    url: '/front/customer/marjors/list',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET
-///prod-api/front/customer/majors/remove
-//02 移除关注专业
+// GET
+// /prod-api/front/customer/majors/remove
+// 02 移除关注专业
 export function removeConcernedMajor(params) {
   return request({
-    url: "/front/customer/marjors/remove",
-    method: "get",
+    url: '/front/customer/marjors/remove',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-
-//GET  04 holland测评记录
+// GET  04 holland测评记录
 export function hollandRecord(params) {
   return request({
-    url: "/front/syzy/holland/record",
-    method: "get",
+    url: '/front/syzy/holland/record',
+    method: 'get',
     params: params
-  });
+  })
 }
-//GET  04 Mbti测评记录
+
+// GET  04 Mbti测评记录
 export function mbtiRecord(params) {
   return request({
-    url: "/front/syzy/mbti/record",
-    method: "get",
+    url: '/front/syzy/mbti/record',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET  04 志愿表
+// GET  04 志愿表
 export function zytbRecord(params) {
   return request({
-    url: "/front/syzy/zytb/record",
-    method: "get",
+    url: '/front/syzy/zytb/record',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET  04 高考名词
+// GET  04 高考名词
 export function list(params) {
   return request({
-    url: "/front/syzy/gkmc/list",
-    method: "get",
+    url: '/front/syzy/gkmc/list',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET  04 高考名词
+// GET  04 高考名词
 export function detail(params) {
   return request({
-    url: "/front/syzy/gkmc/detail",
-    method: "get",
+    url: '/front/syzy/gkmc/detail',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET  批次控制线 地域
+// GET  批次控制线 地域
 export function locations(params) {
   return request({
-    url: "/front/syzy/pckzx/locations",
-    method: "get",
+    url: '/front/syzy/pckzx/locations',
+    method: 'get',
     params: params
-  });
+  })
 }
-//GET  批次控制线 录取年份
+
+// GET  批次控制线 录取年份
 export function years(params) {
   return request({
-    url: "/front/syzy/pckzx/years",
-    method: "get",
+    url: '/front/syzy/pckzx/years',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET  批次控制线 列表
+// GET  批次控制线 列表
 export function pckzxList(params) {
   return request({
-    url: "/front/syzy/pckzx/list",
-    method: "get",
+    url: '/front/syzy/pckzx/list',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET  一分一段 地域
+// GET  一分一段 地域
 export function yfydLocations(params) {
   return request({
-    url: "/front/syzy/yfyd/locations",
-    method: "get",
+    url: '/front/syzy/yfyd/locations',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET  一分一段  年份
+// GET  一分一段  年份
 export function yfydYears(params) {
   return request({
-    url: "/front/syzy/yfyd/years",
-    method: "get",
+    url: '/front/syzy/yfyd/years',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-//GET  一分一段  科类
+// GET  一分一段  科类
 export function yfydModes(params) {
   return request({
-    url: "/front/syzy/yfyd/modes",
-    method: "get",
+    url: '/front/syzy/yfyd/modes',
+    method: 'get',
     params: params
-  });
+  })
 }
 
-
-//GET  一分一段  列表
+// GET  一分一段  列表
 export function yfydList(params) {
   return request({
-    url: "/front/syzy/yfyd/list",
-    method: "get",
+    url: '/front/syzy/yfyd/list',
+    method: 'get',
     params: params
-  });
+  })
+}
+
+// 等效位次转化分
+export function getEquivalentScore(query) {
+  // query: { location: '湖南', year: 2024, mode: '物理', score: 580 }
+  // returns: { match: match item in `yfyd/list`, scores: [{year: 2023, seat: -, score}] 近3年等效位次和等效分},
+  // 注，如果当前year=2023年，应该返回 23 22 21 年的等效位次和等效分；
+  // 如果当前 24年，一分一段开放前应该返回 23 22 21，一分一段开放后应该返回 24 23 22。
+  return request({
+    url: '/front/syzy/yfyd/getEquivalentScore',
+    method: 'get',
+    params: query
+  })
 }
 
 /**
  * 查询我的志愿表
  */
-export function selectZytbRecord(params){
+export function selectZytbRecord(params) {
   return request({
-    url:`/front/syzy/zytb/record`,
-    method:'get',
+    url: `/front/syzy/zytb/record`,
+    method: 'get',
     params
   })
 }
@@ -189,20 +202,30 @@ export function selectZytbRecord(params){
  * 删除我的志愿表
  * @param params
  */
-export function delZytbRecord(params){
+export function delZytbRecord(params) {
   return request({
-    url:`/front/syzy/zytb/record/del`,
-    method:'get',
+    url: `/front/syzy/zytb/record/del`,
+    method: 'get',
     params
   })
 }
 
+export function downloadRecommendReport(params) {
+  return request({
+    url: `/front/syzy/zytb/export`,
+    method: 'get',
+    responseType: 'blob',
+    params
+  })
+}
 
-
-
-
-
-
-
-
-
+export function getVoluntarySpecialProjectFilter(params) {
+  // params = { year } // 缺省年份返回当前年份的专项选项
+  // returns ['专项A', '专项B', '专项C', '不看专项']
+  // getRecommendVoluntary 新增参数specialProjects: Array // 原来的参数specialProjectNation，specialProjectLocal不动
+  return request({
+    url: `/front/syzy/zytb/specialProjectFilter`,
+    method: 'get',
+    params
+  })
+}

src/api/webApi/professlib.js

@@ -1,14 +1,11 @@
 import request from '@/utils/request'
 
-
-
-
 // 专业库-所有专业
 export function allMajor(params) {
   return request({
     url: '/front/major/getAllMajor',
     method: 'get',
-    params:params
+    params: params
   })
 }
 
@@ -17,7 +14,7 @@ export function getMajorOverviewByCode(params) {
   return request({
     url: '/front/major/getMajorOverviewByCode',
     method: 'get',
-    params:params
+    params: params
   })
 }
 
@@ -26,7 +23,7 @@ export function getMajorCareerProspectsByCode(params) {
   return request({
     url: '/front/major/getMajorCareerProspectsByCode',
     method: 'get',
-    params:params
+    params: params
   })
 }
 
@@ -35,44 +32,26 @@ export function getMajorDetailByCodes(params) {
   return request({
     url: '/front/major/getMajorDetailByCodes',
     method: 'get',
-    params:params
-  })
-}
-
-// 专业库-专业大类
-export function getProfesslibData(params) {
-  return request({
-    url: '/front/marjors/list',
-    method: 'get',
-    params:params
-  })
-}
-
-// 专业库详情
-export function getProfesslibDetails(params) {
-  return request({
-    url: 'front/marjors/detail',
-    method: 'get',
-    params:params
+    params: params
   })
 }
 
-
 // 获取推荐志愿表头
 export function getVoluntaryHeaders(params) {
   return request({
     url: 'front/syzy/zytb/getVoluntaryHeaders',
     method: 'get',
-    params:params,
+    params: params
   })
 }
+
 // 获取推荐志愿
-export function getRecommendVoluntary(data,params) {
+export function getRecommendVoluntary(data, params) {
   return request({
     url: 'front/syzy/zytb/getRecommendVoluntary',
     method: 'post',
-    data:data,
-    params:params,
+    data: data,
+    params: params
   })
 }
 
@@ -81,21 +60,32 @@ export function getVoluntaryMarjors(data) {
   return request({
     url: 'front/syzy/zytb/getVoluntaryMarjors',
     method: 'post',
-    data:data,
+    data: data
   })
 }
+
 // 保存志愿
 export function saveZhiyuan(data) {
   return request({
     url: 'front/syzy/zytb/save',
     method: 'post',
-    data:data,
+    data: data
   })
 }
 
-export function getVoluntaryData() {
+// 获取志愿明细
+export function getZhiyuanDetail(wishResId) {
+  return request({
+    url: 'front/syzy/zytb/recordDetail',
+    method: 'get',
+    params: { wishResId }
+  })
+}
+
+export function getVoluntaryData(params) {
   return request({
     url: 'front/syzy/zytb/getVoluntaryData',
-    method: 'get'
+    method: 'get',
+    params
   })
 }

src/api/webApi/shiftLine.js

@@ -3,10 +3,10 @@ import request from '@/utils/request'
 /**
  * 查询院校所在地
  */
-export function selectUniversityLocations(){
+export function selectUniversityLocations() {
   return request({
-    url:`/front/syzy/tdx/university/locations`,
-    method:'get'
+    url: `/front/syzy/tdx/university/locations`,
+    method: 'get'
   })
 }
 
@@ -14,10 +14,10 @@ export function selectUniversityLocations(){
  * 查询层次
  * @param params
  */
-export function selectUniversityLevels(params){
+export function selectUniversityLevels(params) {
   return request({
-    url:`/front/syzy/tdx/university/levels`,
-    method:'get',
+    url: `/front/syzy/tdx/university/levels`,
+    method: 'get',
     params
   })
 }
@@ -26,10 +26,10 @@ export function selectUniversityLevels(params){
  * 查询院校层次
  * @param params
  */
-export function selectUniversityTypes(params){
+export function selectUniversityTypes(params) {
   return request({
-    url:`/front/syzy/tdx/university/types`,
-    method:'get',
+    url: `/front/syzy/tdx/university/types`,
+    method: 'get',
     params
   })
 }
@@ -38,10 +38,10 @@ export function selectUniversityTypes(params){
  * 查询录取年份
  * @param params
  */
-export function selectUniversityYears (params){
+export function selectUniversityYears(params) {
   return request({
-    url:`/front/syzy/tdx/university/years`,
-    method:'get',
+    url: `/front/syzy/tdx/university/years`,
+    method: 'get',
     params
   })
 }
@@ -50,43 +50,45 @@ export function selectUniversityYears (params){
  * 查询院校数据
  * @param params
  */
-export function selectUniversityList(params){
+export function selectUniversityList(params) {
   return request({
-    url:`/front/syzy/tdx/university/list`,
-    method:'get',
+    url: `/front/syzy/tdx/university/list`,
+    method: 'get',
     params
   })
 }
+
 /**
  * 专业投档线
  * 查询院校数据
  * @param params
  */
- export function marjorSelectUniversityList (params){
+export function marjorSelectUniversityList(params) {
   return request({
-    url:`/front/university/list`,
-    method:'get',
+    url: `/front/university/list`,
+    method: 'get',
     params
   })
 }
+
 //   专业投档线
 /**
  * 查询报考年限
  */
-export function selectMarjorYears(){
+export function selectMarjorYears() {
   return request({
-    url:`/front/syzy/tdx/marjor/years`,
-    method:'get'
+    url: `/front/syzy/tdx/marjor/years`,
+    method: 'get'
   })
 }
 
 /**
  * 报考科类
  */
-export function selectMarjorTypes(params){
+export function selectMarjorTypes(params) {
   return request({
-    url:`/front/syzy/tdx/marjor/types`,
-    method:'get',
+    url: `/front/syzy/tdx/marjor/types`,
+    method: 'get',
     params
   })
 }
@@ -94,10 +96,10 @@ export function selectMarjorTypes(params){
 /**
  * 报考批次
  */
-export function selectMarjorlLevels(params){
+export function selectMarjorlLevels(params) {
   return request({
-    url:`/front/syzy/tdx/marjor/levels`,
-    method:'get',
+    url: `/front/syzy/tdx/marjor/levels`,
+    method: 'get',
     params
   })
 }
@@ -106,10 +108,10 @@ export function selectMarjorlLevels(params){
  * 查询专业数据
  * @param params
  */
-export function selectMarjorList(params){
+export function selectMarjorList(params) {
   return request({
-    url:`/front/syzy/tdx/marjor/list`,
-    method:'get',
+    url: `/front/syzy/tdx/marjor/list`,
+    method: 'get',
     params
   })
 }
@@ -118,10 +120,10 @@ export function selectMarjorList(params){
  * 招生计划列表
  * @param params
  */
-export function recruitPlan(params){
+export function recruitPlan(params) {
   return request({
-    url:`/front/syzy/recruitPlan/list`,
-    method:'get',
+    url: `/front/syzy/recruitPlan/list`,
+    method: 'get',
     params
   })
 }
@@ -130,10 +132,10 @@ export function recruitPlan(params){
  * 招生计划 年份
  * @param params
  */
-export function recruitPlanYears(params){
+export function recruitPlanYears(params) {
   return request({
-    url:`/front/syzy/recruitPlan/years`,
-    method:'get',
+    url: `/front/syzy/recruitPlan/years`,
+    method: 'get',
     params
   })
 }
@@ -142,10 +144,46 @@ export function recruitPlanYears(params){
  * 招生计划 科类
  * @param params
  */
-export function recruitPlanTypes(params){
+export function recruitPlanTypes(params) {
+  return request({
+    url: `/front/syzy/recruitPlan/types`,
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 招生计划 批次
+ * @param params
+ */
+export function recruitPlanLevels(params) {
+  return request({
+    url: `/front/syzy/recruitPlan/levels`,
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 招生计划 专业组
+ * @param params
+ */
+export function getRecruitPlanUniversityNameText(params) {
+  return request({
+    url: `/front/syzy/recruitPlan/getUniversityNameText`,
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 招生计划 专业组
+ * @param params
+ */
+export function getMajorUniversityNameText(params) {
   return request({
-    url:`/front/syzy/recruitPlan/types`,
-    method:'get',
+    url: `/front/syzy/tdx/marjor/getUniversityNameText`,
+    method: 'get',
     params
   })
 }

src/assets/styles/common.scss

@@ -688,6 +688,11 @@
   height: 60px;
 }
 
+.icon72 {
+  width: 72px;
+  height: 72px;
+}
+
 .icon80 {
   width: 80px;
   height: 80px;

src/assets/styles/variables.scss

@@ -25,13 +25,22 @@ $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
 
 $sideBarWidth: 250px;
+$hoverImageScale: 1.02;
 
 $--color-primary: #47C6A2;
+$--color-primary-active: #47C6A2;
+$--color-primary-dark: #47C6A2;
+$--background-color-base: #F5F4F9;
+$--border-color-base: #EEEEEE;
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
   theme: $--color-primary;
+  themeActive: $--color-primary-active;
   menuText: $menuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;

src/common/MxConst.js

@@ -1,5 +1,5 @@
 export default {
-  currentYear: 2023,
+  currentYear: 2025,
   mobilePattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
   keys: {
     sysToken: 'Admin-Token',

src/common/mx-extension.js

@@ -83,6 +83,12 @@ export default {
       if (!obj) return obj
       return JSON.parse(JSON.stringify(obj))
     }
+    Vue.prototype.sleep = function(delay) {
+      return new Promise(resolve => {
+        setTimeout(resolve, delay)
+      })
+    }
+
     // 动态表转objects
     Vue.prototype.reverseDynamicTableToObjects = function({ columns, rows }) {
       return rows.map(row => {

src/components/ScrollTop/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div v-show="show" class="scroll-top pointer" @click="returnTop">
+    <div class="box-in" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScrollTop',
+  props: {
+    offset: {
+      type: Number,
+      default: 350
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll', this.setScrollTopVisible)
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.setScrollTopVisible)
+  },
+  methods: {
+    setScrollTopVisible() {
+      const S = document.body.scrollTop || document.documentElement.scrollTop
+      this.show = S >= this.offset
+    },
+    returnTop() {
+      // 自定义一个计时器
+      let timer = null
+      // window自带方法 取消窗体动画
+      cancelAnimationFrame(timer)
+      // 设置一个开始时间
+      const startTime = new Date()
+      // 得到当前body标签滚动条的高度 / 当前网页的高度
+      const S = document.body.scrollTop || document.documentElement.scrollTop
+      // 停止动画的时间
+      const T = 500
+      // window自带方法 requestAnimationFrame
+      timer = requestAnimationFrame(function func() {
+        const diff = new Date() - startTime
+        const t = T - Math.max(0, T - diff)
+        // 每次回调都减掉一点点的高度，使得页面慢慢回到顶部
+        document.documentElement.scrollTop = document.body.scrollTop = S - (t * S) / T
+        // 继续回调，继续减掉滚动条的高度
+        timer = requestAnimationFrame(func)
+        // 满足条件 停止回调，这个时候网页也已经回到顶部了
+        if (t === T) {
+          cancelAnimationFrame(timer)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "scroll-top-style";
+</style>
+

src/components/ScrollTop/scroll-top-style.scss

@@ -0,0 +1,57 @@
+@import "~@/assets/styles/common.scss";
+
+$scrollTextColor: #999999;
+$scrollShadowColor: rgba($--color-primary, 0.1);
+$scrollArrowColor: rgba($--color-primary, 0.5);
+
+.scroll-top {
+  font-size: 14px;
+  position: fixed;
+  width: 52px;
+  height: 52px;
+  right: 30px;
+  bottom: 80px;
+  padding-top: 24px;
+  text-align: center;
+  background-color: #ffffff;
+  border-radius: 50%;
+  overflow: hidden;
+  -webkit-box-shadow: 0 0 4px 3px $scrollShadowColor;
+  -moz-box-shadow: 0 0 4px 3px $scrollShadowColor;
+  box-shadow: 0 0 4px 3px $scrollShadowColor;
+
+  &:hover:before {
+    top: 50%;
+  }
+
+  &:hover .box-in {
+    visibility: hidden;
+  }
+
+  &:before {
+    content: "回到顶部";
+    position: absolute;
+    font-size: 12px;
+    font-weight: bold;
+    color: $scrollTextColor;
+    width: 30px;
+    top: -50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.box-in {
+  visibility: visible;
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  border: 1px solid $scrollArrowColor;
+  border-color: $scrollArrowColor transparent transparent $scrollArrowColor;
+  transform: rotate(45deg);
+}
+
+//作者：海的对岸
+//链接：https://juejin.cn/post/7022632145281613838
+//来源：稀土掘金
+//著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

src/components/TableDraggable/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div :key="dragKey">
+    <slot />
+  </div>
+</template>
+
+<script>
+/*
+* Note by hht 2020-03-03
+* This component is used to make el-table draggable.
+* Because vue-draggable can not work fine with el-table.
+* So I use sortablejs to make el-table draggable instead.
+* The problem is :key refreshes the whole table is not a good idea,
+* But I can not find a better way to resolve sortable & el-table's cache problem.
+* Other scene we can use `vue-draggable` component in this project.
+* */
+
+/*
+* Design by hht 2020-03-03
+* 1 Use key on the root element to force table re-render.
+* 2 Use dragOptions to override default drag options. So all sortablejs options can be used.
+* 3 Use onEnd event to update table data and emit drag-change event.
+* 4 Use sortable.destroy() to destroy sortable instance after each drag.
+* 5 Use raw data of el-table as drag list, so drag-change modify and emit the same data as el-table.
+* */
+import Sortable from 'sortablejs'
+
+export default {
+  name: 'TableDraggable',
+  props: {
+    dragOptions: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      dragVersion: 0,
+      sortable: null,
+      defaultSortOptions: {
+        animation: 150,
+        ghostClass: 'table-draggable-ghost',
+        onStart: (evt) => {
+          // close all expanded rows in el-table
+          const tableRef = this.findElTable(this)
+          tableRef.store.states.expandRows = []
+        },
+        onEnd: (evt) => {
+          const tableRef = this.findElTable(this)
+          // get reference of table data
+          const list = tableRef.data
+          // update list if drag index changed, and emit drag-change event
+          if (evt.oldIndex !== evt.newIndex) {
+            // exchange list item from old index to new index
+            const item = list.splice(evt.oldIndex, 1)[0]
+            list.splice(evt.newIndex, 0, item)
+            // update version to force table re-render
+            this.dragVersion++
+            this.destroySortable()
+            // emit drag-change event
+            this.$emit('drag-change', list, evt)
+            setTimeout(() => {
+              this.initSortable()
+            }, 0)
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    dragKey() {
+      // NOTE: drag key is very important, it will force the table to re-render
+      // $forceUpdate() is not enough, so does modify table data or call other methods
+      return 'table-draggable-' + this.dragVersion
+    },
+    sortOptions() {
+      return {
+        ...this.defaultSortOptions,
+        ...this.dragOptions
+      }
+    }
+  },
+  mounted() {
+    this.initSortable()
+  },
+  methods: {
+    initSortable() {
+      this.destroySortable()
+      const tableBody = this.$el.querySelector('tbody')
+      this.sortable = Sortable.create(tableBody, this.sortOptions)
+    },
+    destroySortable() {
+      this.sortable?.destroy()
+      this.sortable = null
+    },
+    findElTable(node) {
+      if (node.$options.name === 'ElTable') {
+        return node
+      }
+      if (node.$children && node.$children.length > 0) {
+        for (let i = 0; i < node.$children.length; i++) {
+          const child = node.$children[i]
+          const table = this.findElTable(child)
+          if (table) {
+            return table
+          }
+        }
+      }
+    },
+    refresh() {
+      this.destroySortable()
+      this.initSortable()
+      this.dragVersion++
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/styles/variables.scss";
+
+.table-draggable-ghost {
+  opacity: 0.8 !important;
+  background-color: mix($--color-primary, #fff, 20%) !important;
+}
+</style>

src/components/VipGuideMore/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="fx-row fx-cen-cen">
+    <el-image :src="require('@/assets/images/nomore_unless_vip.png')" class="pointer" @click="$router.push('/pay')" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VipGuideMore'
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/dynamic-table/dynamic-table-column.vue

@@ -10,8 +10,12 @@
         {{ scope.row[column.prop] }}
       </slot>
     </template>
-    <dynamic-table-column v-for="child in visibleChildren" :key="child.prop" :column="child"
-                          :default-setting="defaultSetting">
+    <dynamic-table-column
+      v-for="child in visibleChildren"
+      :key="child.prop"
+      :column="child"
+      :default-setting="defaultSetting"
+    >
       <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
         <slot :name="slot" v-bind="scope">
           {{ scope.display }}
@@ -23,7 +27,7 @@
 
 <script>
 export default {
-  name: 'dynamic-table-column',
+  name: 'DynamicTableColumn',
   props: {
     column: { type: Object, default: () => ({ prop: '', slotBody: '', slotHeader: '', children: [] }) },
     defaultSetting: { type: Object, default: () => ({}) }

src/components/dynamic-table/index.vue

@@ -1,7 +1,11 @@
 <template>
   <el-table ref="table" :data="rows" v-bind="mergedAttrs" v-on="$listeners">
-    <dynamic-table-column v-for="column in visibleColumns" :key="column.prop" :column="column"
-                          :default-setting="columnDefaultSetting">
+    <dynamic-table-column
+      v-for="column in visibleColumns"
+      :key="column.prop || column.label"
+      :column="column"
+      :default-setting="columnDefaultSetting"
+    >
       <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
         <slot :name="slot" v-bind="scope">
           {{ scope.display }}
@@ -19,7 +23,7 @@
 import DynamicTableColumn from '@/components/dynamic-table/dynamic-table-column'
 
 export default {
-  name: 'dynamic-table',
+  name: 'DynamicTable',
   components: { DynamicTableColumn },
   props: {
     rows: { type: Array, default: () => [] },
@@ -36,7 +40,7 @@ export default {
     },
     tableCore() {
       return this.$refs.table
-    },
+    }
   }
 }
 </script>

src/layout/simple.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div class="top-container">
+      <login-header hidden-logo>
+        <el-image slot="prefix" :src="require('@/assets/logo/logo.png')" fit="contain" style="height: 24px;" class="mr5" /></login-header>
+      <login-menus :style-variables="menuOverride" show-pay-by-need />
+    </div>
+    <div class="main-container" :class="{'has-width': !isWideScreen}">
+      <div :class="{ 'fixed-header': fixedHeader }" />
+      <app-main>
+        <slot v-if="$slots.default" />
+      </app-main>
+    </div>
+  </div>
+</template>
+
+<script>
+import Layout from '@/layout/index'
+import LoginHeader from '@/views/login/components/LoginHeader'
+import LoginMenus from '@/views/login/components/LoginMenus'
+
+export default {
+  name: 'Simple',
+  components: { LoginMenus, LoginHeader },
+  extends: Layout,
+  data() {
+    return {
+      menuOverride: {
+        // '--vsMenuActiveColor': '#ACACAC',
+        // '--vsMenuBgColor': '#BDBDBD',
+        '--vsMenuFontSize': '15px',
+        '--vsMenuFontWeight': '400',
+        // '--vsMenuColor': '#333333',
+        '--vsSubmenuFontSize': '14px',
+        '--vsSubmenuFontWeight': '400'
+        // '--vsSubmenuColor': '#333333'
+        // '--vsPopMenuBgColor': '255,255,255,0.9'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -686,7 +686,7 @@ export const constantRoutes = [{
       },
       {
         path: '/career/plan/UniversityDetail',
-        component: (resolve) => require(['@/views/career/plan/UniversitiesDetail'], resolve),
+        component: (resolve) => require(['@/views/career/LibraryCollege/UniversitiesDetail'], resolve),
         name: 'UniversityDetail',
         meta: {
           title: '生涯评测-院校详情',

src/store/getters.js

@@ -1,3 +1,5 @@
+import MxConst from '@/common/MxConst'
+
 const getters = {
   sidebar: state => state.app.sidebar,
   size: state => state.app.size,
@@ -11,6 +13,13 @@ const getters = {
   name: state => state.user.userName,
   nickName: state => state.user.nickName,
   introduction: state => state.user.introduction,
+  isBind: (state, getters) => getters.currentUser.isBind == 1,
+  isMobileBind: (state, getters) => getters.isBind || MxConst.mobilePattern.test(getters.currentUser.phonenumber),
+  isCardBind: (state, getters) => getters.isBind || !getters.isMobileBind,
+  scoreLocked: (state) => state.user.scoreLock == MxConst.enum.scoreLock.locked,
+  scoreUnlock: (state) => state.user.scoreLock == MxConst.enum.scoreLock.unlock,
+  isPreEnrollSupport: (state, getters) => ['湖南', '江西'].includes(getters.currentUser.provinceName),
+  isPreEnrollFormatted: (state, getters) => true,
   school: state => state.user.busiSchool?.first(),
   schoolName: (state, getters) => getters.school?.schoolName,
   firstGradeName: (state, getters) => getters.school?.grade?.first().gradeName,

src/store/index.js

@@ -7,6 +7,7 @@ import tagsView from './modules/tagsView'
 import permission from './modules/mx-permission'
 import settings from './modules/settings'
 import getters from './getters'
+import cachedData from './modules/cachedData'
 
 Vue.use(Vuex)
 
@@ -17,7 +18,8 @@ const store = new Vuex.Store({
     dict,
     tagsView,
     permission,
-    settings
+    settings,
+    cachedData
   },
   getters
 })

src/store/modules/UserInterceptors.js

@@ -0,0 +1,44 @@
+import { MessageBox } from 'element-ui'
+import router from '@/router'
+import MxConst from '@/common/MxConst'
+import MxConfig from '@/common/MxConfig'
+
+const checkMobileBind = async function(state, getters, ignore) {
+  // 暂无需求乎略手机号绑定校验
+  // 卡号登陆需要绑定手机
+  const isBinding = window.location.href.endsWith('/bind')
+  if (!isBinding && !getters.isBind && !getters.isMobileBind) {
+    setTimeout(async() => {
+      const msg = '您的账号还没有绑定手机，请先完善基础信息'
+      await MessageBox.alert(msg, { type: 'warning', showClose: false })
+      router.push('/bind')
+    }, 200)
+    return false
+  }
+  return true
+}
+
+const checkScoreLocked = async function(state, getters, ignore) {
+  if (ignore) return true // 注册时不作score-lock校验
+  // 锁分时段需要强制先进入个人中心确认高考成绩)
+  const { scoreLock, scoreLockingMsg } = state
+  if (scoreLock == MxConst.enum.scoreLock.locking) {
+    setTimeout(async() => {
+      const msg = scoreLockingMsg || MxConfig.scoreLockingTips
+      await MessageBox.alert(msg, { type: 'warning', showClose: false })
+      router.push('/user/info/userinfo')
+    }, 200)
+    return false
+  }
+  return true
+}
+
+export default {
+  async execute(state, getters, registering) {
+    const interceptors = [checkMobileBind, checkScoreLocked]
+    for (const interceptor of interceptors) {
+      const result = await interceptor(state, getters, registering)
+      if (!result) return Promise.reject(false)
+    }
+  }
+}

src/store/modules/cachedData.js

@@ -0,0 +1,89 @@
+
+import Vue from 'vue'
+import { getPreTree } from '@/api/webApi/prev-batch'
+import { allMajor, getVoluntaryData } from '@/api/webApi/professlib'
+
+const state = {
+  // 用于存储全局缓存的数据
+  cacheContainer: {},
+  // 例如：专业树、职业树、提前批类别树
+  preTree: [],
+  // 专业的1，2，3级树
+  majorFullTree: [],
+  // 高考配置
+  voluntaryData: {}
+}
+
+const mutations = {
+  SET_PRE_TREE: function(state, keyValuePair) {
+    Vue.set(state.cacheContainer, keyValuePair.key, keyValuePair.value)
+    state.preTree = keyValuePair.value
+  },
+  SET_MAJOR_FULL_TREE: function(state, keyValuePair) {
+    Vue.set(state.cacheContainer, keyValuePair.key, keyValuePair.value)
+    state.majorFullTree = keyValuePair.value
+  },
+  SET_VOLUNTARY_DATA: function(state, keyValuePair) {
+    Vue.set(state.cacheContainer, keyValuePair.key, keyValuePair.value)
+    state.voluntaryData = keyValuePair.value
+  },
+  CLEAR_CACHED_DATA: function(state) {
+    // NOTE: 这里在用户每次登陆时会被调用
+    state.preTree = []
+    state.majorFullTree = []
+    state.voluntaryData = {}
+    Object.keys(state.cacheContainer).forEach(key => {
+      Vue.delete(state.cacheContainer, key)
+    })
+    console.log('cache container cleared')
+  }
+}
+
+const actions = {
+  clearAll: function({ commit }) {
+    commit('CLEAR_CACHED_DATA')
+  },
+  ensurePreTree({ state, commit }, params) {
+    const key = 'prevTree_' + JSON.stringify(params)
+    if (!Object.hasOwnProperty.call(state.cacheContainer, key)) {
+      getPreTree(params).then(res => {
+        const tree = Vue.prototype.convertStandardTree(res.data, 'name', 'code')
+        commit('SET_PRE_TREE', { key, value: tree })
+      })
+    } else {
+      commit('SET_PRE_TREE', { key, value: state.cacheContainer[key] })
+    }
+  },
+  ensureMajorFullTree({ state, commit }, params) {
+    // level & batch force to number, make cache key exactly.
+    if (params.level) params.level = params.level * 1
+    if (params.batch) params.batch = params.batch * 1
+    const key = 'majorFullTree_' + JSON.stringify(params)
+    if (!Object.hasOwnProperty.call(state.cacheContainer, key)) {
+      allMajor(params).then(res => {
+        const tree = res.data
+        commit('SET_MAJOR_FULL_TREE', { key, value: tree })
+        console.log('set major full tree', key, tree)
+      })
+    } else {
+      commit('SET_MAJOR_FULL_TREE', { key, value: state.cacheContainer[key] })
+    }
+  },
+  ensureVoluntaryData({ state, commit }, params) {
+    const key = 'voluntaryData_' + JSON.stringify(params)
+    if (!Object.hasOwnProperty.call(state.cacheContainer, key)) {
+      getVoluntaryData(params).then(res => {
+        commit('SET_VOLUNTARY_DATA', { key, value: res.data })
+      })
+    } else {
+      commit('SET_VOLUNTARY_DATA', { key, value: state.cacheContainer[key] })
+    }
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/utils/index.js

@@ -473,3 +473,11 @@ export function formatDuration(totalSeconds, short = true) {
     return month + '月' + day + '天' + hours + '小时' + minutes + '分' + seconds + '秒'
   }
 }
+
+export function createInjectDefaultClosure(defVal) {
+  return {
+    default: function() {
+      return () => defVal
+    }
+  }
+}

src/views/career/GlobalVoluntaryDataMixin.js

@@ -0,0 +1,13 @@
+import { mapActions, mapState } from 'vuex'
+
+export default {
+  computed: {
+    ...mapState({ voluntaryData: state => state.cachedData.voluntaryData }),
+    isNewGaokao() {
+      return !!this.voluntaryData?.isNewGaokao
+    }
+  },
+  methods: {
+    ...mapActions({ 'ensureVoluntaryData': 'cachedData/ensureVoluntaryData' })
+  }
+}

src/views/career/LibraryCollege/Tabs/CollegeProfile.vue

@@ -0,0 +1,211 @@
+<template>
+  <div>
+    <el-row class="fx-row">
+      <el-col :span="8">
+        <el-image :src="baseInfo.bannerUrl" fit="cover" alt="" />
+      </el-col>
+      <el-col :span="16">
+        <university-icons :base-info="baseInfo" />
+        <div class="mt10  pl10 f14">
+          <span class="info-tips"> {{ baseInfo.introduction }}</span>
+          <p class="text-right mr10">
+            <el-button type="text" @click="dialogVisible = true">全部</el-button>
+          </p>
+        </div>
+      </el-col>
+    </el-row>
+    <div style="width: 90%">
+      <div v-if="formatProfessions.length" class="mt20">
+        <p class="format-tit">特色专业</p>
+        <mx-table border :prop-defines="professionsProps" :rows="formatProfessions">
+          <template #tmp="{row}">
+            <div class="major-wrap">
+              <a
+                v-for="(item,idx) in row.majors"
+                :key="item.code+idx"
+                @click="toMajorDetail(item.code)"
+              >{{ item.name }}</a>
+            </div>
+          </template>
+        </mx-table>
+      </div>
+      <div v-if="Object.keys(subjects).length" class="mt20">
+        <p class="format-tit">重点学科</p>
+        <mx-table border :prop-defines="keySubjectProp" :rows="subjects.keySubjects">
+          <template #tmp="{row}">
+            <div class="major-wrap">
+              <span v-for="(item,idx) in row.subjects" :key="item+idx">{{ item }}</span>
+            </div>
+          </template>
+        </mx-table>
+      </div>
+      <div v-if="Object.keys(activeSyl).length" class="mt20">
+        <p class="format-tit">双一流学科</p>
+        <el-select v-model="activeSylId" placeholder="placeholder">
+          <el-option
+            v-for="(item,idx) in subjects.sylSubjectsGroup"
+            :key="item.id+idx"
+            :label="item.evaluations"
+            :value="item.id"
+          />
+        </el-select>
+        <mx-table border class="mt10" :prop-defines="activeSyl.col" :rows="activeSyl.row">
+          <template #tmp="{row}">
+            <div class="major-wrap">
+              <span v-for="(item,idx) in row.subjects" :key="item+idx">{{ item }}</span>
+            </div>
+          </template>
+        </mx-table>
+      </div>
+      <div v-if="subjectevaluates.length" class="mt20">
+        <p class="format-tit">学科评估</p>
+        <el-select v-model="evaluate_type" placeholder="placeholder">
+          <el-option
+            v-for="item in evaluateTypes"
+            :key="item.dictValue"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          />
+        </el-select>
+        <mx-table border class="mt10" :prop-defines="activeEvaluate.col" :rows="activeEvaluate.row">
+          <template #level="{row}">
+            <div v-if="row.level.length" class="major-wrap">
+              <span v-for="(item,idx) in row.level" :key="item.name+idx">{{ item.name }}{{ item.level }}</span>
+            </div>
+            <p v-else>
+              暂无数据
+            </p>
+          </template>
+        </mx-table>
+      </div>
+      <div class="mt20">
+        <p class="format-tit">院系设置</p>
+        <mx-table border :prop-defines="collegeProps" :rows="departments">
+          <template #tmp="{row}">
+            <div class="major-wrap">
+              <a v-for="(item,idx) in row.departmentMajor" :key="item.code+idx" @click="toMajorDetail(item.code)">{{
+                item.name
+              }}</a>
+            </div>
+          </template>
+        </mx-table>
+      </div>
+      <div v-if="employmentreports.length" class="mt20">
+        <p class="format-tit">就业报告</p>
+        <div class="fx-column f-333">
+          <div
+            v-for="(item, idx) in employmentreports"
+            :key="idx"
+            class="fx-row fx-bet-cen pt12 pb12"
+            :class="{'bd-top-dashed-2':idx>0}"
+          >
+            <div class="fx-1">
+              <span class="pointer" @click="toWindow(item.webSite)">{{ item.title }}</span>
+            </div>
+            <span v-if="item.url" class="pointer mr60" @click="toWindow(item.url)">
+              <i class="el-icon-edit mr5" />在线预览</span>
+            <span v-if="item.url" class="pointer" @click="toWindow(item.url)">
+              <i class="el-icon-download mr5" />下载附件</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 院校完整介绍 -->
+    <el-dialog :visible.sync="dialogVisible" width="70%">
+      <span class="f20 f-666">{{ baseInfo.name }}院校介绍</span>
+      <div class="mt15">
+        {{ baseInfo.introduction }}
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import UniversityIcons from '@/views/career/plan/components/UniversityDetail/UniversityIcons'
+import { evaluateType } from '@/api/webApi/career-course'
+import UniversityDetailData from '@/views/career/LibraryCollege/UniversityDetailData'
+
+export default {
+  name: 'CollegeProfile',
+  components: { UniversityIcons },
+  mixins: [UniversityDetailData],
+  props: {
+    code: {
+      type: String,
+      default: ''
+    },
+    detailData: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      evaluateTypes: [],
+      evaluate_type: '',
+      dialogVisible: false,
+      professionsProps: {
+        level: {
+          label: '专业层次',
+          width: '200'
+        },
+        count: {
+          label: '数量',
+          width: '100'
+        },
+        majors: {
+          label: '专业',
+          slot: 'tmp',
+          align: 'left'
+        }
+      },
+      collegeProps: {
+        name: {
+          label: '学院',
+          width: '200'
+        },
+        departmentMajor: {
+          label: '包含专业',
+          slot: 'tmp',
+          align: 'left'
+        }
+      },
+      keySubjectProp: {
+        typeName: {
+          label: '类别',
+          width: '100'
+        },
+        subjects: {
+          label: '专业',
+          slot: 'tmp',
+          align: 'left'
+        },
+        category: {
+          label: '学科类别',
+          width: '100'
+        }
+      }
+    }
+  },
+  computed: {},
+  mounted() {
+    this.activeSylId = this.sylSubjectsGroup?.first()?.id
+    this.getEvaluateType()
+  },
+  methods: {
+    getEvaluateType() {
+      evaluateType({ code: this.code }).then(res => {
+        this.evaluateTypes = res.data
+        this.evaluate_type = res.data[0].dictValue
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/career/LibraryCollege/UniversitiesColleges.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="bg-page fx-column fx-cen-cen app-container">
+    <career-title-card name="院校库" english="UNIVERSITIES AND COLLEGES"/>
+    <el-card shadow="never" class="vs-index-card">
+      <div class="radioInput">
+        <span class="radioTitle" :class="filter_type == 'all'?'active' : ''" @click="filter_type= 'all'">全部院校</span>
+        <span class="radioTitle" :class="filter_type == 'top'?'active' : ''" @click="filter_type= 'top'">大学排名</span>
+      </div>
+      <keep-alive>
+        <all-university v-if="filter_type == 'all'"/>
+      </keep-alive>
+      <keep-alive>
+        <rank-university v-if="filter_type == 'top'"/>
+      </keep-alive>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import AllUniversity from '@/views/career/plan/components/AllUniversity'
+import RankUniversity from '@/views/career/plan/components/RankUniversity'
+import TransferMixin from '@/components/TransferMixin'
+import CareerTitleCard from '@/views/career/components/CareerTitleCard'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+
+export default {
+  name: 'UniversitiesColleges',
+  // eslint-disable-next-line vue/no-unused-components
+  components: {IndexCard, CareerTitleCard, AllUniversity, RankUniversity},
+  mixins: [TransferMixin],
+  data() {
+    return {
+      filter_type: 'all'
+    }
+  },
+  created() {
+    const supports = ['all', 'top']
+    const requestTab = this.prevData.tab
+    if (supports.includes(requestTab)) this.filter_type = requestTab
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.radioInput {
+  background-color: #ffffff;
+  padding: 0 30px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid var(--themeColor);
+
+  .radioTitle {
+    cursor: pointer;
+    display: inline-block;
+    font-size: 24px;
+    font-weight: 500;
+    padding: 8px 25px;
+    text-align: center;
+    color: #333333;
+
+    &:hover {
+      color: var(--themeColor);
+    }
+
+    &.active {
+      color: #fff;
+      border-radius: 4px 4px 0 0;
+      border: none;
+      font-weight: 700;
+      background: var(--themeColor);
+    }
+  }
+}
+</style>

src/views/career/LibraryCollege/UniversitiesDetail.vue

@@ -0,0 +1,211 @@
+<template>
+  <div id="universityDetail" v-loading="loading" class="bg-page fx-column fx-cen-cen app-container">
+    <index-card v-if="baseInfo" class="width100">
+      <div slot="title" class="fx-row fx-sta-cen">
+        <img class="pointer icon72" :src="baseInfo.logo" alt="" @click="toWindow(baseInfo.url)">
+        <div class="fx-column ml30">
+          <span class="f24 bold pf">{{ baseInfo.name }}</span>
+          <div class="mt5 mb5">
+            <el-tag v-for="item in formatFeatures" :key="item" class="mr5" size="mini">{{ item }}</el-tag>
+          </div>
+          <span class="f14 f-666">{{ formatLongInfo }}</span>
+        </div>
+      </div>
+      <el-button slot="more" v-has-history size="small" round @click="$router.back()">返回</el-button>
+      <!--Body-->
+      <div class="tabs-wrap mb20">
+        <span
+          v-for="(tab, index) in tabs"
+          :key="tab"
+          class="tabs-item"
+          :class="{'bg-primary':tabActive == index}"
+          @click="tabActive = index"
+        >{{ tab }}</span>
+      </div>
+      <!-- 院校概况 -->
+      <keep-alive>
+        <college-profile v-if="tabActive == 0" :code="code" :detail-data="detailData" />
+      </keep-alive>
+      <!-- 招生简章 -->
+      <keep-alive>
+        <enroll-list v-if="tabActive == 1" :code="code" />
+      </keep-alive>
+      <!-- 院校风采 -->
+      <keep-alive>
+        <university-style v-if="tabActive == 2" :code="code" />
+      </keep-alive>
+      <!-- 院校投档线 -->
+      <keep-alive>
+        <universities-line v-if="tabActive==3" :university-code="code" disabled-name-link disabled-level />
+      </keep-alive>
+      <!-- 专业投档线 -->
+      <keep-alive>
+        <colleges-line v-if="tabActive==4" :university-code="code" disabled-name-link />
+      </keep-alive>
+      <!-- 招生计划 -->
+      <keep-alive>
+        <enroll-plan-content v-if="tabActive == 5" :form="enrollForm" disabled-name-link />
+      </keep-alive>
+      <!--   提前批 招生计划   -->
+      <keep-alive>
+        <prev-enroll-plan v-if="tabActive==6&&!isPreEnrollFormatted" :category="prevCategory" :university-code="code" />
+        <prev-enroll-plan-v2 v-if="tabActive==6&&isPreEnrollFormatted" :category="prevCategory" :university-code="code" />
+      </keep-alive>
+      <!--   提前批 投档线   -->
+      <keep-alive>
+        <prev-shift-line v-if="tabActive==7&&isPreEnrollSupport" :category="prevCategory" :university-code="code" />
+        <prev-shift-line-v2 v-if="tabActive==7&&!isPreEnrollSupport" :category="prevCategory" :university-code="code" />
+      </keep-alive>
+    </index-card>
+    <scroll-top />
+  </div>
+</template>
+
+<script>
+import EnrollList from '../plan/components/EnrollList'
+import UniversityStyle from '../plan/components/UniversityDetail/UniversityStyle'
+import { selectUniversityDetail } from '@/api/webApi/career-course'
+import transferMixin from '@/components/mx-transfer-mixin'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+import ScrollTop from '@/components/ScrollTop/index'
+import CollegeProfile from '@/views/career/LibraryCollege/Tabs/CollegeProfile'
+import UniversityDetailData from '@/views/career/LibraryCollege/UniversityDetailData'
+import EnrollPlanContent from '@/views/career/plan/components/EnrollPlanContent'
+import CollegesLine from '@/views/career/components/CollegesLine'
+import UniversitiesLine from '@/views/career/components/UniversitiesLine'
+import { mapGetters } from 'vuex'
+import PrevEnrollPlan from '@/views/career/PrevBatch/PrevEnrollPlan.vue'
+import PrevEnrollPlanV2 from '@/views/career/PrevBatch/PrevEnrollPlanV2.vue'
+import PrevShiftLine from '@/views/career/PrevBatch/PrevShiftLine.vue'
+import PrevShiftLineV2 from '@/views/career/PrevBatch/PrevShiftLineV2.vue'
+import MxConst from '@/common/MxConst'
+
+export default {
+  name: 'UniversityDetail',
+  components: {
+    PrevShiftLineV2,
+    PrevShiftLine,
+    PrevEnrollPlanV2,
+    PrevEnrollPlan,
+    UniversitiesLine,
+    CollegesLine,
+    EnrollPlanContent,
+    CollegeProfile,
+    ScrollTop,
+    IndexCard,
+    EnrollList,
+    UniversityStyle
+  },
+  mixins: [transferMixin, UniversityDetailData],
+  data() {
+    return {
+      code: '',
+      tabs: ['院校概况', '招生简章', '院校风采', '院校投档线', '专业投档线', '招生计划', '特殊批招生计划', '特殊批投档线'],
+      tabActive: 0,
+      loading: false,
+      detailData: null,
+      enrollForm: {
+        universityCode: '',
+        year: '',
+        type: '',
+        level: '',
+        universityNameText: ''
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['isPreEnrollSupport', 'isPreEnrollFormatted']),
+    prevCategory() {
+      return '' // this.isPreEnrollSupport ? MxConst.enum.recruitPlanCategory.common : ''
+    }
+  },
+  mounted() {
+    this.code = this.prevData.code
+    this.tabActive = (this.prevData.tab || 0) * 1
+    this.enrollForm.universityCode = this.code
+    this.loadUniversityDetail()
+  },
+  methods: {
+    loadUniversityDetail() {
+      selectUniversityDetail({ code: this.code }).then(res => this.detailData = res.data)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#universityDetail {
+  .tabs-wrap {
+    border-bottom: 1px solid var(--themeColor);
+    height: 40px;
+
+    .tabs-item {
+      cursor: pointer;
+      padding: 0 24px;
+      border-radius: 4px 4px 0 0;
+      display: inline-block;
+      line-height: 40px;
+
+      &:hover {
+        color: var(--themeColor);
+      }
+
+      &.bg-primary {
+        background: var(--themeColor);
+        color: white;
+      }
+    }
+  }
+
+  .format-tit {
+    border-left: 4px solid var(--themeColor);
+    padding-left: 10px;
+    margin-bottom: 20px;
+    font-size: 20px;
+  }
+
+  .info-tips {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
+  }
+
+  .list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #f2f2f2;
+    font-size: 14px;
+    padding-bottom: 10px;
+
+    .url:hover {
+      color: var(--themeColor);
+    }
+  }
+
+  .major-wrap {
+    text-align: left;
+
+    span {
+      display: inline-block;
+      margin-right: 20px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
+    a {
+      display: inline-block;
+      margin-right: 20px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+
+      &:hover {
+        color: var(--themeColor);
+      }
+    }
+  }
+}
+</style>

src/views/career/LibraryCollege/UniversityDetailData.js

@@ -0,0 +1,111 @@
+export default {
+  data() {
+    return {
+      activeSylId: ''
+    }
+  },
+  computed: {
+    baseInfo() {
+      return this.detailData?.baseInfo
+    },
+    departments() {
+      return this.detailData?.departments
+    },
+    professions() {
+      return this.detailData?.professions
+    },
+    subjects() {
+      return this.detailData?.subjects
+    },
+    subjectevaluates() {
+      return this.detailData?.subjectevaluates
+    },
+    employmentreports() {
+      return this.detailData?.employmentreports
+    },
+    sylSubjectsGroup() {
+      return this.subjects?.sylSubjectsGroup
+    },
+    formatFeatures() {
+      return this.baseInfo?.features?.split(',') || []
+    },
+    formatLongInfo() {
+      if (!this.baseInfo) return ''
+      const bi = this.baseInfo
+      return `${bi.location} ${bi.cityName} ${bi.type} / ${bi.natureTypeCN} / ${bi.managerType} `
+    },
+    formatProfessions() {
+      const arr = []
+      for (const key in this.professions) {
+        const item = {
+          level: key == 'country' ? '国家级' : '省级(直辖市)',
+          count: this.professions[key].length,
+          majors: this.professions[key]
+        }
+        arr.push(item)
+      }
+      return arr
+    },
+    activeEvaluate() {
+      const currentRow = this.subjectevaluates.filter(item => {
+        return item.extTypeId == this.evaluate_type
+      })
+      const row = {
+        count: currentRow.length || '-',
+        level: currentRow
+      }
+      return {
+        row: [row],
+        col: {
+          count: {
+            label: '数量',
+            width: '100'
+          },
+          level: {
+            label: ' 专业评级',
+            align: 'left',
+            slot: 'level'
+          }
+        }
+      }
+    },
+    activeSyl() {
+      if (!this.subjects['sylSubjectsGroup']) return {}
+      // const col = this.
+      const row = this.subjects.sylSubjectsGroup.find(item => {
+        return item.id == this.activeSylId
+      })
+      return {
+        col: {
+          subjectCount: {
+            label: '数量',
+            width: 100
+          },
+          subjects: {
+            label: '学科',
+            slot: 'tmp',
+            align: 'left'
+          },
+          typeName: {
+            label: '类别',
+            width: '100'
+          }
+        },
+        row: [row]
+      }
+    }
+  },
+  watch: {
+    sylSubjectsGroup: function(val) {
+      this.activeSylId = this.sylSubjectsGroup?.first()?.id
+    }
+  },
+  methods: {
+    toWindow(url) {
+      window.open(url, '_blank')
+    },
+    toMajorDetail(code) {
+      this.$router.push({ path: '/career/plan/MajorDetail', query: { code: code }})
+    }
+  }
+}

src/views/career/LibraryMajor/MajorDetail.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="app-container professDetail">
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <el-tabs type="border-card" :value="type" stretch @tab-click="tabClick">
+          <el-tab-pane label="本科" name="本科" />
+          <el-tab-pane label="专科" name="专科" />
+          <el-tree
+            ref="tree"
+            :data="majorList"
+            node-key="code"
+            :default-checked-keys="[code]"
+            :default-expanded-keys="[code]"
+            :props="defaultProps"
+            :current-node-key="code"
+            :is-leaf="isLeaf"
+            @node-click="handleNodeClick"
+          >
+            <p slot-scope="{node, data}" class="custom-tree-node text-ellipsis" :title="node.label">
+              <span>{{ node.label }}</span>
+              <span>{{ data.children ? data.children.length : '' }}</span>
+            </p>
+          </el-tree>
+        </el-tabs>
+      </el-col>
+      <el-col :span="18">
+        <index-card :title="majorDetail.name" :sub-title="`国标代码${majorDetail.code}(不可用于填报)`">
+          <el-button slot="more" size="small" round @click="$router.go(-1)">返回</el-button>
+          <div class="relative">
+            <div class="absolute" style="right:0">
+              <el-button v-if="majorDetail.isCollect" type="primary" round plain @click="toUnCollect">
+                <i class="iconfont icon-yiguanzhu" /> 已收藏
+              </el-button>
+              <el-button v-else type="primary" round plain @click="toCollect">
+                <i class="iconfont icon-guanzhu" /> 收藏
+              </el-button>
+            </div>
+          </div>
+          <div class="tabs-wrap mt30">
+            <span class="tabs-item" :class="{'bg-primary':tabActive == 0}" @click="tabActive = 0">专业概况</span>
+            <span class="tabs-item" :class="{'bg-primary':tabActive == 1}" @click="tabActive = 1">就业前景</span>
+            <span
+              v-if="true||majorDetail.eduLevel == 'ben'"
+              class="tabs-item"
+              :class="{'bg-primary':tabActive == 2}"
+              @click="tabActive = 2"
+            >开设院校</span>
+          </div>
+          <div class="line" />
+          <div
+            v-show="loading"
+            v-loading="loading"
+            class="loading-div"
+            :style="{height:windowHeight + 'px'}"
+          />
+          <div class="content-wrap mt20">
+            <!-- 专业概况  -->
+            <major-introduce-info v-if="tabActive==0" :major-detail="majorDetail" />
+            <!--  就业岗位-->
+            <major-introduce-job v-if="tabActive==1&&prospects" :prospects="prospects" />
+            <!--  开设院校-->
+            <open-college v-if="tabActive == 2 " :code="code" />
+            <div v-if="tabActive == 1 && !prospects">
+              {{ desc }}
+            </div>
+          </div>
+        </index-card>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+<script>
+import { getMajorCareerProspectsByCode, getMajorOverviewByCode } from '@/api/webApi/professlib'
+import MxMajorTreeTranslateMixin from '@/components/Cache/modules/mx-major-tree-translate-mixin'
+import OpenCollege from '@/views/career/plan/components/OpenCollege'
+import { addConcernMajor, removeConcernedMajor } from '@/api/webApi/career-other'
+import MajorIntroduceInfo from '@/views/career/plan/components/major-introduce-info'
+import MajorIntroduceJob from '@/views/career/plan/components/major-introduce-job'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+
+export default {
+  name: 'MajorDetail',
+  components: {
+    IndexCard,
+    MajorIntroduceJob,
+    MajorIntroduceInfo,
+    OpenCollege
+  },
+  mixins: [MxMajorTreeTranslateMixin],
+  data() {
+    return {
+      desc: '',
+      loading: false,
+      code: '',
+      tabActive: 0,
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      type: '本科',
+      majorDetail: {
+        name: '',
+        code: ''
+      }, // 概况
+      prospects: {
+        vocationalDistribution: [],
+        industryDistribution: [],
+        jobRegionDistribution: [],
+        description: []
+      }, // 前景
+      windowHeight: document.documentElement.clientHeight
+    }
+  },
+  computed: {
+    majorList() {
+      if (this.type == '本科') return this.masterMajorList
+      if (this.type == '专科') return this.specialtyMajorList
+      return []
+    }
+  },
+  watch: {
+    tabActive: {
+      handler(newVal) {
+        // 2 院校 1 前景 0 概览
+        if (newVal == 0) this.getOverView()
+        if (newVal == 1) this.getCareerProspects()
+      }
+    }
+  },
+  created() {
+    this.code = this.$route.query.code
+    this.type = this.$route.query.type || '本科'
+    if (this.$route.query.code) {
+      this.getOverView()
+    }
+  },
+  mounted() {
+    this.$refs.tree.setCurrentKey(this.code)
+  },
+  methods: {
+    toCollect() {
+      addConcernMajor({ code: this.majorDetail.code }).then(res => {
+        this.$message.success('收藏成功')
+        this.majorDetail.isCollect = true
+      })
+    },
+    toUnCollect() {
+      removeConcernedMajor({ code: this.majorDetail.code }).then(res => {
+        this.$message.success('移除收藏成功')
+        this.majorDetail.isCollect = false
+      })
+    },
+    handleNodeClick(data, node) {
+      if (!node.isLeaf || this.code == node.data.code) return
+      // 跳转
+      this.code = node.data.code
+      this.tabActive = 0
+      this.getOverView()
+    },
+    isLeaf(data, node) {
+      return node.childCount == 0
+    },
+    tabClick(type) {
+      this.type = type.name
+    },
+    getCareerProspects() {
+      this.loading = true
+      getMajorCareerProspectsByCode({
+        code: this.code
+      }).then(res => {
+        this.prospects = res.data
+        this.desc = res.msg
+      }).finally(_ => {
+        this.loading = false
+      })
+    },
+    getOverView() {
+      this.loading = true
+      getMajorOverviewByCode({
+        code: this.code
+      }).then(res => {
+        this.majorDetail = res.data
+      }).finally(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "~@/assets/styles/common.scss";
+
+.header-content {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba($--color-primary, 0.1);
+}
+
+.custom-tree-node {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+}
+
+.tabs-wrap {
+  height: 40px;
+
+  .tabs-item {
+    cursor: pointer;
+    padding: 0 33px;
+    border-radius: 4px 4px 0 0;
+    display: inline-block;
+    line-height: 40px;
+
+    &:hover {
+      color: var(--themeColor);
+    }
+
+    &.bg-primary {
+      background: var(--themeColor);
+      color: white;
+    }
+  }
+}
+
+.bg-primary {
+  background: var(--themeColor) !important;
+  color: white;
+}
+
+.el-tabs--border-card {
+  box-shadow: none;
+  -webkit-box-shadow: none;
+}
+
+.el-tabs--border-card ::v-deep .el-tabs__content {
+  height: calc(100vh - 152px);
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+::v-deep .el-tree-node.is-current > .el-tree-node__content {
+  background: rgba(22, 119, 255, 0.1);
+  color: var(--themeColor);
+
+  ::v-deep .is-leaf {
+    color: rgba(0, 0, 0, 0);
+  }
+}
+</style>
+

src/views/career/LibraryMajor/MajorIndex.vue

@@ -0,0 +1,208 @@
+<template>
+  <div ref="vocation" class="bg-page fx-column fx-cen-cen majorlib app-container">
+    <career-title-card name="专业库" english="MAJOR LIBRARY"/>
+    <index-card>
+      <div slot="title" class="fx-1">
+        <span class="tabs-item" :class="{'bg-primary':type == '本科'}" @click="type = '本科'">本科</span>
+        <span class="tabs-item" :class="{'bg-primary':type == '专科'}" @click="type = '专科'">专科</span>
+        <div class="line"/>
+        <div class="tags-wrap">
+          <a v-for="item in levelOne" :key="item.code" class="tag" @click="returnTop(item.code)">{{ item.name }}</a>
+        </div>
+      </div>
+      <div class="list-wrap">
+        <!--  一级 -->
+        <div v-for="item in majorList" :id="`#${item.code}`" :key="item.code" class="levelOne">
+          <!--   一级专业title-->
+          <p class="voca-title mt10 mb10"><span class="primaryColor bold">{{
+              `${item.name} (${item.code}) `
+            }} </span><span class="f14 f-666">{{ `${item.childCount}个专业类，${item.grandchildCount}个专业` }}</span>
+          </p>
+          <div v-for="subLevel in item.children" :key="subLevel.code" class="last-level">
+            <!--  二级专业 -->
+            <p class="sub-title">{{ `${subLevel.name} (${subLevel.code}) ` }}</p>
+            <!--  三级专业 -->
+            <div v-if="subLevel.children.length > 0" class="last-children-wrap">
+                <span
+                  v-for="vocation in subLevel.children"
+                  :key="vocation.code"
+                  class="last-children"
+                  @click="goDetail(vocation.code)"
+                >{{ vocation.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <scroll-top/>
+    </index-card>
+  </div>
+</template>
+
+<script>
+import MxMajorTreeTranslateMixin from '@/components/Cache/modules/mx-major-tree-translate-mixin'
+import CareerTitleCard from '@/views/career/components/CareerTitleCard'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+import ScrollTop from '@/components/ScrollTop/index'
+
+export default {
+  name: 'MajorIndex',
+  components: {ScrollTop, IndexCard, CareerTitleCard},
+  mixins: [MxMajorTreeTranslateMixin],
+  data() {
+    return {
+      type: '本科'
+    }
+  },
+  computed: {
+    levelOne() {
+      return this.majorList.map(item => {
+        return {
+          code: item.code,
+          name: item.name
+        }
+      })
+    },
+    majorList() {
+      if (this.type == '本科') return this.masterMajorList
+      if (this.type == '专科') return this.specialtyMajorList
+      return []
+    }
+  },
+  methods: {
+    goDetail(code) {
+      this.$router.push({path: '/career/plan/MajorDetail', query: {type: this.type, code: code}})
+    },
+    returnTop(id) {
+      this.$scrollTo(document.getElementById(`#${id}`), {offset: 0})
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.majorlib {
+  .levelOne {
+    padding-top: 100px;
+    margin-top: -100px;
+  }
+
+  .back {
+    padding: 30px;
+    margin-top: 10px;
+    background-color: white;
+    background-repeat: no-repeat;
+    background-position: bottom right;
+  }
+
+  .title {
+    background-color: var(--themeColor);
+    width: 162px;
+    height: 37px;
+    color: #fff;
+    font-size: 16px;
+    line-height: 37px;
+    text-align: center;
+  }
+
+  .line {
+    background-color: var(--themeColor);
+    height: 4px;
+  }
+
+  .last-children-wrap {
+    flex-wrap: wrap;
+    display: flex;
+
+    .last-children {
+      flex: 25%;
+      flex-grow: 0;
+      margin-bottom: 10px;
+      color: var(--themeColor);
+
+      &:hover {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .tabs-item {
+    cursor: pointer;
+    padding: 0 33px;
+    border: 1px solid #f2f2f2;
+    border-bottom: 0px;
+    display: inline-block;
+    line-height: 40px;
+
+    &:hover {
+      color: var(--themeColor);
+    }
+
+    &.bg-primary {
+      background: var(--themeColor);
+      color: white;
+      border: 0px;
+    }
+  }
+
+  .tags-wrap {
+    overflow: hidden;
+    box-sizing: border-box;
+    border-top: 1px solid #e1e1e1;
+    border-left: 1px solid #e1e1e1;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+
+    .tag {
+      border-bottom: 1px solid #e1e1e1;
+      border-right: 1px solid #e1e1e1;
+      font-size: 12px;
+      text-align: center;
+      flex: 10%;
+      text-align: center;
+      flex-grow: 0;
+      color: #555;
+      height: 40px;
+      line-height: 40px;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .sub-title {
+    color: #333;
+    line-height: 26px;
+    padding: 5px 10px;
+    background: #f3f3f3;
+    margin-bottom: 2px;
+  }
+
+  .voca-title {
+    border-left: 4px solid var(--themeColor);
+    padding: 0px 5px;
+  }
+
+  .primaryColor {
+    color: var(--themeColor);
+  }
+
+  .row {
+    .rowHead {
+      background-color: rgba(var(--themeColor), 0.2);
+
+      &:hover {
+        background-color: var(--themeColor);
+
+        hr {
+          background-color: #ffffff;
+        }
+      }
+    }
+  }
+}
+</style>
+

src/views/career/LibraryVocation/VocationDetail.vue

@@ -0,0 +1,557 @@
+<template>
+  <div class="app-container jobDetail">
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <div class="bd-f2 bg-white">
+          <p style="border-bottom: 1px solid #f2f2f2" class="pd10 f-333 f14 pf bold">全部职业</p>
+          <div class="tree-wrap">
+            <el-tree
+              ref="tree"
+              :data="vocationList"
+              node-key="code"
+              :default-checked-keys="[code]"
+              :default-expanded-keys="[code]"
+              :props="defaultProps"
+              :current-node-key="code"
+              :is-leaf="isLeaf"
+              @node-click="handleNodeClick"
+            >
+              <p slot-scope="{node, data}" class="custom-tree-node" :title="node.label">
+                <span class="text-ellipsis">{{ node.label }}</span>
+                <span>{{ data.children ? data.children.length : '' }}</span>
+              </p>
+            </el-tree>
+          </div>
+
+        </div>
+      </el-col>
+      <el-col :span="18">
+        <index-card :title="vocationDetail.name">
+          <el-button slot="more" size="small" round @click="$router.go(-1)">返回</el-button>
+          <div class="tabs-wrap">
+            <span class="tabs-item" :class="{'bg-primary':tabActive == 0}" @click="tabActive = 0">职业概况</span>
+            <span class="tabs-item" :class="{'bg-primary':tabActive == 1}" @click="tabActive = 1">就业岗位</span>
+          </div>
+          <div class="line" />
+          <div
+            v-show="loading"
+            v-loading="loading"
+            class="loading-div"
+            :style="{height:windowHeight + 'px'}"
+          />
+
+          <div class="content-wrap mt20">
+            <!-- 职业概况  -->
+            <div v-if="Object.keys(vocationDetail).length > 0">
+              <div v-show="tabActive == 0">
+                <div class="desc-item">
+                  <p class="format-tit">职业介绍</p>
+                  <div class="text-666" v-html="vocationDetail.description" />
+                </div>
+                <div class="desc-item">
+                  <p class="format-tit">就业岗位<span class="text-666 f14">({{
+                    vocationDetail.postJobs.length || 0
+                  }}个)</span>
+                  </p>
+                  <div v-for="(post,index) in vocationDetail.postJobs" :key="index" class="post-item mb20">
+                    <div class="post-title f16 mb10" style="cursor: pointer" @click="toJob(post)">{{ post.name }}</div>
+                    <div class="pb10 text-666 post-text">
+                      <div>{{ `${post.salaryMin}元-${post.salaryMax}元/月` }}</div>
+                      <div>热门地区：{{ post.hotCity }}</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="desc-item">
+                  <p class="format-tit">相关专业<span class="text-666 f14">({{ vocationDetail.postMajors.length }}个)</span>
+                  </p>
+                  <div v-for="(post,index) in vocationDetail.postMajors" :key="index" class="post-item mb20">
+                    <div class="post-title f16 mb10" style="cursor: pointer" @click="toMajorDetail(post)">
+                      {{ post.name }}
+                    </div>
+                    <div class="pb10 text-666 post-text">
+                      <div>国标代码：{{ post.code }}</div>
+                      <div>学制：{{ post.learnYear }}</div>
+                      <div>男女比例：{{ `${post.maleRatio}/${post.femaleRatio}` }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!--  就业岗位-->
+            <div v-show="tabActive == 1">
+              <div v-if="vocationalPosts.length > 0">
+                <el-row :gutter="20" type="flex" class="jobTabs">
+                  <el-col v-for="item in vocationalPosts" :key="item.name" class="job-item-wrap" :span="4">
+                    <div
+                      class="pointer-no-hover rd4 f14 pl20 pr20 pt10 pb10"
+                      :class="[jobActiveName == item.name?'bg-primary':'bg-f2 f-333']"
+                      @click="toActiveJob(item.name)"
+                    >
+                      <div class="mb10">{{ item.name }}</div>
+                      <div>{{ `${item.salaryMin}-${item.salaryMax}` }}{{ item.salaryUnit }}</div>
+                    </div>
+                  </el-col>
+                </el-row>
+                <!--  岗位详情  -->
+                <div v-if="Object.keys(jobDetail).length > 0">
+                  <!-- 图表 -->
+                  <div class="desc-item">
+                    <p class="format-tit">薪资情况</p>
+                    <el-row :gutter="10">
+                      <el-col :span="12">
+                        <p class="text-right f-333">按趋势</p>
+                        <mx-chart :options="chartExperience" height="300px" />
+                      </el-col>
+                      <el-col :span="12">
+                        <p class="text-right f-333">按分布</p>
+                        <mx-chart :options="chartSalary" height="300px" />
+                      </el-col>
+                    </el-row>
+                  </div>
+                  <div class="desc-item">
+                    <p class="format-tit">就业形势</p>
+                    <el-row :gutter="10">
+                      <el-col :span="12">
+                        <p class="text-right f-333">按学历</p>
+                        <mx-chart :options="chartEdu" height="300px" />
+                      </el-col>
+                      <el-col :span="12">
+                        <p class="text-right f-333">按经验</p>
+                        <mx-chart :options="chartExp" height="300px" />
+                      </el-col>
+                    </el-row>
+                  </div>
+                  <div class="desc-item">
+                    <p class="format-tit">招聘需求量</p>
+                    <el-row :gutter="40" type="flex" class="flex-wrap">
+                      <el-col v-for="(item,index) in jobDetail.demand" :key="index" :span="12" class="f16">
+                        <el-row class="format-job-wrap">
+                          <el-col :span="3" class="f18 text-center f-666">{{ index + 1 }}</el-col>
+                          <el-col :span="15" class="f-333">{{ item.city }}</el-col>
+                          <el-col :span="6" class="f-666  text-right f14">{{ item.count }}职位</el-col>
+                        </el-row>
+                      </el-col>
+                    </el-row>
+                  </div>
+                  <div class="desc-item">
+                    <p class="format-tit">收入排行-按行业</p>
+                    <el-row :gutter="40" type="flex" class="flex-wrap">
+                      <el-col v-for="(item,index) in jobDetail.industrySalary" :key="index" :span="12" class="f16">
+                        <el-row class="format-job-wrap">
+                          <el-col :span="3" class="f18 text-center f-666">{{ index + 1 }}</el-col>
+                          <el-col :span="15" class="f-333">{{ item.name }}</el-col>
+                          <el-col :span="6" class="f-666 text-right f14">{{ item.salary }}元 / 月</el-col>
+                        </el-row>
+                      </el-col>
+                    </el-row>
+                  </div>
+                  <div class="desc-item">
+                    <p class="format-tit">收入排行-按地区</p>
+                    <el-row :gutter="40" type="flex" class="flex-wrap">
+                      <el-col v-for="(item,index) in jobDetail.citySalary" :key="index" :span="12" class="f16">
+                        <el-row class="format-job-wrap">
+                          <el-col :span="3" class="f18 text-center f-666">{{ index + 1 }}</el-col>
+                          <el-col :span="15" class="f-333">{{ item.city }}</el-col>
+                          <el-col :span="6" class="f-666 text-right f14">{{ item.salary }}元 / 月</el-col>
+                        </el-row>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </div>
+              </div>
+              <div v-else>
+                暂无数据
+              </div>
+            </div>
+          </div>
+        </index-card>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+<script>
+import config from '@/common/MxConfig'
+import MxChart from '@/components/MxChart/index'
+import { vocationalOverview, vocationalPosts, vocationalPostsDetail } from '@/api/webApi/vocation'
+import MxVocationTranslateMixin from '@/components/Cache/modules/mx-vocation-translate-mixin'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+
+export default {
+  name: 'VocationDetail',
+  components: {
+    IndexCard,
+    MxChart
+  },
+  mixins: [MxVocationTranslateMixin],
+  data() {
+    return {
+      loading: false,
+      code: '',
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      tabActive: 0,
+      vocationalPosts: [], // 就业岗位
+      vocationDetail: {
+        name: '',
+        code: '',
+        postJobs: [],
+        postMajors: []
+      }, // 职业概况
+      jobActiveName: '', // 激活状态的岗位
+      jobDetail: {}, // 岗位详情
+      windowHeight: document.documentElement.clientHeight
+    }
+  },
+  computed: {
+    // 按工资分布
+    chartSalary() {
+      if (!this.jobDetail.salary.length) return null
+      const pieData = this.jobDetail.salary.map(item => {
+        return {
+          value: item.ratio,
+          name: `${item.min}-${item.max}元/月 ${item.ratio}%`
+        }
+      })
+      const options = {
+        toolbox: {
+          show: true
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: [40, 60],
+            label: {
+              formatter: '{b}'
+            },
+            data: pieData
+          }
+        ]
+      }
+      return options
+    },
+    // 按经验
+    chartExp() {
+      if (!this.jobDetail.exp.length) return null
+      const pieData = this.jobDetail.exp.map(item => {
+        return {
+          value: item.ratio,
+          name: `${item.exp}${item.ratio}%`
+        }
+      })
+      const options = {
+        toolbox: {
+          show: true
+        },
+        series: [
+          {
+            name: 'Nightingale Chart',
+            type: 'pie',
+            radius: [30, 60],
+            label: {
+              formatter: '{b}'
+            },
+            data: pieData
+          }
+        ]
+      }
+      return options
+    },
+    // 按教育程度
+    chartEdu() {
+      if (!this.jobDetail.edu.length) return null
+      const pieData = this.jobDetail.edu.map(item => {
+        return {
+          value: item.ratio,
+          name: `${item.edu}${item.ratio}%`
+        }
+      })
+      const options = {
+        toolbox: {
+          show: true
+        },
+        series: [
+          {
+            name: 'Nightingale Chart',
+            type: 'pie',
+            radius: [30, 60],
+            label: {
+              formatter: '{b}'
+            },
+            data: pieData
+          }
+        ]
+      }
+      return options
+    },
+    // 按工资趋势
+    chartExperience() {
+      if (!this.jobDetail.experience.length) return null
+      const col = this.jobDetail.experience.map(item => item.year)
+      const row = this.jobDetail.experience.map(item => item.salary)
+      const options = {
+        xAxis: {
+          data: col,
+          axisLine: {
+            lineStyle: {
+              type: 'dashed'
+            }
+          },
+          axisTick: {
+            alignWithLabel: true
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Email',
+            type: 'line',
+            color: config.color.primary,
+            stack: 'Total',
+            label: {
+              show: true,
+              position: 'top'
+            },
+            smooth: false,
+            data: row
+          }
+        ]
+
+      }
+      return options
+    }
+  },
+  watch: {
+    tabActive: {
+      handler(newVal) {
+        // 1 岗位 0 概览
+        if (newVal == 0) this.getVocationalOverview()
+        if (newVal == 1) this.getVocationalPosts()
+      }
+    }
+  },
+  created() {
+    this.code = this.$route.query.code
+    this.getVocationalOverview()
+  },
+  methods: {
+    toMajorDetail(row) {
+      // 跳转
+      this.$router.push({ path: '/career/plan/MajorDetail', query: { code: row.code }})
+    },
+    handleNodeClick(data, node) {
+      if (!node.isLeaf || this.code == node.data.code) return
+      this.code = node.data.code
+      this.tabActive = 0
+      this.vocationalPosts = []
+      this.getVocationalOverview()
+      // 跳转
+      // this.$router.replace({path:'/career/vocation/Detail',query:{code:node.data.code}})
+    },
+    toJob(post) {
+      console.log(post)
+      this.tabActive = 1
+      this.toActiveJob(post.name)
+    },
+    isLeaf(data, node) {
+      return node.childCount == 0
+    },
+    toActiveJob(name) {
+      if (this.jobActiveName == name) return
+      this.jobActiveName = name
+      //  刷新数据
+      this.getVocationalPostsDetail()
+    },
+    //  就业岗位
+    getVocationalPosts() {
+      this.loading = true
+      const params = {
+        code: this.code
+      }
+      vocationalPosts(params).then(res => {
+        this.vocationalPosts = res.data
+        if (this.jobActiveName == '') {
+          this.jobActiveName = res.data.first()?.name || ''
+          this.$nextTick(_ => {
+            this.getVocationalPostsDetail()
+          })
+        }
+      }).finally(_ => {
+        this.loading = false
+      })
+    },
+    // 就业岗位详情
+    getVocationalPostsDetail() {
+      this.loading = true
+      vocationalPostsDetail({ postName: this.jobActiveName }).then(res => {
+        console.log(res)
+        this.jobDetail = res.data || {}
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    //  职业概况
+    getVocationalOverview() {
+      this.loading = true
+      const params = {
+        code: this.code
+      }
+      vocationalOverview(params).then(res => {
+        this.vocationDetail = res.data || {}
+        const checkArrayTypes = ['postJobs', 'postMajors']
+        checkArrayTypes.forEach(prop => this.vocationDetail[prop] = this.vocationDetail[prop] || [])
+      }).finally(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "~@/assets/styles/common.scss";
+
+.jobDetail {
+  .header-content {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba($--color-primary, 0.1);
+  }
+
+  .custom-tree-node {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .tabs-wrap {
+    height: 40px;
+
+    .tabs-item {
+      cursor: pointer;
+      padding: 0 33px;
+      border-radius: 4px 4px 0 0;
+      display: inline-block;
+      line-height: 40px;
+
+      &:hover {
+        color: var(--themeColor);
+      }
+
+      &.bg-primary {
+        background: var(--themeColor);
+        color: white;
+      }
+    }
+  }
+
+  .format-job-wrap {
+    display: flex;
+    height: 44px;
+    line-height: 44px;
+    border-bottom: 1px solid #f2f2f2;
+  }
+
+  .line {
+    background: var(--themeColor);
+    height: 1px;
+  }
+
+  .post-text {
+    display: flex;
+
+    div {
+      min-width: 160px;
+
+      &:not(:first-child):before {
+        content: "";
+        display: inline-block;
+        width: 1px;
+        height: 12px;
+        background-color: #ccc;
+        vertical-align: text-top;
+        margin-right: 60px;
+        margin-top: 4px;
+      }
+    }
+  }
+
+  .loading-div {
+    width: 100%;
+    position: absolute;
+    background: transparent;
+    left: 0;
+  }
+
+  .post-title {
+    color: #333;
+  }
+
+  .post-item {
+    border-bottom: 1px solid #f2f2f2;
+    color: #333;
+  }
+
+  .format-tit {
+    border-left: 4px solid var(--themeColor);
+    padding-left: 10px;
+    margin-bottom: 20px;
+    font-size: 20px;
+  }
+
+  .desc-item {
+    margin-bottom: 40px;
+  }
+
+  .text-666 {
+    font-size: 14px;
+    color: #666666 !important;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .jobTabs {
+    flex-wrap: wrap;
+
+    .job-item-wrap {
+      padding: 10px;
+      margin-bottom: 20px;
+
+      .job-item {
+        cursor: pointer;
+        border-radius: 4px;
+        padding: 10px;
+      }
+    }
+  }
+
+  .tree-wrap {
+    padding: 10px;
+    height: calc(100vh - 176px);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+
+  ::v-deep .el-tree-node.is-current > .el-tree-node__content {
+    background: rgba(22, 119, 255, 0.1);
+    color: var(--themeColor);
+
+    ::v-deep .is-leaf {
+      color: rgba(0, 0, 0, 0);
+    }
+  }
+}
+</style>

src/views/career/LibraryVocation/VocationIndex.vue

@@ -0,0 +1,173 @@
+<template>
+  <div ref="vocation" class="bg-page fx-column fx-cen-cen vocation app-container">
+    <career-title-card name="职业库" english="CAREER POOL"/>
+    <index-card>
+      <div slot="title" class="fx-1">
+        <div class="title">职业列表</div>
+        <div class="line"/>
+        <div class="tags-wrap">
+          <a v-for="item in levelOne" :key="item.code" class="tag" @click="returnTop(item.code)">{{ item.name }}</a>
+        </div>
+      </div>
+      <div class="list-wrap">
+        <!--  一级 -->
+        <div v-for="item in vocationList" :id="`#${item.code}`" :key="item.code" class="levelOne">
+          <!--   一级职业title-->
+          <p class="voca-title mt10 mb10 bold">{{ item.name }}</p>
+          <div v-for="subLevel in item.children" :key="subLevel.code" class="last-level">
+            <!--  二级职业 -->
+            <p class="sub-title">{{ subLevel.name }}</p>
+            <!--  三级职业 -->
+            <div v-if="subLevel.children.length > 0" class="last-children-wrap">
+                <span
+                  v-for="vocation in subLevel.children"
+                  :key="vocation.code"
+                  class="last-children"
+                  @click="goDetail(vocation.code)"
+                >{{ vocation.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <scroll-top/>
+    </index-card>
+  </div>
+</template>
+
+<script>
+import MxVocationTranslateMixin from '@/components/Cache/modules/mx-vocation-translate-mixin'
+import CareerTitleCard from '@/views/career/components/CareerTitleCard'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+import ScrollTop from '@/components/ScrollTop/index'
+
+export default {
+  name: 'VocationIndex',
+  components: {ScrollTop, IndexCard, CareerTitleCard},
+  mixins: [MxVocationTranslateMixin],
+  computed: {
+    levelOne() {
+      if (!this.vocationList.length) return []
+      return this.vocationList.map(item => {
+        return {
+          code: item.code,
+          name: item.name
+        }
+      })
+    }
+  },
+  methods: {
+    goDetail(code) {
+      this.$router.push({name: 'jobDetail', query: {code: code}})
+    },
+    returnTop(id) {
+      this.$scrollTo(document.getElementById(`#${id}`), {offset: 0})
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.vocation {
+  .levelOne {
+    padding-top: 100px;
+    margin-top: -100px;
+  }
+
+  .back {
+    padding: 30px;
+    margin-top: 10px;
+    background-color: white;
+    background-repeat: no-repeat;
+    background-position: bottom right;
+  }
+
+  .title {
+    background-color: var(--themeColor);
+    width: 162px;
+    height: 37px;
+    color: #fff;
+    font-size: 16px;
+    line-height: 37px;
+    text-align: center;
+  }
+
+  .line {
+    background-color: var(--themeColor);
+    height: 4px;
+  }
+
+  .last-children-wrap {
+    flex-wrap: wrap;
+    display: flex;
+
+    .last-children {
+      flex: 25%;
+      flex-grow: 0;
+      margin-bottom: 10px;
+      color: var(--themeColor);
+
+      &:hover {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .tags-wrap {
+    overflow: hidden;
+    box-sizing: border-box;
+    border-top: 1px solid #e1e1e1;
+    border-left: 1px solid #e1e1e1;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+
+    .tag {
+      border-bottom: 1px solid #e1e1e1;
+      border-right: 1px solid #e1e1e1;
+      font-size: 12px;
+      text-align: center;
+      flex: 10%;
+      text-align: center;
+      flex-grow: 0;
+      color: #555;
+      height: 40px;
+      line-height: 40px;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .sub-title {
+    color: #333;
+    line-height: 26px;
+    padding: 5px 10px;
+    background: #f3f3f3;
+    margin-bottom: 2px;
+  }
+
+  .voca-title {
+    border-left: 4px solid var(--themeColor);
+    padding: 0px 5px;
+    color: var(--themeColor);
+  }
+
+  .row {
+    .rowHead {
+      background-color: #a7e6d4;
+
+      &:hover {
+        background-color: var(--themeColor);
+
+        hr {
+          background-color: #ffffff;
+        }
+      }
+    }
+  }
+}
+</style>
+

src/views/career/PrevBatch/Index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="bg-page fx-column fx-cen-cen prev-batch-container">
+    <div class="bg-white index-block fx-column pb30">
+      <el-tabs v-model="activeName" stretch>
+        <el-tab-pane :label="categoryName+`招生计划`" name="prevEnrollPlan" />
+        <el-tab-pane :label="categoryName+`投档线`" name="prevShiftLine" />
+      </el-tabs>
+      <div class="pl12 pr12">
+        <keep-alive>
+          <prev-enroll-plan v-if="activeName=='prevEnrollPlan'&&isPreEnrollSupport" />
+          <prev-enroll-plan-v2 v-if="activeName=='prevEnrollPlan'&&!isPreEnrollSupport" />
+        </keep-alive>
+        <keep-alive>
+          <!--<evaluation-empty v-if="activeName=='prevShiftLine'&&!isPreEnrollSupport" title="功能正在搭建，敬请期待..." />-->
+          <prev-shift-line v-if="activeName=='prevShiftLine'&&isPreEnrollSupport" />
+          <prev-shift-line-v2 v-if="activeName=='prevShiftLine'&&!isPreEnrollSupport" />
+        </keep-alive>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PrevEnrollPlan from '@/views/career/PrevBatch/PrevEnrollPlan.vue'
+import PrevShiftLine from '@/views/career/PrevBatch/PrevShiftLine.vue'
+import MxConst from '@/common/MxConst'
+import { mapGetters } from 'vuex'
+import PrevEnrollPlanV2 from '@/views/career/PrevBatch/PrevEnrollPlanV2.vue'
+import PrevShiftLineV2 from '@/views/career/PrevBatch/PrevShiftLineV2.vue'
+
+export default {
+  name: 'PrevBatchIndex',
+  components: { PrevShiftLineV2, PrevEnrollPlanV2, PrevShiftLine, PrevEnrollPlan },
+  data() {
+    return {
+      activeName: 'prevEnrollPlan'
+    }
+  },
+  computed: {
+    ...mapGetters(['isPreEnrollSupport']),
+    categoryName() {
+      // This means you can set the meta.categoryName in the route config,
+      // if you don't set it, it will use the default value.
+      return this.$route.meta.categoryName ||
+        MxConst.enum.recruitPlanCategory.names[this.$route.meta.category] || ''
+    }
+  }
+}
+</script>
+<style scoped>
+.prev-batch-container >>> .el-tabs__item {
+  font-size: 24px;
+  height: 60px;
+  line-height: 60px;
+}
+</style>
+

src/views/career/PrevBatch/PrevEnrollPlan.vue

@@ -0,0 +1,241 @@
+<template>
+  <div v-loading="loading" class="fx-column">
+    <div class="fx-row fx-bet-cen mt15 mb10">
+      <div class="fx-row">
+        <el-select v-if="pureMode&&isPreEnrollSupport" v-model="query.category" class="mr10" @change="initProcess">
+          <el-option v-for="item in queryData.categories" :key="item.label" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-select v-model="query.year" placeholder="请选择年份" @change="handleYearChange">
+          <el-option v-for="item in queryData.years" :key="item.label" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-select v-model="query.type" placeholder="请选择科目" class="ml10" @change="handleTypeChange">
+          <el-option v-for="item in queryData.types" :key="item.label" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-cascader
+          ref="cascader"
+          v-model="query.tagCode"
+          placeholder="计划类别不限"
+          :options="preTree"
+          :props="{emitPath:false,checkStrictly:true}"
+          :show-all-levels="false"
+          clearable
+          filterable
+          class="ml10"
+          @change="handleTagChange"
+        />
+      </div>
+      <div>
+        <el-input
+          v-model="query.keyword"
+          placeholder="请输入院校/专业名称"
+          suffix-icon="el-icon-search"
+          style="width: 250px"
+          clearable
+          @keyup.enter.native="handleSearch"
+        />
+        <el-button type="primary" class="ml10" @click="handleSearch">搜索</el-button>
+      </div>
+    </div>
+    <dynamic-table :rows="rows" :columns="columns" border>
+      <template #university="{row, display}">
+        <div class="pointer hover-primary" @click="toDetail(row)">{{ display }}</div>
+      </template>
+      <template #groupsName="{row, display}">
+        <div v-if="display">{{ display }}</div>
+        <div>{{ row.premark }}</div>
+      </template>
+      <template #marjorBelongs="{row, display}">
+        <div>[{{ display }}]{{ row['marjorName'] }}</div>
+        <div class="f12 f-999">{{ row.marjorDirection }}</div>
+      </template>
+      <template #tag="{display}">
+        <enroll-plan-tags :value="display" />
+      </template>
+    </dynamic-table>
+    <vip-guide-more v-if="total>1&&!isBind" />
+    <pagination :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import { getPreRecruitPlan, getPreRecruitPlanTypes, getPreRecruitPlanYears } from '@/api/webApi/prev-batch'
+import DynamicTable from '@/components/dynamic-table/index.vue'
+import transferMixin from '@/components/TransferMixin'
+import { mapActions, mapGetters, mapState } from 'vuex'
+import EnrollPlanTags from '@/views/career/PrevBatch/components/EnrollPlanTags.vue'
+import MxConst from '@/common/MxConst'
+import VipGuideMore from '@/components/VipGuideMore/index.vue'
+
+export default {
+  name: 'PrevEnrollPlan',
+  components: { VipGuideMore, EnrollPlanTags, DynamicTable },
+  mixins: [transferMixin],
+  props: {
+    category: {
+      type: String | Number,
+      default: ''
+    },
+    universityCode: {
+      type: String | Number,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      query: {
+        pageNum: 1,
+        pageSize: 10,
+        category: this.category || this.$route.meta.category,
+        year: '',
+        type: '',
+        tagCode: '',
+        keyword: '',
+        universityCode: this.universityCode
+      },
+      queryData: {
+        years: [],
+        types: [],
+        categories: []
+      },
+      total: 0,
+      rows: [],
+      columns: [{
+        label: '院校名称',
+        prop: 'universityName',
+        slotBody: 'university',
+        width: '120px'
+      }, {
+        label: '专业组',
+        prop: 'groupsName',
+        width: '120px',
+        slotBody: 'groupsName'
+      }, {
+        label: '招生代码',
+        prop: 'collegeCode',
+        width: '90px'
+      }, {
+        label: '年份',
+        prop: 'year',
+        width: '60px'
+      }, {
+        label: '招生专业',
+        prop: 'marjorBelongs',
+        slotBody: 'marjorBelongs'
+      }, {
+        label: '计划类别',
+        prop: 'tag',
+        align: 'left',
+        slotBody: 'tag'
+      }, {
+        label: '选考科目',
+        prop: 'course',
+        width: '90px'
+      }, {
+        label: '计划数',
+        prop: 'planCount',
+        width: '60px'
+      }, {
+        label: '学制',
+        prop: 'xuezhi',
+        width: '60px'
+      }, {
+        label: '学费',
+        prop: 'xuefei',
+        width: '60px'
+      }]
+    }
+  },
+  computed: {
+    ...mapGetters(['isBind', 'isPreEnrollSupport', 'isPreEnrollFormatted']),
+    ...mapState({ preTree: state => state.cachedData.preTree }),
+    pureMode() {
+      return !!this.universityCode // now work in university detail page.
+    }
+  },
+  watch: {
+    'query.year': function() {
+      // refresh cached data `preTree`
+      if (!this.query.category) return
+      this.query.tagCode = ''
+      this.loadPreTree({ category: this.query.category, year: this.query.year })
+    }
+  },
+  created() {
+    const categoryKeys = MxConst.enum.recruitPlanCategory.visibleKeys
+    this.queryData.categories = categoryKeys.map(key => {
+      const val = MxConst.enum.recruitPlanCategory[key]
+      return {
+        label: MxConst.enum.recruitPlanCategory.names[val],
+        value: val
+      }
+    })
+  },
+  async mounted() {
+    await this.initProcess()
+  },
+  methods: {
+    ...mapActions({ 'loadPreTree': 'cachedData/ensurePreTree' }),
+    _makeOptions(rows, all) {
+      const options = rows.map(item => ({
+        label: item,
+        value: item
+      }))
+      if (all) options.unshift({ label: all, value: '' })
+      return options
+    },
+    async initProcess() {
+      await this.initQueryYear()
+      await this.initQueryType()
+      await this.getList()
+    },
+    async initQueryYear() {
+      const res = await getPreRecruitPlanYears({ category: this.query.category })
+      this.queryData.years = this._makeOptions(res['rows'])
+      this.query.year = this.queryData.years.first().value
+    },
+    async initQueryType() {
+      if (!this.query.year) {
+        this.queryData.types = [{ label: '科目不限', value: '' }]
+        this.query.type = ''
+        return
+      }
+      const res = await getPreRecruitPlanTypes({ category: this.query.category, year: this.query.year })
+      this.queryData.types = this._makeOptions(res['rows'], '科目不限')
+      this.query.type = this.queryData.types.first().value
+    },
+    async handleYearChange() {
+      await this.initQueryType()
+      this.query.pageNum = 1
+      await this.getList()
+    },
+    async handleTypeChange() {
+      this.query.pageNum = 1
+      await this.getList()
+    },
+    handleTagChange() {
+      this.$refs.cascader.toggleDropDownVisible(false)
+      this.query.pageNum = 1
+      this.getList()
+    },
+    handleSearch() {
+      this.query.pageNum = 1
+      this.getList()
+    },
+    async getList() {
+      this.loading = true
+      try {
+        const res = await getPreRecruitPlan(this.query)
+        this.rows = res.rows
+        this.total = res.total
+      } finally {
+        this.loading = false
+      }
+    },
+    toDetail(row) {
+      this.transferTo('/career/plan/UniversityDetail', { code: row.universityCode })
+    }
+  }
+}
+</script>
+

src/views/career/PrevBatch/PrevEnrollPlanV2.vue

@@ -0,0 +1,58 @@
+<template>
+  <div v-loading="loading" class="fx-column">
+    <div class="fx-row fx-bet-cen mt15 mb10">
+      <div class="fx-row">
+        <el-select v-if="false" v-model="query.category" class="mr10" @change="initProcess">
+          <el-option v-for="item in queryData.categories" :key="item.label" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-select v-model="query.year" placeholder="请选择年份" @change="handleYearChange">
+          <el-option v-for="item in queryData.years" :key="item.label" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-select v-if="false" v-model="query.type" placeholder="请选择科目" class="ml10" @change="handleTypeChange">
+          <el-option v-for="item in queryData.types" :key="item.label" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <div v-if="!pureMode">
+        <el-input v-model="query.keyword" placeholder="请输入院校/专业名称" suffix-icon="el-icon-search" style="width: 250px" clearable @keyup.enter.native="handleSearch" />
+        <el-button type="primary" class="ml10" @click="handleSearch">搜索</el-button>
+      </div>
+    </div>
+    <sub-major-table v-for="row in rows" :key="row.id" :row="row" :is-new-gaokao="isNewGaokao" @university="toDetail(row)" />
+    <evaluation-empty v-if="!rows.length" title="暂无数据" />
+    <vip-guide-more v-if="total>1&&!isBind" />
+    <pagination :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="getList" />
+  </div>
+</template>
+<script>
+import { getPreRecruitPlanV2 } from '@/api/webApi/prev-batch'
+import PrevEnrollPlan from '@/views/career/PrevBatch/PrevEnrollPlan.vue'
+import GlobalVoluntaryDataMixin from '@/views/career/GlobalVoluntaryDataMixin'
+import SubMajorTable from '@/views/career/PrevBatch/components/SubMajorTable.vue'
+
+export default {
+  name: 'PrevEnrollPlanV2',
+  components: { SubMajorTable },
+  extends: PrevEnrollPlan,
+  mixins: [GlobalVoluntaryDataMixin],
+  watch: {
+    'query.year': function(val) {
+      if (val) this.ensureVoluntaryData({ year: val })
+    }
+  },
+  methods: {
+    async getList() {
+      this.loading = true
+      try {
+        const res = await getPreRecruitPlanV2(this.query)
+        this.rows = res.rows
+        this.total = res.total
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/views/career/PrevBatch/PrevShiftLine.vue

@@ -0,0 +1,208 @@
+<template>
+  <div v-loading="loading" class="fx-column">
+    <mx-condition :query-params="queryParams" :require-fields="requireFields" use-alias-mapping tiny-margin-bottom label-width="80px" @query="handleQuery" />
+    <div v-if="!pureMode" class="text-right mb8">
+      <el-input v-model="query.keyword" placeholder="请输入院校/专业名称" suffix-icon="el-icon-search" style="width: 250px" clearable @keyup.enter.native="handleSearch" />
+      <el-button type="primary" class="ml10" @click="handleSearch">搜索</el-button>
+    </div>
+    <template v-if="subMajorMode">
+      <sub-major-table v-for="row in rows" :key="row.id" :row="row" :is-new-gaokao="isNewGaokao" @university="toDetail(row)">
+        <template #default="scope">
+          <el-descriptions-item label="录取人数">{{ scope.numReal || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="最低分">{{ scope.score || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="最低位次">{{ scope.seat || '-' }}</el-descriptions-item>
+        </template>
+      </sub-major-table>
+    </template>
+    <dynamic-table v-else :rows="rows" :columns="columns" border>
+      <template #university="{row, display}">
+        <div class="pointer hover-primary" @click="toDetail(row)">{{ display }}</div>
+      </template>
+      <template #groupsName="{row, display}">
+        <div v-if="display">{{ display }}</div>
+        <div>{{ row.premark }}</div>
+      </template>
+      <template #marjorDirection="{row, display}">
+        <template v-if="row.marjorName">
+          <div v-for="item in row.marjorName.split(',')" :key="item" class="f13 mb3">{{ item }}</div>
+        </template>
+        <el-tooltip :disabled="!display||display.length<100" placement="top">
+          <div slot="content" style="max-width: 60vw">{{ display }}</div>
+          <div class="text-ellipsis-5 f12 f-999">{{ display }}</div>
+        </el-tooltip>
+      </template>
+      <template #tag="{display}">
+        <div v-for="(item, idx) in display.split('>')" :key="idx" :style="{marginLeft: (idx*10)+'px'}" class="tag-item f13 rel">{{ item }}</div>
+      </template>
+    </dynamic-table>
+    <evaluation-empty v-if="!rows.length&&subMajorMode" title="暂无数据" />
+    <vip-guide-more v-if="total>1&&!isBind" />
+    <pagination :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import { getPreEnroll } from '@/api/webApi/prev-batch'
+import DynamicTable from '@/components/dynamic-table/index.vue'
+import transferMixin from '@/components/TransferMixin'
+import { mapGetters } from 'vuex'
+import MxCondition from '@/components/MxCondition/mx-condition.vue'
+import GlobalVoluntaryDataMixin from '@/views/career/GlobalVoluntaryDataMixin'
+import SubMajorTable from '@/views/career/PrevBatch/components/SubMajorTable.vue'
+
+const formatter = (row, column, cellValue) => {
+  return cellValue || '-'
+}
+export default {
+  name: 'PrevShiftLine',
+  components: { SubMajorTable, MxCondition, DynamicTable },
+  mixins: [transferMixin, GlobalVoluntaryDataMixin],
+  props: {
+    category: {
+      type: String | Number,
+      default: ''
+    },
+    universityCode: {
+      type: String | Number,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      subMajorMode: false,
+      loading: false,
+      query: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: ''
+      },
+      firedParams: null,
+      requireFields: ['preEnrollYear'],
+      total: 0,
+      rows: []
+    }
+  },
+  computed: {
+    ...mapGetters(['isLogin', 'isBind', 'isPreEnrollSupport']),
+    pureMode() {
+      return !!this.universityCode // now work in university detail page.
+    },
+    queryParams() {
+      if (!this.isLogin) return null
+      const category = this.category || this.$route.meta.category
+      // 现在不需要 preCategory 了
+      const categoryParams = { category }// this.pureMode && this.isPreEnrollSupport ? { preCategory: category } : { category }
+      return this.pureMode || !this.isPreEnrollSupport ? {
+        ...categoryParams,
+        preEnrollYear: '',
+        universityCode: this.universityCode
+      } : {
+        ...categoryParams,
+        preEnrollYear: '',
+        preEnrollTag: '',
+        preEnrollSubTag: '',
+        preEnrollCourse0: '',
+        preEnrollCourse1: '',
+        universityCode: this.universityCode
+      }
+    },
+    columns() {
+      return [{
+        label: '年份',
+        prop: 'year',
+        width: '60px'
+      }, {
+        label: '院校名称',
+        prop: 'universityName',
+        slotBody: 'university',
+        width: '140px'
+      }, {
+        label: '招生代码',
+        prop: 'collegeCode',
+        width: '80px'
+      }, {
+        hidden: !this.isNewGaokao,
+        label: '专业组',
+        prop: 'groupsName',
+        slotBody: 'groupsName',
+        width: '120px'
+      }, {
+        label: '计划类别',
+        prop: 'tags',
+        align: 'left',
+        slotBody: 'tag',
+        width: '250px'
+      }, {
+        hidden: !this.isNewGaokao,
+        label: '选考科目',
+        prop: 'course',
+        width: '140px',
+        formatter
+      }, {
+        label: '录取人数',
+        prop: 'numReal',
+        width: '80px',
+        formatter
+      }, {
+        label: '最低分',
+        prop: 'score',
+        width: '80px',
+        formatter
+      }, {
+        label: '位次',
+        prop: 'seat',
+        width: '80px',
+        formatter
+      }, {
+        label: '专业/备注',
+        prop: 'marjorDirection',
+        slotBody: 'marjorDirection',
+        align: 'left',
+        formatter
+      }]
+    }
+  },
+  watch: {
+    'firedParams.year': function(val) {
+      if (val) this.ensureVoluntaryData({ year: val })
+    }
+  },
+  mounted() {
+    this.loading = true // 防止页面闪烁
+  },
+  methods: {
+    handleSearch() {
+      this.query.pageNum = 1
+      this.getList()
+    },
+    handleQuery(model) {
+      this.firedParams = model
+      this.handleSearch()
+    },
+    async getList() {
+      this.loading = true
+      try {
+        const res = await getPreEnroll({ ...this.query, ...this.firedParams })
+        // noinspection JSUnresolvedVariable
+        res.rows.forEach(r => r.tags = r.subTag ? r.tag + '>' + r.subTag : r.tag)
+        this.rows = res.rows
+        this.total = res.total
+      } finally {
+        this.loading = false
+      }
+    },
+    toDetail(row) {
+      this.transferTo('/career/plan/UniversityDetail', { code: row.universityCode })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tag-item::before {
+  /* a little dot before each item */
+  content: '•';
+  position: absolute;
+  left: -10px;
+}
+</style>

src/views/career/PrevBatch/PrevShiftLineV2.vue

@@ -0,0 +1,37 @@
+<script>
+import { getPreEnrollV2 } from '@/api/webApi/prev-batch'
+import PrevShiftLine from '@/views/career/PrevBatch/PrevShiftLine.vue'
+
+export default {
+  name: 'PrevShiftLineV2',
+  extends: PrevShiftLine,
+  data() {
+    return {
+      subMajorMode: true
+    }
+  },
+  methods: {
+    async getList() {
+      this.loading = true
+      try {
+        const res = await getPreEnrollV2({ ...this.query, ...this.firedParams })
+        // noinspection JSUnresolvedVariable
+        res.rows.forEach(r => r.tags = r.subTag ? r.tag + '>' + r.subTag : r.tag)
+        this.rows = res.rows
+        this.total = res.total
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tag-item::before {
+  /* a little dot before each item */
+  content: '•';
+  position: absolute;
+  left: -10px;
+}
+</style>

src/views/career/PrevBatch/components/EnrollPlanTags.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="pl10">
+    <div v-for="(item, idx) in value.split('>')" :key="idx" :style="{marginLeft: (idx*10)+'px'}" class="tag-item f13 rel">{{ item }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EnrollPlanTags',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tag-item::before {
+  /* a little dot before each item */
+  content: '•';
+  position: absolute;
+  left: -10px;
+}
+</style>

src/views/career/PrevBatch/components/SubMajorTable.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-descriptions :column="isNewGaokao?12:11" direction="vertical" :colon="false" border class="enroll-plan-table-v2">
+    <enroll-plan-tags slot="title" :value="row.tag" />
+    <el-descriptions-item label="院校代码" content-class-name="bold">{{ row.collegeCode || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="院校名称" :span="7" content-class-name="max-width-cell">
+      <div class="fx-row ai-cen">
+        <div class="pointer hover-primary bold" @click="$emit('university')">{{ row.universityName }}</div>
+        <i v-if="showShiftLineEntry" class="el-icon-data-analysis ml12 f-active pointer" @click="$emit('shift-line')">查看历年分数</i>
+      </div>
+      {{ row.marjorDirection }}
+    </el-descriptions-item>
+    <slot v-bind="row">
+      <!--   定制内容，默认为计划列   -->
+      <el-descriptions-item label="计划">{{ row.planCount || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="学费">{{ row.xuefei || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="学制">{{ row.xuezhi || '-' }}</el-descriptions-item>
+    </slot>
+    <el-descriptions-item v-if="isNewGaokao" label="选科">{{ row.course || '-' }}</el-descriptions-item>
+    <template v-for="m in row.subMajors">
+      <el-descriptions-item :key="`${m.id}_${0}`" label="专业代码">{{ m.marjorBelongs || '-' }}</el-descriptions-item>
+      <el-descriptions-item :key="`${m.id}_${1}`" label="专业名称" :span="7" content-class-name="max-width-cell">
+        {{ m.marjorName + m.marjorDirection }}
+      </el-descriptions-item>
+      <slot v-bind="m">
+        <!--   定制内容，默认为计划列；NOTE：此slot与父表相同   -->
+        <el-descriptions-item :key="`${m.id}_${2}`" label="计划">{{ m.planCount || '-' }}</el-descriptions-item>
+        <el-descriptions-item :key="`${m.id}_${3}`" label="学费">{{ m.xuefei || '-' }}</el-descriptions-item>
+        <el-descriptions-item :key="`${m.id}_${4}`" label="学制">{{ m.xuezhi || '-' }}</el-descriptions-item>
+      </slot>
+      <el-descriptions-item v-if="isNewGaokao" :key="`${m.id}_${5}`" label="选科">{{
+        m.course || '-'
+      }}
+      </el-descriptions-item>
+    </template>
+  </el-descriptions>
+</template>
+
+<script>
+import EnrollPlanTags from '@/views/career/PrevBatch/components/EnrollPlanTags.vue'
+
+export default {
+  name: 'SubMajorTable',
+  components: { EnrollPlanTags },
+  props: {
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    isNewGaokao: {
+      type: Boolean,
+      default: false
+    },
+    showShiftLineEntry: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.enroll-plan-table-v2 {
+  .el-descriptions__header {
+    border: 1px solid #EBEEF5;
+    margin-bottom: -1px;
+    margin-top: 20px;
+    padding: 10px;
+  }
+
+  .max-width-cell {
+    min-width: 30vw;
+    max-width: 30vw;
+  }
+
+  .el-descriptions__table > tbody:nth-child(n+3) > tr:first-of-type {
+    display: none;
+  }
+}
+</style>

src/views/career/PrevBatch/formatted.vue

@@ -0,0 +1,136 @@
+<template>
+  <layout>
+    <el-container v-loading="loading">
+      <el-aside width="400" class="tree-container">
+        <div class="bg-white pd20">
+          <el-select v-model="query.year" placeholder="请选择年份" @change="handleYearChange">
+            <el-option v-for="item in queryData.years" :key="item.label" :label="item.label" :value="item.value" />
+          </el-select>
+          <el-input v-model="tagKeyword" placeholder="输入类别名称进行筛选" class="mt20" />
+          <el-tree
+            ref="tree"
+            class="mt10"
+            :data="preTree"
+            node-key="value"
+            default-expand-all
+            highlight-current
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            @node-click="handleTagChange"
+          />
+        </div>
+      </el-aside>
+      <el-main class="content-container">
+        <div class="bg-white pb40 pl20 pr20">
+          <div class="text-right pt20">
+            <el-input
+              v-model="query.keyword"
+              placeholder="请输入院校/专业名称"
+              suffix-icon="el-icon-search"
+              style="width: 250px"
+              clearable
+              @keyup.enter.native="handleSearch"
+            />
+            <el-button type="primary" class="ml10" @click="handleSearch">搜索</el-button>
+          </div>
+          <sub-major-table
+            v-for="row in rows"
+            :key="row.id"
+            :row="row"
+            :is-new-gaokao="isNewGaokao"
+            show-shift-line-entry
+            @university="toDetail(row)"
+            @shift-line="toShiftLine(row)"
+          />
+          <evaluation-empty v-if="!rows.length" title="暂无数据" class="mt20" />
+          <vip-guide-more v-if="total>1&&!isBind" />
+          <pagination :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="getList" />
+        </div>
+      </el-main>
+    </el-container>
+  </layout>
+</template>
+
+<script>
+import Layout from '@/layout/simple'
+import PrevEnrollPlanV2 from '@/views/career/PrevBatch/PrevEnrollPlanV2.vue'
+
+export default {
+  name: 'Formatted',
+  components: { Layout },
+  extends: PrevEnrollPlanV2,
+  data() {
+    return {
+      tagKeyword: ''
+    }
+  },
+  watch: {
+    'query.year': function() {
+      this.query.tagCode = ''
+      this.tagKeyword = ''
+      this.loadPreTree({ year: this.query.year })
+    },
+    'tagKeyword': function(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  methods: {
+    filterNode(value, data) {
+      console.log('filterNode', value, data)
+      if (!value) return true
+      if (data.value == this.query.tagCode) return true // keep the current selected node
+      return data.label.indexOf(value) !== -1
+    },
+    async initProcess() {
+      await this.initQueryYear()
+      // await this.initQueryType() // ignore query.type
+      await this.getList()
+    },
+    handleTagChange(node) {
+      if (this.query.tagCode != node.value) {
+        this.query.tagCode = node.value
+        this.getList()
+      } else {
+        // set el-tree highlighted node
+        this.$refs.tree.setCurrentKey(null)
+        this.query.tagCode = ''
+        this.getList()
+      }
+    },
+    toShiftLine(row) {
+      const next = { code: row.universityCode, tab: 7 }
+      this.transferTo('/career/plan/UniversityDetail', next, null, '_blank')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-container {
+  width: 400px;
+  height: calc(100vh - 68px);
+  overflow-y: auto;
+  padding: 20px;
+  ::v-deep .el-tree-node__content {
+    height: fit-content;
+  }
+  ::v-deep .el-tree-node__label {
+    flex: 1;
+    white-space: normal;
+    line-height: 1.3;
+    padding: 4px 0;
+  }
+}
+
+.content-container {
+  height: calc(100vh - 68px);
+  overflow-y: auto;
+}
+
+.el-tree--highlight-current::v-deep {
+  .el-tree-node.is-current > .el-tree-node__content {
+    background-color: var(--themeColor);
+    color: #FFFFFF;
+  }
+}
+</style>

src/views/career/components/CareerHolland.vue

@@ -1,12 +1,12 @@
 <template>
-  <div style="padding:0px 20%;" ref="careerHolland">
+  <div ref="careerHolland" style="padding:0px 20%;">
     <el-row style="color:#1A74D3;text-align:center;margin:48px 0px 32px 0px">专业兴趣评测（HOLLAND）</el-row>
-    <el-row style="margin-bottom:60px;" id="steps">
+    <el-row id="steps" style="margin-bottom:60px;">
       <el-steps :active="active">
-        <el-step :class="{'lastStep':active>1}" :status="active>1?'success':''"></el-step>
-        <el-step :class="{'lastStep':active>2}" :status="active>2?'success':''"></el-step>
-        <el-step :class="{'lastStep':active>3}" :status="active>3?'success':''"></el-step>
-        <el-step :class="{'lastStep':active>4}" :status="active>4?'success':''"></el-step>
+        <el-step :class="{'lastStep':active>1}" :status="active>1?'success':''" />
+        <el-step :class="{'lastStep':active>2}" :status="active>2?'success':''" />
+        <el-step :class="{'lastStep':active>3}" :status="active>3?'success':''" />
+        <el-step :class="{'lastStep':active>4}" :status="active>4?'success':''" />
         <el-step :class="{'lastStep':active===5}">20</el-step>
         <!--<el-step status="success"></el-step>-->
       </el-steps>
@@ -14,40 +14,40 @@
     <!--  -->
     <div v-if="active<5">
       <el-row v-if="stepDatas.length">
-        <h2 style="margin:0px;">{{stepTitle('header',active)}}</h2>
+        <h2 style="margin:0px;">{{ stepTitle('header',active) }}</h2>
         <!--<p style="margin-left: 35px;margin-top: 10px">{{stepTitle('title',active)}}</p>-->
-        <h3 style="margin-left: 35px;margin-top: 10px;font-weight: 400;font-family: PingFang SC;color:#333333">{{stepTitle('title',active)}}</h3>
+        <h3 style="margin-left: 35px;margin-top: 10px;font-weight: 400;font-family: PingFang SC;color:#333333">{{ stepTitle('title',active) }}</h3>
       </el-row>
       <div v-if="questions.length" style="margin-left: 35px;margin-top: 10px;font-weight: 400;font-family: PingFang SC; color:#333333;margin-bottom:50px;">
         <template>
-          <h3 style="margin: 0px;font-weight: 400;font-family: PingFang SC; color:#333333">{{questions[questionsKeys].title}}</h3>
+          <h3 style="margin: 0px;font-weight: 400;font-family: PingFang SC; color:#333333">{{ questions[questionsKeys].title }}</h3>
           <el-row v-if="active<4">
             <!--选项-->
             <el-checkbox-group v-model="questionsAnswers">
-              <div style="margin: 24px 0;" v-for="item in questions[questionsKeys].options" :key="item.no+item.label">
-                <el-checkbox :label="item.no">{{item.label}}</el-checkbox>
+              <div v-for="item in questions[questionsKeys].options" :key="item.no+item.label" style="margin: 24px 0;">
+                <el-checkbox :label="item.no">{{ item.label }}</el-checkbox>
               </div>
 
             </el-checkbox-group>
           </el-row>
           <el-row v-else>
             <el-radio-group v-model="questionsAnswers">
-              <div style="margin: 24px 0;" v-for="item in sourceArr" :key="item.value+item.label">
-                <el-radio :label="item.value">{{item.label}}</el-radio>
+              <div v-for="item in sourceArr" :key="item.value+item.label" style="margin: 24px 0;">
+                <el-radio :label="item.value">{{ item.label }}</el-radio>
               </div>
             </el-radio-group>
           </el-row>
         </template>
       </div>
-      <el-divider></el-divider>
+      <el-divider />
       <el-row style="padding: 50px 0;text-align: center">
-        <el-button @click="nextOption" type="primary">下一题</el-button>
+        <el-button type="primary" @click="nextOption">下一题</el-button>
       </el-row>
     </div>
     <!--测试完成-->
     <div v-else style="height: 300px;text-align: center;margin-top:80px;">
       <div>
-        <el-image :src="require('@/assets/images/career/icon_data.png')"></el-image>
+        <el-image :src="require('@/assets/images/career/icon_data.png')" />
       </div>
       <div style="margin-top:20px;">
         <el-button type="primary" @click="goReportPage">查看报告</el-button>
@@ -57,17 +57,17 @@
 </template>
 <script>
 import { selectEvalueSteps, selectquestions, saveQuestions } from '@/api/webApi/career-evalua'
-import { mapState } from 'vuex';
+import { mapState } from 'vuex'
 export default {
   name: 'CareerHolland',
   data() {
     return {
-      active: 1,  //步骤
-      stepDatas: [],  //步骤信息(大问题)
-      questions: [],  //问题以及选项
-      questionsKeys: 0, //问题的编码
-      answers: [],//存放所有问题答案
-      questionsAnswers: [], //存放单个问题的答案
+      active: 1, // 步骤
+      stepDatas: [], // 步骤信息(大问题)
+      questions: [], // 问题以及选项
+      questionsKeys: 0, // 问题的编码
+      answers: [], // 存放所有问题答案
+      questionsAnswers: [], // 存放单个问题的答案
       sourceArr: [
         { label: '1分', value: 1 },
         { label: '2分', value: 2 },
@@ -75,16 +75,16 @@ export default {
         { label: '4分', value: 4 },
         { label: '5分', value: 5 },
         { label: '6分', value: 6 },
-        { label: '7分', value: 7 },
+        { label: '7分', value: 7 }
       ],
       details: [],
-      reportId: '' //测试后的报告ID
+      reportId: '' // 测试后的报告ID
     }
   },
   computed: {
     ...mapState({ theme: state => state.settings.theme }),
     stepTitle() {
-      return function (type, step) {
+      return function(type, step) {
         if (type === 'header') {
           let titleStr = ''
           if (this.stepDatas[step - 1].title.indexOf(' ') !== -1) {
@@ -96,7 +96,7 @@ export default {
         } else if (type === 'title') {
           let titleStr = ''
           if (step === 4) {
-            titleStr = '你可以针对自己在每一个方面的能力，先与同龄人比较，经斟酌以后再在下表中对自己的能力逐一评价。评分请选择适当的数字。4 分代表中等水平，数字越大表示你该项的能力越强，数字越小表示你该项的能力越弱。 注意，请勿全部选择同样的数字，因为你的每项能力不可能完全一样。';
+            titleStr = '你可以针对自己在每一个方面的能力，先与同龄人比较，经斟酌以后再在下表中对自己的能力逐一评价。评分请选择适当的数字。4 分代表中等水平，数字越大表示你该项的能力越强，数字越小表示你该项的能力越弱。 注意，请勿全部选择同样的数字，因为你的每项能力不可能完全一样。'
             return titleStr
           }
           if (this.stepDatas[step - 1].title.indexOf(' ') !== -1) {
@@ -109,18 +109,8 @@ export default {
       }
     }
   },
-  watch: {
-    theme: {
-      immediate: true,
-      handler(val) {
-        this.$nextTick(() => {
-          this.$refs.careerHolland.style.setProperty('--themeColor', val)
-        })
-      }
-    }
-  },
   created() {
-    this.getEvalueSteps();
+    this.getEvalueSteps()
     this.getQuestions(this.active)
   },
   methods: {
@@ -146,15 +136,15 @@ export default {
             details: this.answers
           }
           saveQuestions(params).then(res => {
-            //357190cfa99e20e56826675e6774e825
-            this.active = 5;
+            // 357190cfa99e20e56826675e6774e825
+            this.active = 5
             this.reportId = res.data
           })
-        } else { //进入到了下一个大问题
-          this.active += 1;
-          this.questions = [];
-          this.getQuestions(this.active);
-          this.questionsAnswers = [];
+        } else { // 进入到了下一个大问题
+          this.active += 1
+          this.questions = []
+          this.getQuestions(this.active)
+          this.questionsAnswers = []
           this.questionsKeys = 0
         }
       }
@@ -167,15 +157,14 @@ export default {
     getQuestions(id) {
       const params = {
         stepId: id + 1
-      };
+      }
       selectquestions(params).then(res => {
         this.questions = res.rows
       })
     },
     goReportPage() {
       this.$router.push({
-        name: 'CareerAssistant',
-        query: {id: 2}
+        path: '/user/assistant?id=' + 2
       })
     }
   }
@@ -205,10 +194,14 @@ export default {
       }
     }
   }
+  .el-step__head.is-success {
+    color: var(--themeActive);
+    border-color: var(--themeActive);
+  }
   .lastStep {
     .is-success {
       .el-step__icon.is-text {
-        background-color: var(--themeColor);
+        background-color: var(--themeActive);
         color: #ffffff;
       }
     }

src/views/career/components/CareerHollandReportDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="detail bg-page fx-column fx-cen-cen">
-    <index-card title="测评记录" sub-title="专业兴趣测评" class="width100">
+    <index-card title="测评记录" sub-title="专业兴趣测评" class="index-block">
       <el-button slot="more" v-has-history size="small" round @click="$router.back()">返回</el-button>
       <holland :holl-info="hollInfo" />
     </index-card>

src/views/career/components/CareerHollandReportList.vue

@@ -1,101 +1,99 @@
 <template>
-  <div class="app-container">
-    <evaluation-title class="mb10" title="测评记录" nav-back-button></evaluation-title>
-    <el-card>
-      <el-table :data="tableData" script border v-loading="loading">
-        <el-table-column prop="id" width="100" label="ID" align="center"></el-table-column>
-        <el-table-column prop="createTime" width="180" label="测试时间" align="center"></el-table-column>
-        <el-table-column prop="scorer" label="现实型" align="center"></el-table-column>
-        <el-table-column prop="scorei" label="调查型"  align="center"></el-table-column>
-        <el-table-column prop="scorea" label="艺术型"  align="center"></el-table-column>
-        <el-table-column prop="scores" label="社会型" align="center"></el-table-column>
-        <el-table-column prop="scoree" label="企业型"  align="center"></el-table-column>
-        <el-table-column prop="scorec" label="常规型" align="center"></el-table-column>
-        <el-table-column label="评测结果"  align="center">
-          <template #default="{row}">
-            <el-link type="primary" :underline="false" @click="goHollandDetails(row)"> {{ row.ruleCode }}</el-link>
+  <div class="bg-page fx-column fx-cen-cen">
+    <index-card title="测评记录" sub-title="职业兴趣测评" class="index-block">
+      <el-button slot="more" v-has-history size="small" round @click="$router.back()">返回</el-button>
+      <el-table v-loading="loading" :data="tableData" script border>
+        <el-table-column prop="id" width="100" label="ID" align="center" />
+        <el-table-column prop="createTime" width="180" label="测试时间" align="center" />
+        <el-table-column prop="scorer" label="现实型" align="center" />
+        <el-table-column prop="scorei" label="调查型" align="center" />
+        <el-table-column prop="scorea" label="艺术型" align="center" />
+        <el-table-column prop="scores" label="社会型" align="center" />
+        <el-table-column prop="scoree" label="企业型" align="center" />
+        <el-table-column prop="scorec" label="常规型" align="center" />
+        <el-table-column label="评测结果" align="center">
+          <template slot-scope="scope">
+            <el-link type="primary" :underline="false" @click="goDetails(scope.row)"> {{ scope.row.ruleCode }}</el-link>
           </template>
         </el-table-column>
       </el-table>
       <el-pagination
-        style="margin-top:10px;"
         :page-sizes="[10,20,30,40,50,60,70,80,90,100]"
-        :page-size=tableParams.limit
+        :page-size="tableParams.limit"
         layout="prev,pager,next,jumper,total,sizes"
         :total="tableParams.examRecordTotal"
         @current-change="currentChange"
         @size-change="sizeChange"
-      >
-      </el-pagination>
-    </el-card>
-
+      />
+    </index-card>
   </div>
 </template>
 
 <script>
-  import { selectReportList} from '@/api/webApi/career-evalua'
-  export default {
-    name: "CareerHollandReportList",
-    data(){
-      return {
-        tableParams:{
-          examRecordTotal:0,
-          pageSize:1,
-          limit:20
-        },
-        tableData:[],
-        loading:false
+import { selectReportList } from '@/api/webApi/career-evalua'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+
+export default {
+  name: 'CareerHollandReportList',
+  components: { IndexCard },
+  data() {
+    return {
+      tableParams: {
+        examRecordTotal: 0,
+        pageSize: 1,
+        limit: 20
+      },
+      tableData: [],
+      loading: false
+    }
+  },
+  watch: {
+    '$route': {
+      immediate: true,
+      handler(val) {
+        this.getReportList()
       }
+    }
+  },
+  methods: {
+    goDetails(item) {
+      this.$router.push({ path: '/career/components/CareerHollandReportDetail', query: { code: item.code }})
+      // this.$router.push({ name: 'UniversityDetail', params: { id: id } })
     },
-    watch:{
-      '$route':{
-        immediate:true,
-        handler(val){
-          this.getReportList();
-        }
-      }
+    sizeChange(e) {
+      // 每页条数
+      this.tableParams.limit = e
+      this.getReportList()
     },
-    methods:{
-      goDetails(id){
-        // this.$router.push({ name: 'UniversityDetail', params: { id: id } })
-      },
-      sizeChange(e){
-        //每页条数
-        this.tableParams.limit=e
-        this.getReportList()
-      },
-      currentChange(e){
-        //页数
-        this.tableParams.pageSize=e
-        this.getReportList()
-      },
-      getReportList(){
-        this.loading=true
-        const params={
-          pageNum:this.tableParams.pageSize,  //页数
-          pageSize:this.tableParams.limit  //每页的数量
-        }
-        selectReportList(params).then(res=>{
-          this.tableData=res.rows
-          this.tableParams.examRecordTotal=res.total
-          this.loading=false
-        })
-      },
-      goHollandDetails(item) {
-        this.$router.push({ name: 'CareerHollandReport', query: { code: item.code }})
+    currentChange(e) {
+      // 页数
+      this.tableParams.pageSize = e
+      this.getReportList()
+    },
+    getReportList() {
+      this.loading = true
+      const params = {
+        pageNum: this.tableParams.pageSize, // 页数
+        pageSize: this.tableParams.limit // 每页的数量
       }
+      selectReportList(params).then(res => {
+        this.tableData = res.rows
+        this.tableParams.examRecordTotal = res.total
+        this.loading = false
+      })
     }
   }
+}
 </script>
 
 <style lang="scss">
-  #univerTable{
-    .el-table .descending .sort-caret.descending{
-      border-top-color:#ffffff;
-    }
-    .el-table .ascending .sort-caret.ascending{
-      border-bottom-color:#ffffff;
-    }
+#univerTable {
+  .el-table .descending .sort-caret.descending {
+    border-top-color: #ffffff;
   }
-</style>
 
+  .el-table .ascending .sort-caret.ascending {
+    border-bottom-color: #ffffff;
+  }
+}
+</style>

src/views/career/components/CareerMbti.vue

@@ -1,12 +1,12 @@
 <template>
-  <div id="bmti" style="padding:0px 20%;" ref="careerMbti">
+  <div id="bmti" ref="careerMbti" style="padding:0px 20%;">
     <el-row style="color:#1A74D3;text-align:center;margin:48px 0px 32px 0px">职业性格测评（MBTI）</el-row>
-    <el-row style="margin-bottom:60px;" id="steps">
-      <el-steps :active="active" >
-        <el-step :class="{'lastStep':active>1}" :status="active>1?'success':''"></el-step>
-        <el-step :class="{'lastStep':active>2}" :status="active>2?'success':''"></el-step>
-        <el-step :class="{'lastStep':active>3}" :status="active>3?'success':''"></el-step>
-        <el-step :class="{'lastStep':active>4}" :status="active>4?'success':''"></el-step>
+    <el-row id="steps" style="margin-bottom:60px;">
+      <el-steps :active="active">
+        <el-step :class="{'lastStep':active>1}" :status="active>1?'success':''" />
+        <el-step :class="{'lastStep':active>2}" :status="active>2?'success':''" />
+        <el-step :class="{'lastStep':active>3}" :status="active>3?'success':''" />
+        <el-step :class="{'lastStep':active>4}" :status="active>4?'success':''" />
         <el-step :class="{'lastStep':active===5}">20</el-step>
         <!--<el-step status="success"></el-step>-->
       </el-steps>
@@ -14,21 +14,21 @@
     <!--  -->
     <div v-if="active<5" id="content" style="min-height: 400px;">
       <el-row v-if="stepDatas.length">
-        <h2 style="margin:0px;">{{stepTitle('header',active)}}</h2>
-        <h3 style="margin-left: 35px;margin-top: 10px;font-weight: 400;font-family: PingFang SC;color:#333333">{{stepTitle('title',active)}}</h3>
+        <h2 style="margin:0px;">{{ stepTitle('header',active) }}</h2>
+        <h3 style="margin-left: 35px;margin-top: 10px;font-weight: 400;font-family: PingFang SC;color:#333333">{{ stepTitle('title',active) }}</h3>
       </el-row>
       <div v-if="questions.length" style="margin-left: 35px;margin-top: 10px;font-weight: 400;font-family: PingFang SC; color:#333333;margin-bottom:50px;">
         <template>
-          <h3 style="margin: 0px;font-weight: 400;font-family: PingFang SC; color:#333333">{{questions[questionsKeys].title}}</h3>
+          <h3 style="margin: 0px;font-weight: 400;font-family: PingFang SC; color:#333333">{{ questions[questionsKeys].title }}</h3>
           <el-row>
             <!--选项-->
             <el-radio-group v-model="questionsAnswers" @change="nextOption">
               <div style="margin:30px 0 40px 0;font-size: 20px;">
-                <el-radio :label="questions[questionsKeys].valueA">A {{questions[questionsKeys].optionA}}</el-radio>
+                <el-radio :label="questions[questionsKeys].valueA">A {{ questions[questionsKeys].optionA }}</el-radio>
+              </div>
+              <div>
+                <el-radio :label="questions[questionsKeys].valueB">B {{ questions[questionsKeys].optionB }}</el-radio>
               </div>
-             <div>
-               <el-radio :label="questions[questionsKeys].valueB">B {{questions[questionsKeys].optionB}}</el-radio>
-             </div>
             </el-radio-group>
           </el-row>
         </template>
@@ -37,7 +37,7 @@
     <!--测试完成-->
     <div v-else style="height: 300px;text-align: center;margin-top:80px;">
       <div>
-        <el-image :src="require('@/assets/images/career/icon_data.png')"></el-image>
+        <el-image :src="require('@/assets/images/career/icon_data.png')" />
       </div>
       <div style="margin-top:20px;">
         <el-button type="primary" @click="goReportPage">查看报告</el-button>
@@ -46,117 +46,106 @@
   </div>
 </template>
 <script>
-  import {selectMbtiEvalueSteps,selectMbtiQuestions,saveMbtiQuestions} from '@/api/webApi/career-evalua'
-  import {mapState} from 'vuex';
-  export default {
-    name:'CareerMbti',
-    data(){
-      return {
-        active:1,  //步骤
-        stepDatas:[],  //步骤信息(大问题)
-        questions:[],  //问题以及选项
-        questionsKeys:0, //问题的编码
-        answers:[],//存放所有问题答案
-        questionsAnswers:'', //存放单个问题的答案
-        details:[],
-        reportId:'' //测试后的报告ID
-      }
-    },
-    computed:{
-      ...mapState({theme: state => state.settings.theme}),
-      stepTitle(){
-        return function (type,step){
-          if(type==='header'){
-            let titleStr=''
-            if(this.stepDatas[step-1].title.indexOf(' ')!==-1){
-              titleStr =this.stepDatas[step-1].title.substr(0,this.stepDatas[step-1].title.indexOf(' '))
-            }else{
-              titleStr=this.stepDatas[step-1].title
-            }
-            return titleStr
-          }else if(type==='title'){
-            let titleStr=''
-            if(step===4){
-              titleStr='你可以针对自己在每一个方面的能力，先与同龄人比较，经斟酌以后再在下表中对自己的能力逐一评价。评分请选择适当的数字。4 分代表中等水平，数字越大表示你该项的能力越强，数字越小表示你该项的能力越弱。 注意，请勿全部选择同样的数字，因为你的每项能力不可能完全一样。';
-              return titleStr
-            }
-            if(this.stepDatas[step-1].title.indexOf(' ')!==-1){
-              titleStr =this.stepDatas[step-1].title.substr(this.stepDatas[step-1].title.indexOf(' '))
-            }else{
-              titleStr=''
-            }
+import { selectMbtiEvalueSteps, selectMbtiQuestions, saveMbtiQuestions } from '@/api/webApi/career-evalua'
+import { mapState } from 'vuex'
+export default {
+  name: 'CareerMbti',
+  data() {
+    return {
+      active: 1, // 步骤
+      stepDatas: [], // 步骤信息(大问题)
+      questions: [], // 问题以及选项
+      questionsKeys: 0, // 问题的编码
+      answers: [], // 存放所有问题答案
+      questionsAnswers: '', // 存放单个问题的答案
+      details: [],
+      reportId: '' // 测试后的报告ID
+    }
+  },
+  computed: {
+    ...mapState({ theme: state => state.settings.theme }),
+    stepTitle() {
+      return function(type, step) {
+        if (type === 'header') {
+          let titleStr = ''
+          if (this.stepDatas[step - 1].title.indexOf(' ') !== -1) {
+            titleStr = this.stepDatas[step - 1].title.substr(0, this.stepDatas[step - 1].title.indexOf(' '))
+          } else {
+            titleStr = this.stepDatas[step - 1].title
+          }
+          return titleStr
+        } else if (type === 'title') {
+          let titleStr = ''
+          if (step === 4) {
+            titleStr = '你可以针对自己在每一个方面的能力，先与同龄人比较，经斟酌以后再在下表中对自己的能力逐一评价。评分请选择适当的数字。4 分代表中等水平，数字越大表示你该项的能力越强，数字越小表示你该项的能力越弱。 注意，请勿全部选择同样的数字，因为你的每项能力不可能完全一样。'
             return titleStr
           }
+          if (this.stepDatas[step - 1].title.indexOf(' ') !== -1) {
+            titleStr = this.stepDatas[step - 1].title.substr(this.stepDatas[step - 1].title.indexOf(' '))
+          } else {
+            titleStr = ''
+          }
+          return titleStr
         }
       }
-    },
-    watch:{
-      theme:{
-        immediate:true,
-        handler(val){
-          this.$nextTick(()=>{
-            this.$refs.careerMbti.style.setProperty('--themeColor', val)
+    }
+  },
+  created() {
+    this.getEvalueSteps()
+    this.getQuestions(this.active)
+  },
+  methods: {
+    nextOption() {
+      const obj = {
+        questionId: this.questions[this.questionsKeys].id,
+        answer: this.questionsAnswers
+      }
+      if (obj.answer === '') {
+        this.msgInfo('必须选择一项')
+        return
+      }
+      if (this.questionsKeys < this.questions.length - 1) {
+        this.answers.push(obj)
+        this.questionsAnswers = ''
+        this.questionsKeys += 1
+      } else {
+        if (this.active >= this.stepDatas.length) {
+          const params = {
+            details: this.answers
+          }
+          saveMbtiQuestions(params).then(res => {
+            this.active = 5
+            this.reportId = res.data
           })
+        } else { // 进入到了下一个大问题
+          this.active += 1
+          this.questions = []
+          this.getQuestions(this.active)
+          this.questionsAnswers = ''
+          this.questionsKeys = 0
         }
       }
     },
-    created(){
-      this.getEvalueSteps();
-      this.getQuestions(this.active)
+    getEvalueSteps() {
+      selectMbtiEvalueSteps().then(res => {
+        this.stepDatas = res.data
+      })
     },
-    methods:{
-      nextOption(){
-        const obj={
-          questionId:this.questions[this.questionsKeys].id,
-          answer:this.questionsAnswers
-        }
-        if(obj.answer===''){
-          this.msgInfo('必须选择一项')
-          return
-        }
-        if(this.questionsKeys<this.questions.length-1){
-          this.answers.push(obj)
-          this.questionsAnswers=''
-          this.questionsKeys+=1
-        }else{
-          if(this.active>=this.stepDatas.length){
-            const params={
-              details:this.answers
-            }
-            saveMbtiQuestions(params).then(res=>{
-              this.active=5;
-              this.reportId=res.data
-            })
-          }else{ //进入到了下一个大问题
-            this.active+=1;
-            this.questions=[];
-            this.getQuestions(this.active);
-            this.questionsAnswers='';
-            this.questionsKeys=0
-          }
-        }
-      },
-      getEvalueSteps(){
-        selectMbtiEvalueSteps().then(res=>{
-          this.stepDatas=res.data
-        })
-      },
-      getQuestions(id){
-        const params={
-          stepId:id
-        };
-        selectMbtiQuestions(params).then(res=>{
-          this.questions=res.rows
-        })
-      },
-      goReportPage() {
+    getQuestions(id) {
+      const params = {
+        stepId: id
+      }
+      selectMbtiQuestions(params).then(res => {
+        this.questions = res.rows
+      })
+    },
+    goReportPage() {
       this.$router.push({
-        name: 'CareerAssistant',
-        query: {id: 2}
+        path: '/user/assistant?id=' + 2
       })
     }
-    }
   }
+}
 </script>
 
 <style lang="scss">
@@ -181,10 +170,14 @@
         }
       }
     }
+    .el-step__head.is-success {
+      color: var(--themeActive);
+      border-color: var(--themeActive);
+    }
     .lastStep{
       .is-success{
         .el-step__icon.is-text{
-          background-color: var(--themeColor);
+          background-color: var(--themeActive);
           color: #ffffff;
         }
       }

src/views/career/components/CareerMbtiReportDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="detail bg-page fx-column fx-cen-cen">
-    <index-card title="测评记录" sub-title="迈尔斯布里格斯类型指标" class="width100">
+    <index-card title="测评记录" sub-title="迈尔斯布里格斯类型指标" class="index-block">
       <el-button slot="more" v-has-history size="small" round @click="$router.back()">返回</el-button>
       <component :is="compName" :scores="scores" />
     </index-card>

src/views/career/components/CareerMbtiReportList.vue

@@ -1,99 +1,100 @@
 <template>
-  <div class="app-container">
-    <evaluation-title class="mb10" title="测评记录" nav-back-button></evaluation-title>
-    <el-card>
-      <el-table :data="tableData" script border v-loading="loading">
-        <el-table-column prop="id" width="80" label="ID" align="center"></el-table-column>
-        <el-table-column prop="createTime" width="170" label="测试时间" align="center"></el-table-column>
-        <el-table-column prop="scoreE" label="外向" align="center"></el-table-column>
-        <el-table-column prop="scoreI" label="内向"  align="center"></el-table-column>
-        <el-table-column prop="scoreS" label="实感"  align="center"></el-table-column>
-        <el-table-column prop="scoreN" label="直觉" align="center"></el-table-column>
-        <el-table-column prop="scoreT" label="思考"  align="center"></el-table-column>
-        <el-table-column prop="scoreF" label="情感" align="center"></el-table-column>
-        <el-table-column prop="scoreJ" label="判断" align="center"></el-table-column>
-        <el-table-column prop="scoreP" label="认知" align="center"></el-table-column>
-        <el-table-column label="评测结果"  align="center">
-          <template #default="{row}">
-            <el-link type="primary" :underline="false" @click="goMbtiDetails(row)"> {{ row.ruleCode }}</el-link>
+  <div class="bg-page fx-column fx-cen-cen">
+    <index-card title="测评记录" sub-title="迈尔斯布里格斯类型指标" class="index-block">
+      <el-button slot="more" v-has-history size="small" round @click="$router.back()">返回</el-button>
+      <el-table v-loading="loading" :data="tableData" script border>
+        <el-table-column prop="id" width="80" label="ID" align="center" />
+        <el-table-column prop="createTime" width="170" label="测试时间" align="center" />
+        <el-table-column prop="scoreE" label="外向" align="center" />
+        <el-table-column prop="scoreI" label="内向" align="center" />
+        <el-table-column prop="scoreS" label="实感" align="center" />
+        <el-table-column prop="scoreN" label="直觉" align="center" />
+        <el-table-column prop="scoreT" label="思考" align="center" />
+        <el-table-column prop="scoreF" label="情感" align="center" />
+        <el-table-column prop="scoreJ" label="判断" align="center" />
+        <el-table-column prop="scoreP" label="认知" align="center" />
+        <el-table-column label="评测结果" align="center">
+          <template slot-scope="scope">
+            <el-link type="primary" :underline="false" @click="goDetails(scope.row)"> {{ scope.row.ruleCode }}</el-link>
           </template>
         </el-table-column>
       </el-table>
       <el-pagination
         style="margin-top:10px;"
         :page-sizes="[10,20,30,40,50,60,70,80,90,100]"
-        :page-size=tableParams.limit
+        :page-size="tableParams.limit"
         layout="prev,pager,next,jumper,total,sizes"
         :total="tableParams.examRecordTotal"
         @current-change="currentChange"
         @size-change="sizeChange"
-      >
-      </el-pagination>
-    </el-card>
-
+      />
+    </index-card>
   </div>
 </template>
 
 <script>
-  import { selectMbtiReportList} from '@/api/webApi/career-evalua'
-  export default {
-    name: "CareerHollandReportList",
-    data(){
-      return {
-        tableParams:{
-          examRecordTotal:0,
-          pageSize:1,
-          limit:20
-        },
-        tableData:[],
-        loading:false
+import { selectMbtiReportList } from '@/api/webApi/career-evalua'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+export default {
+  name: 'CareerHollandReportList',
+  components: { IndexCard },
+  data() {
+    return {
+      tableParams: {
+        examRecordTotal: 0,
+        pageSize: 1,
+        limit: 20
+      },
+      tableData: [],
+      loading: false
+    }
+  },
+  watch: {
+    // '$route': {
+    //   immediate: true,
+    //   handler(val) {
+    //     this.getReportList()
+    //   }
+    // }
+  },
+  created() {
+    this.getReportList()
+  },
+  methods: {
+    goDetails(item) {
+      const { scoreE, scoreI, scoreS, scoreN, scoreT, scoreF, scoreJ, scoreP } = item
+      const query = {
+        code: item.ruleCode,
+        scores: [scoreE, scoreI, scoreS, scoreN, scoreT, scoreF, scoreJ, scoreP]
       }
+      this.$router.push({ path: '/career/components/CareerMbtiReportDetail', query })
+      // this.$router.push({ name: 'UniversityDetail', params: { id: id } })
     },
-    watch:{
-      '$route':{
-        immediate:true,
-        handler(val){
-          this.getReportList();
-        }
-      }
+    sizeChange(e) {
+      // 每页条数
+      this.tableParams.limit = e
+      this.getReportList()
     },
-    methods:{
-      goDetails(id){
-        // this.$router.push({ name: 'UniversityDetail', params: { id: id } })
-      },
-      sizeChange(e){
-        //每页条数
-        this.tableParams.limit=e
-        this.getReportList()
-      },
-      currentChange(e){
-        //页数
-        this.tableParams.pageSize=e
-        this.getReportList()
-      },
-      getReportList(){
-        this.loading=true
-        const params={
-          pageNum:this.tableParams.pageSize,  //页数
-          pageSize:this.tableParams.limit  //每页的数量
-        }
-        selectMbtiReportList(params).then(res=>{
-          console.log(res)
-          this.tableData=res.rows
-          this.tableParams.examRecordTotal=res.total
-          this.loading=false
-        })
-      },
-      goMbtiDetails(item) {
-        const { scoreE, scoreI, scoreS, scoreN, scoreT, scoreF, scoreJ, scoreP } = item
-        const query = {
-          code: item.ruleCode,
-          scores: [scoreE, scoreI, scoreS, scoreN, scoreT, scoreF, scoreJ, scoreP]
-        }
-        this.$router.push({ name: 'CareerMbtiReport', query })
+    currentChange(e) {
+      // 页数
+      this.tableParams.pageSize = e
+      this.getReportList()
+    },
+    getReportList() {
+      this.loading = true
+      const params = {
+        pageNum: this.tableParams.pageSize, // 页数
+        pageSize: this.tableParams.limit // 每页的数量
       }
+      selectMbtiReportList(params).then(res => {
+        console.log(res)
+        this.tableData = res.rows
+        this.tableParams.examRecordTotal = res.total
+        this.loading = false
+      })
     }
   }
+}
 </script>
 
 <style lang="scss">
@@ -106,4 +107,3 @@
     }
   }
 </style>
-

src/views/career/components/CareerTitleCard.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="index-block bg-white fx-column pl30 pr30">
+    <div class="content-wrapper pt30">
+      <div class="f24 bold f-999">{{ english }}</div>
+      <div class="f24 bold f-333 mt15">{{ name }}</div>
+      <div class="bg-primary mt10" style="width:40px;height:4px;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CareerTitleCard',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    english: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content-wrapper {
+  padding: 30px 0;
+  background-image: url("~@/assets/images/career/icon_colleges.png");
+  background-repeat: no-repeat;
+  background-position: bottom right;
+}
+</style>

src/views/career/components/CollegesLine.vue

@@ -1,185 +1,254 @@
 <template>
-  <div>
-    <el-form inline label-width="100px">
-      <el-form-item label="年限：">
-        <el-select v-model="formParams.year">
-          <el-option v-for="item in year" :key="item" :label="item" :value="item"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="报考科类：">
-        <el-select v-model="formParams.typeRes">
-          <el-option v-for="item in types" :key="item" :label="item" :value="item"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="报考批次：">
-        <el-select v-model="formParams.level">
-          <el-option v-for="item in marjorBatchs" :key="item" :label="item" :value="item"></el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <el-form label-width="100px" id="universityText">
-      <el-form-item label="院校名称：">
-        <div >
-          <el-badge type="info" value="X" class="item" style="cursor: pointer">
-            <el-button @click="dialongParams.visible=true">{{formParams.universityRes.name || '添加院校'}}</el-button>
-          </el-badge>
-        </div>
-      </el-form-item>
-    </el-form>
-    <el-divider></el-divider>
-    <div style="text-align: center" class="btn">
-      <el-button type="primary" size="medium" @click="getMarjorList">查询</el-button>
+  <div class="major-line-container">
+    <div v-if="!universityCode" class="fx-row ai-cen mb10">
+      <span class="mr10 pf f24 bold">院校名称</span>
+      <el-button type="primary" round @click="dialongParams.visible=true">
+        {{ universityRes.name || '添加院校' }}
+      </el-button>
     </div>
+    <div class="fx-row ai-cen picker-group">
+      <el-select v-model="form.year" placeholder="年份">
+        <el-option v-for="item in year" :key="item" :label="item" :value="item" />
+      </el-select>
+      <el-select v-model="form.type" placeholder="科类">
+        <el-option v-for="item in types" :key="item" :label="item" :value="item" />
+      </el-select>
+      <el-select v-model="form.level" placeholder="批次">
+        <el-option v-for="item in levels" :key="item" :label="item" :value="item" />
+      </el-select>
+      <el-select v-model="form.universityNameText" placeholder="院校/专业组" style="min-width: 350px">
+        <el-option v-for="item in universityNameTexts" :key="item" :label="item" :value="item" />
+      </el-select>
+    </div>
+    <el-divider v-if="!universityCode" />
     <!--数据列表-->
-    <div style="margin-top: 20px;">
-      <el-table :data="tableData" border v-loading="loading">
+    <div :class="universityCode?['mt20']:''">
+      <el-table v-loading="loading" :data="rows" border>
         <el-table-column prop="code" label="院校" align="center">
           <template slot-scope="scope">
-            <el-link :underline="false" @click="goDetails(scope.row)">【{{scope.row.universityName}}】</el-link>
+            <div>
+              <span v-if="disabledNameLink">{{ scope.row.universityName }}</span>
+              <el-link v-else :underline="false" @click="goDetails(scope.row)">【{{ scope.row.universityName }}】</el-link>
+            </div>
+            <div v-if="scope.row.specialProject" class="f-primary">({{ scope.row.specialProject }})</div>
           </template>
         </el-table-column>
-        <el-table-column prop="location" width="80" label="所在地" align="center"></el-table-column>
-        <el-table-column prop="collegeCode" label="院校代码" align="center"></el-table-column>
+        <el-table-column prop="location" width="80" label="所在地" align="center" />
+        <el-table-column prop="collegeCode" label="院校代码" align="center" />
         <el-table-column prop="marjorName" label="专业名称" align="center">
-            <template  slot-scope="scope">
-              <div>{{scope.row.marjorBelongs ? `[${scope.row.marjorBelongs}]` :''}}{{scope.row.marjorName}}</div>
-              <div style="color:#9DA0B4;font-size:12px">{{scope.row.marjorDirection}}</div>
-            </template>
+          <template slot-scope="scope">
+            <div>{{ scope.row.marjorBelongs ? `[${scope.row.marjorBelongs}]` : '' }}{{ scope.row.marjorName }}</div>
+            <div style="color:#9DA0B4;font-size:12px">{{ scope.row.marjorDirection }}</div>
+          </template>
         </el-table-column>
         <!--<el-table-column prop="seatRealTop" label="专业最高分位次" align="center"></el-table-column>-->
         <!--<el-table-column prop="seatRealAverage" label="专业平均分位次" align="center"></el-table-column>-->
-        <el-table-column prop="level" label="批次/段" align="center"></el-table-column>
-        <el-table-column prop="course" label="选考科目" align="center"></el-table-column>
-        <el-table-column prop="score" label="专业最低分" align="center"></el-table-column>
-        <el-table-column prop="seat" label="专业最低分位次" align="center"></el-table-column>
-        <el-table-column prop="scoreRealAverage" width="90" label="专业平均分" align="center"></el-table-column>
-        <el-table-column prop="scoreRealTop" width="90" label="专业最高分" align="center"></el-table-column>
-        <el-table-column width="80" prop="numReal" label="录取人数" align="center"></el-table-column>
+        <el-table-column prop="level" label="批次/段" align="center" />
+        <el-table-column v-if="isNewGaokao" prop="course" label="选考科目" align="center" />
+        <el-table-column v-if="!isNewGaokao" prop="type" label="科类" align="center" />
+        <el-table-column prop="score" label="最低分" align="center" :formatter="emptyCellFormatter" />
+        <el-table-column prop="seat" label="最低分位次" align="center" :formatter="emptyCellFormatter" />
+        <el-table-column prop="scoreRealAverage" width="90" label="平均分" align="center" :formatter="emptyCellFormatter" />
+        <el-table-column prop="scoreRealTop" width="90" label="最高分" align="center" :formatter="emptyCellFormatter" />
+        <el-table-column width="80" prop="numReal" label="录取人数" align="center" :formatter="emptyCellFormatter" />
       </el-table>
-      <pagination class="mt10" :total="examRecordTotal" :autoScroll="false" @pagination="getMarjorList"
-                  :page.sync="tableParams.pageNum"
-                  :limit.sync="tableParams.pageSize"
-      ></pagination>
+      <vip-guide-more v-if="!isBind&&examRecordTotal>1" />
+      <pagination
+        class="mt10"
+        :total="examRecordTotal"
+        :auto-scroll="false"
+        :page.sync="pageForm.pageNum"
+        :limit.sync="pageForm.pageSize"
+        @pagination="getMajorList"
+      />
     </div>
     <el-dialog :visible.sync="dialongParams.visible" width="80%">
-      <select-university @changeUniversity="changeUniversity"></select-university>
+      <select-university @changeUniversity="changeUniversity" />
     </el-dialog>
   </div>
 </template>
 
 <script>
 import {
-  selectMarjorYears,
-  selectMarjorTypes,
-  selectMarjorlLevels,
+  getMajorUniversityNameText,
   selectMarjorList,
+  selectMarjorlLevels,
+  selectMarjorTypes,
+  selectMarjorYears
 } from '@/api/webApi/shiftLine'
-  import SelectUniversity from '@/views/career/components/SelectUniversity'
+import SelectUniversity from '@/views/career/components/SelectUniversity'
 import transferMixin from '@/components/mx-transfer-mixin'
-  export default {
-    name: "CollegesLine",
-    mixins:[transferMixin],
-    components:{SelectUniversity},
-    data() {
-      return {
-        loading:false,
-        examRecordTotal:0,
-        year: [],
-        types: [],
-        marjorBatchs: [],
-        formParams: {
-          year: '2018',
-          level: '',
-          typeRes: '',
-          universityRes:{}
-        },
-        tableParams:{
-          pageSize:20,
-          pageNum:1
-        },
-        dialongParams:{visible:false},
-        tableData:[]
-      }
+import { mapGetters } from 'vuex'
+import VipGuideMore from '@/components/VipGuideMore/index'
+import GlobalVoluntaryDataMixin from '@/views/career/GlobalVoluntaryDataMixin'
+
+export default {
+  name: 'CollegesLine',
+  components: { VipGuideMore, SelectUniversity },
+  mixins: [transferMixin, GlobalVoluntaryDataMixin],
+  props: {
+    // 外部固定学校，则本页面不用选择学校。如学校详情页
+    universityCode: {
+      type: String,
+      default: ''
+    },
+    disabledNameLink: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      examRecordTotal: 0,
+      year: [],
+      types: [],
+      levels: [],
+      universityNameTexts: [],
+      universityRes: {},
+      form: {
+        year: '',
+        level: '',
+        type: '',
+        universityCode: '',
+        universityNameText: ''
+      },
+      pageForm: {
+        pageSize: 20,
+        pageNum: 1
+      },
+      dialongParams: { visible: false },
+      rows: []
+    }
+  },
+  computed: {
+    ...mapGetters(['isBind'])
+  },
+  watch: {
+    'form.year': function() {
+      this.form.type = ''
+      this.form.level = ''
+      this.ensureVoluntaryData({ year: this.form.year })
+      this.getMajorTypes()
+      this.getMajorLevels()
+    },
+    'form.type': function() {
+      this.form.universityNameText = ''
+      this.getUniversityNameTexts()
+    },
+    'form.level': function() {
+      this.form.universityNameText = ''
+      this.getUniversityNameTexts()
+    },
+    'form.universityCode': function() {
+      this.form.universityNameText = ''
+      this.getUniversityNameTexts()
+    },
+    'form.universityNameText': function(val) {
+      this.rows = []
+      this.total = 0
+      this.pageForm.pageNum = 1
+      this.getMajorList()
+    }
+  },
+  created() {
+    this.getMajorYears()
+  },
+  methods: {
+    checkFormFields(props) {
+      return props.every(prop => !!this.form[prop])
     },
-    watch: {
-      'formParams.year':{
-        handler(val) {
-          this.getMarjorTypes()
-          this.getMarjorBatchs()
-        }
+    emptyCellFormatter(row, prop) {
+      return row[prop.property] || '-'
+    },
+    goDetails(item) {
+      if (this.disabledNameLink) return
+      this.transferTo('/career/plan/UniversityDetail', { code: item.universityCode })
+    },
+    getMajorList() {
+      const params = {
+        ...this.pageForm,
+        year: this.form.year,
+        level: this.form.level,
+        type: this.form.type,
+        code: this.form.universityCode || this.universityCode,
+        universityNameText: this.form.universityNameText
       }
+      this.loading = true
+      selectMarjorList(params).then(res => {
+        this.rows = res.rows
+        this.examRecordTotal = res.total
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
     },
-    created() {
-      this.getMarjorYears()
+    changeUniversity(data) {
+      this.dialongParams.visible = false
+      this.universityRes = data
+      this.form.universityCode = data.code
     },
-    methods: {
-      goDetails(item){
-        this.transferTo('/career/plan/UniversityDetail',{code:item.universityCode})
-      },
-      getMarjorList(){
-
-        const params={
-          level:this.formParams.level,
-          pageNum:this.tableParams.pageNum,
-          pageSize:this.tableParams.pageSize,
-          type:this.formParams.typeRes,
-          universityId:this.formParams.universityRes.id,
-          code:this.formParams.universityRes.code,
-          year:this.formParams.year
-        }
-        if(!params.universityId){
-          this.msgInfo('院校不能为空')
-          return
-        }
-        this.loading=true
-        selectMarjorList(params).then(res=>{
-          this.tableData=res.rows
-          this.examRecordTotal=res.total
-          this.loading=false
-        }).catch(()=>{
-          this.loading=false
-        })
-      },
-      changeUniversity(data){
-        console.log(data)
-        this.dialongParams.visible=false
-        this.formParams.universityRes=data
-      },
-      getMarjorYears() {
-        selectMarjorYears().then(res => {
-          this.formParams.year =res.rows[0]
-          this.year = res.rows
-        })
-      },
-      getMarjorTypes() {
-        selectMarjorTypes({year:this.formParams.year}).then(res => {
-          this.formParams.typeRes = res.rows[0]
-          this.types = res.rows
-        })
-      },
-      getMarjorBatchs() {
-        selectMarjorlLevels({year:this.formParams.year}).then(res => {
-          this.formParams.level = res.rows[0]
-          this.marjorBatchs = res.rows
-          // this.marjorBatchs =this.marjorBatchs.concat(res.rows)
-        })
+    getMajorYears() {
+      selectMarjorYears().then(res => {
+        this.form.year = res.rows[0]
+        this.year = res.rows
+      })
+    },
+    getMajorTypes() {
+      selectMarjorTypes({ year: this.form.year }).then(res => {
+        this.form.type = res.rows[0]
+        this.types = res.rows
+      })
+    },
+    getMajorLevels() {
+      selectMarjorlLevels({ year: this.form.year }).then(res => {
+        this.form.level = res.rows[0]
+        this.levels = res.rows
+      })
+    },
+    getUniversityNameTexts() {
+      if (!this.checkFormFields(['year', 'type', 'level'])) return
+      if (!this.checkFormFields(['universityCode']) && !this.universityCode) {
+        this.$alert('请先选择院校').then(() => this.dialongParams.visible = true)
+        return
       }
+      getMajorUniversityNameText({
+        universityCode: this.form.universityCode || this.universityCode,
+        year: this.form.year,
+        type: this.form.type,
+        level: this.form.level
+      }).then(res => {
+        this.universityNameTexts = res.data
+        this.form.universityNameText = res.data.first()
+      })
     }
   }
+}
 </script>
 
 <style lang="scss">
-  .btn {
-    .el-button--medium {
-      padding: 15px 50px;
-    }
+.btn {
+  .el-button--medium {
+    padding: 15px 50px;
   }
-  #universityText{
-    .el-badge{
-      .el-button{
-        padding:15px 90px;
-      }
+}
+
+#universityText {
+  .el-badge {
+    .el-button {
+      padding: 15px 90px;
     }
   }
+}
+
+.major-line-container {
+  .el-divider--vertical {
+    width: 5px;
+  }
+
+  .el-select + .el-select {
+    margin-left: 20px;
+  }
+}
 
 </style>

src/views/career/components/FillBatch.vue

@@ -4,13 +4,13 @@
     <div class="input-box">
       <div class="input-title">
         您的预估高考成绩： {{ subject }}
-        <span>{{firstSubject}}</span>
-        <span :key="index" v-for="(item ,index) in lastSubject">,{{item}}</span> 总分：{{ score }}
+        <span>{{ firstSubject }}</span>
+        <span v-for="(item ,index) in lastSubject" :key="index">,{{ item }}</span> 总分：{{ score }}
       </div>
       <div
-        class="select-item"
         v-for="(item, index) in zytbBatchesList"
         :key="index"
+        class="select-item"
       >
         <div class="select-title">
           {{ item.name }} <span v-if="item.recommand">重点推荐</span>
@@ -28,47 +28,47 @@
 
 <script>
 export default {
-  name: "FillBatch",
-  data: () => {
-    return {
-      inputScore: 0,
-      radio: 1,
-    };
-  },
-  methods: {
-    onFillIn(item) {
-      this.$emit("onFillIn", item);
-    },
-  },
+  name: 'FillBatch',
   props: {
     zytbBatchesList: {
       type: Array,
       default: () => {
-        return {};
-      },
+        return {}
+      }
     },
     firstSubject: {
       type: String,
-      default: "",
+      default: ''
     },
     lastSubject: {
       type: Array,
-      default: [],
+      default: () => []
     },
     isNewCollegeEntranceExam: {
       type: Boolean,
-      default: false,
+      default: false
     },
     subject: {
       type: String,
-      default: "",
+      default: ''
     },
     score: {
       type: Number,
-      default: 0,
-    },
+      default: 0
+    }
   },
-};
+  data: () => {
+    return {
+      inputScore: 0,
+      radio: 1
+    }
+  },
+  methods: {
+    onFillIn(item) {
+      this.$emit('onFillIn', item)
+    }
+  }
+}
 </script>
 
 <style scoped>

src/views/career/components/FillMajor.vue

@@ -11,7 +11,7 @@
         <span v-if="lastSubject.length">,{{ lastSubject.toString() }}</span>
         总分：{{ score }}
       </div>
-      <mx-table :rows="dataList" :propDefines="propDefines">
+      <mx-table :rows="dataList" :prop-defines="propDefines">
         <template #school="{ row }">
           <div class="template-box">
             <div>{{ row.school }}</div>
@@ -29,8 +29,7 @@
           </div>
         </template>
         <template #select="{ row }">
-          <el-switch v-model="row.obeyOrNot" active-text="服从" inactive-text="不服从">
-          </el-switch>
+          <el-switch v-model="row.obeyOrNot" active-text="服从" inactive-text="不服从" />
         </template>
       </mx-table>
     </div>
@@ -41,23 +40,31 @@
             <div class="radio_contianer" style="padding: 0 20px">
               <div>
                 <span>院校地区</span>
-                <el-radio-group size="mini" v-model="form.location" @change="httpzytbUniversity">
-                  <el-radio-button label=""> 全部 </el-radio-button>
-                  <el-radio-button :label="item" v-for="(item, index) in filters.locations" :key="index">{{ item }}</el-radio-button>
+                <el-radio-group v-model="form.location" size="mini" @change="httpzytbUniversity">
+                  <el-radio-button label=""> 全部</el-radio-button>
+                  <el-radio-button v-for="(item, index) in filters.locations" :key="index" :label="item">{{
+                    item
+                  }}
+                  </el-radio-button>
                 </el-radio-group>
               </div>
               <div>
                 <span>院校类型</span>
-                <el-radio-group size="mini" v-model="form.type" @change="httpzytbUniversity">
-                  <el-radio-button label=""> 全部 </el-radio-button>
-                  <el-radio-button :label="item" v-for="(item, index) in filters.types" :key="index">{{ item }}</el-radio-button>
+                <el-radio-group v-model="form.type" size="mini" @change="httpzytbUniversity">
+                  <el-radio-button label=""> 全部</el-radio-button>
+                  <el-radio-button v-for="(item, index) in filters.types" :key="index" :label="item">{{
+                    item
+                  }}
+                  </el-radio-button>
                 </el-radio-group>
               </div>
               <div v-if="false">
                 <span>专业类别</span>
-                <el-radio-group size="mini" v-model="form.marjor" @change="httpzytbUniversity">
-                  <el-radio-button label=""> 全部 </el-radio-button>
-                  <el-radio-button :label="item.value" v-for="(item, index) in filters.marjors" :key="index">{{ item.label }}</el-radio-button>
+                <el-radio-group v-model="form.marjor" size="mini" @change="httpzytbUniversity">
+                  <el-radio-button label=""> 全部</el-radio-button>
+                  <el-radio-button v-for="(item, index) in filters.marjors" :key="index" :label="item.value">
+                    {{ item.label }}
+                  </el-radio-button>
                 </el-radio-group>
               </div>
             </div>
@@ -82,9 +89,9 @@
               </div>
             </div>
           </div>
-          <mx-table :rows="UniversityDataList" :propDefines="UniversityPropDefines">
+          <mx-table :rows="UniversityDataList" :prop-defines="UniversityPropDefines">
             <template #logo="{ row }">
-              <img class="university-logo" :src="row.logo" />
+              <img class="university-logo" :src="row.logo">
             </template>
             <template #column-check-style="{value}">
               <mx-check-status :checked="value>1" yes-only />
@@ -93,7 +100,14 @@
               <el-button type="primary" @click="selectUniversity(row)">选择院校</el-button>
             </template>
           </mx-table>
-          <pagination v-show="UniversityTotal > 0" :total="UniversityTotal" :page.sync="pageNum" :limit.sync="pageSize" :page-size="20" @pagination="onChangePage" />
+          <pagination
+            v-show="UniversityTotal > 0"
+            :total="UniversityTotal"
+            :page.sync="pageNum"
+            :limit.sync="pageSize"
+            :page-size="20"
+            @pagination="onChangePage"
+          />
         </div>
       </el-dialog>
       <el-dialog v-if="isShowMajorPopup" :visible.sync="isShowMajorPopup" width="85%" title="选择专业" append-to-body>
@@ -101,8 +115,7 @@
           <div class="mx-flex-row mb10" style="justify-content:flex-end; align-items:center;">
             <el-button type="primary" @click="selectMarjor()">确认选择</el-button>
           </div>
-          <mx-table ref="majorTable" :rows="marjorDataList" :propDefines="propPopupDefines">
-          </mx-table>
+          <mx-table ref="majorTable" :rows="marjorDataList" :prop-defines="propPopupDefines" />
         </div>
       </el-dialog>
     </div>
@@ -110,10 +123,45 @@
 </template>
 
 <script>
-import { zytbMarjor, zytbUniversity, zytbFilter } from "@/api/webApi/webQue";
-import { mapGetters } from 'vuex';
+import { zytbFilter, zytbMarjor, zytbUniversity } from '@/api/webApi/webQue'
+import { mapGetters } from 'vuex'
+
 export default {
-  name: "FillMajor",
+  name: 'FillMajor',
+  props: {
+    batch: {
+      type: String | Number,
+      default: ''
+    },
+    batchInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    subject: {
+      type: String,
+      default: ''
+    },
+    year: {
+      type: String,
+      default: ''
+    },
+    score: {
+      type: Number,
+      default: 0
+    },
+    firstSubject: {
+      type: String,
+      default: ''
+    },
+    lastSubject: {
+      type: Array,
+      default: () => []
+    },
+    isNewCollegeEntranceExam: {
+      type: Boolean,
+      default: false
+    }
+  },
   data: () => {
     return {
       pageNum: 1,
@@ -125,29 +173,29 @@ export default {
       mbgx: false,
       pickType: 0,
       form: {
-        location: "",
-        type: "",
-        marjor: "",
+        location: '',
+        type: '',
+        marjor: ''
       },
       propPopupDefines: {
         universityName: {
-          label: "院校名称",
+          label: '院校名称'
         },
         marjorName: {
-          label: "专业（类）名称",
+          label: '专业（类）名称'
         },
         marjorDirection: {
-          label: "方向",
-          align: "left",
+          label: '方向',
+          align: 'left'
         },
         location: {
-          label: "招生地",
+          label: '招生地'
         },
-        score: { label: "录取分数" },
-        seat: { label: "位次" },
+        score: { label: '录取分数' },
+        seat: { label: '位次' },
         selection: {
-          label: "选择",
-          type: "selection"
+          label: '选择',
+          type: 'selection'
         }
       },
       UniversityDataList: [],
@@ -156,235 +204,201 @@ export default {
       isShowUniversityPopup: false,
       UniversityPropDefines: {
         logo: {
-          label: "图片",
-          slot: "logo",
-          width: "120px",
+          label: '图片',
+          slot: 'logo',
+          width: '120px'
         },
-        year: { label: "年份" },
-        name: { label: "院校名称" },
-        score: { label: "分数" },
-        seat: { label: "位次" },
-        universityLocation: { label: "所在地" },
-        managerType: { label: "主管部门" },
-        universityType: { label: "院校类型", },
-        level: { label: "学历层次", },
+        year: { label: '年份' },
+        name: { label: '院校名称' },
+        score: { label: '分数' },
+        seat: { label: '位次' },
+        universityLocation: { label: '所在地' },
+        managerType: { label: '主管部门' },
+        universityType: { label: '院校类型' },
+        level: { label: '学历层次' },
         ylxx: {
-          label: "一流大学建设高校",
-          slot: "column-check-style",
+          label: '一流大学建设高校',
+          slot: 'column-check-style'
         },
         ylxk: {
-          label: "一流学科建设高校",
-          slot: "column-check-style",
+          label: '一流学科建设高校',
+          slot: 'column-check-style'
         },
         yjsy: {
-          label: "研究生院",
-          slot: "column-check-style",
+          label: '研究生院',
+          slot: 'column-check-style'
         },
         collect: {
-          label: "选择",
-          align: "left",
-          slot: "select",
-          width: "120px",
-        },
+          label: '选择',
+          align: 'left',
+          slot: 'select',
+          width: '120px'
+        }
       },
       propDefines: {
         name: {
-          label: "",
-          width: "100px",
+          label: '',
+          width: '100px'
         },
         school: {
-          label: "学校",
-          slot: "school",
+          label: '学校',
+          slot: 'school'
         },
         marjors: {
-          label: "专业",
-          slot: "major",
+          label: '专业',
+          slot: 'major'
         },
         obeyOrNot: {
-          label: "是否服从",
-          slot: "select",
+          label: '是否服从',
+          slot: 'select'
         }
       },
       dataList: [
         {
-          name: "一志愿",
-          school: "",
-          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
+          name: '一志愿',
+          school: '',
+          schoolInfo: { code: 0, name: '', submitId: 0, universityId: 0 },
           marjors: [],
           obeyOrNot: false,
-          index: 0,
+          index: 0
         },
         {
-          name: "二志愿",
-          school: "",
-          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
+          name: '二志愿',
+          school: '',
+          schoolInfo: { code: 0, name: '', submitId: 0, universityId: 0 },
           marjors: [],
           obeyOrNot: false,
-          index: 1,
+          index: 1
         },
         {
-          name: "三志愿",
-          school: "",
-          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
+          name: '三志愿',
+          school: '',
+          schoolInfo: { code: 0, name: '', submitId: 0, universityId: 0 },
           marjors: [],
           obeyOrNot: false,
-          index: 2,
+          index: 2
         },
         {
-          name: "四志愿",
-          school: "",
-          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
+          name: '四志愿',
+          school: '',
+          schoolInfo: { code: 0, name: '', submitId: 0, universityId: 0 },
           marjors: [],
           obeyOrNot: false,
-          index: 3,
+          index: 3
         },
         {
-          name: "五志愿",
-          school: "",
-          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
+          name: '五志愿',
+          school: '',
+          schoolInfo: { code: 0, name: '', submitId: 0, universityId: 0 },
           marjors: [],
           obeyOrNot: false,
-          index: 4,
+          index: 4
         },
         {
-          name: "六志愿",
-          school: "",
-          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
+          name: '六志愿',
+          school: '',
+          schoolInfo: { code: 0, name: '', submitId: 0, universityId: 0 },
           marjors: [],
           obeyOrNot: false,
-          index: 5,
+          index: 5
         },
         {
-          name: "七志愿",
-          school: "",
-          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
+          name: '七志愿',
+          school: '',
+          schoolInfo: { code: 0, name: '', submitId: 0, universityId: 0 },
           marjors: [],
           obeyOrNot: false,
-          index: 6,
+          index: 6
         },
         {
-          name: "八志愿",
-          school: "",
-          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
+          name: '八志愿',
+          school: '',
+          schoolInfo: { code: 0, name: '', submitId: 0, universityId: 0 },
           marjors: [],
           obeyOrNot: false,
-          index: 7,
+          index: 7
         },
         {
-          name: "九志愿",
-          school: "",
-          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
+          name: '九志愿',
+          school: '',
+          schoolInfo: { code: 0, name: '', submitId: 0, universityId: 0 },
           marjors: [],
           obeyOrNot: false,
-          index: 8,
+          index: 8
         },
         {
-          name: "十志愿",
-          school: "",
-          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
+          name: '十志愿',
+          school: '',
+          schoolInfo: { code: 0, name: '', submitId: 0, universityId: 0 },
           marjors: [],
           obeyOrNot: false,
-          index: 9,
-        },
+          index: 9
+        }
       ],
       universityId: 0,
       selectIndex: 0,
       UniversityTotal: 0,
-      filters: [],
-    };
-  },
-  props: {
-    batch: {
-      type: String | Number,
-      default: ''
-    },
-    batchInfo: {
-      type: Object,
-      default: () => ({})
-    },
-    subject: {
-      type: String,
-      default: "",
-    },
-    year: {
-      type: String,
-      default: "",
-    },
-    score: {
-      type: Number,
-      default: 0,
-    },
-    firstSubject: {
-      type: String,
-      default: "",
-    },
-    lastSubject: {
-      type: Array,
-      default: [],
-    },
-    isNewCollegeEntranceExam: {
-      type: Boolean,
-      default: false,
-    },
+      filters: []
+    }
   },
   computed: {
     ...mapGetters(['currentUser'])
   },
   created() {
     this.$nextTick(_ => zytbFilter(this.batch).then((res) => {
-      this.filters = res.data;
+      this.filters = res.data
     }))
   },
   methods: {
     selectMarjor() {
-      const table = this.$refs.majorTable.getRuntimeTable();
+      const table = this.$refs.majorTable.getRuntimeTable()
       if (!table.selection.length) {
-        this.msgError("请选择专业！")
+        this.msgError('请选择专业！')
         return
       }
       var selectedList = table.selection.map(r => ({
         id: r.id,
         name: r.marjorName
       }))
-      this.dataList[this.selectIndex]["marjors"] = selectedList
-      this.isShowMajorPopup = false;
+      this.dataList[this.selectIndex]['marjors'] = selectedList
+      this.isShowMajorPopup = false
       this.isShowUniversityPopup = false
     },
     selectUniversity(item) {
-      this.dataList[this.selectIndex]["school"] = item.name;
-      this.dataList[this.selectIndex]["schoolInfo"]["code"] = item.code;
-      this.dataList[this.selectIndex]["schoolInfo"]["name"] = item.name;
-      this.dataList[this.selectIndex]["schoolInfo"]["submitId"] = item.submitId;
-      this.dataList[this.selectIndex]["schoolInfo"]["universityId"] = item.universityId;
-      this.dataList[this.selectIndex]["marjors"] = [] // reset
+      this.dataList[this.selectIndex]['school'] = item.name
+      this.dataList[this.selectIndex]['schoolInfo']['code'] = item.code
+      this.dataList[this.selectIndex]['schoolInfo']['name'] = item.name
+      this.dataList[this.selectIndex]['schoolInfo']['submitId'] = item.submitId
+      this.dataList[this.selectIndex]['schoolInfo']['universityId'] = item.universityId
+      this.dataList[this.selectIndex]['marjors'] = [] // reset
       this.openMajorPopup(this.dataList[this.selectIndex])
     },
     openUniversityPopup(item) {
-      this.selectIndex = item.index;
-      this.isShowUniversityPopup = true;
-      this.httpzytbUniversity();
+      this.selectIndex = item.index
+      this.isShowUniversityPopup = true
+      this.httpzytbUniversity()
     },
     openMajorPopup(item) {
-      this.selectIndex = item.index;
+      this.selectIndex = item.index
       if (
-        this.dataList[this.selectIndex]["schoolInfo"] &&
-        this.dataList[this.selectIndex]["schoolInfo"]["universityId"]
+        this.dataList[this.selectIndex]['schoolInfo'] &&
+        this.dataList[this.selectIndex]['schoolInfo']['universityId']
       ) {
-        this.universityId = this.dataList[this.selectIndex]["schoolInfo"]["universityId"];
-        this.httpzytbMarjor();
-        this.isShowMajorPopup = true;
+        this.universityId = this.dataList[this.selectIndex]['schoolInfo']['universityId']
+        this.httpzytbMarjor()
+        this.isShowMajorPopup = true
       } else {
-        this.$message.error("请先选择院校！");
+        this.$message.error('请先选择院校！')
       }
     },
     onChangePage(res) {
-      this.pageNum = res.page;
-      this.pageSize = res.limit;
+      this.pageNum = res.page
+      this.pageSize = res.limit
       if (this.isShowUniversityPopup) {
-        this.httpzytbUniversity();
+        this.httpzytbUniversity()
       }
       if (this.isShowMajorPopup) {
-        this.httpzytbMarjor();
+        this.httpzytbMarjor()
       }
     },
     httpzytbUniversity() {
@@ -400,12 +414,12 @@ export default {
         pickType: this.pickType,
         score: this.score,
         mode: this.subject || [this.firstSubject, ...this.lastSubject].toString(),
-        //year: this.year,
+        // year: this.year,
         ...this.form
       }).then((res) => {
-        this.UniversityTotal = res.total;
-        this.UniversityDataList = res.rows;
-      });
+        this.UniversityTotal = res.total
+        this.UniversityDataList = res.rows
+      })
     },
     httpzytbMarjor() {
       zytbMarjor({
@@ -415,14 +429,14 @@ export default {
         batch: this.batch,
         pickType: this.pickType,
         score: this.score,
-        mode: this.subject || [this.firstSubject, ...this.lastSubject].toString(),
-        //year: this.year,
+        mode: this.subject || [this.firstSubject, ...this.lastSubject].toString()
+        // year: this.year,
       }).then((res) => {
-        this.marjorDataList = res.rows;
-      });
-    },
-  },
-};
+        this.marjorDataList = res.rows
+      })
+    }
+  }
+}
 </script>
 
 <style scoped>
@@ -434,45 +448,55 @@ export default {
   padding: 26px;
   border-bottom: 1px solid rgba(183, 183, 183, 0.5);
 }
+
 .content-box {
   padding: 30px 0;
   height: 500px;
   overflow-y: auto;
 }
+
 .content-title {
   padding-bottom: 30px;
   text-align: center;
 }
+
 .content-msg {
   border-bottom: 1px solid #eee;
   padding: 10px;
   background-color: #eee;
   margin-top: 5px;
 }
+
 .select-item {
   padding: 20px 0;
   display: flex;
   border-bottom: 1px dashed #e3e3e3;
 }
+
 .select-content {
   margin-left: 10px;
 }
+
 .university-logo {
   width: 100px;
   height: 100px;
 }
+
 .template-box {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+
 .radio_contianer > div > span {
   margin-right: 16px;
   flex-shrink: 0;
 }
+
 .radio_contianer > div {
   display: flex;
 }
+
 .fill-batch >>> .el-radio-button__inner {
   border-left: 1px solid #dcdfe6;
 }
@@ -482,12 +506,13 @@ export default {
   margin-bottom: 5px;
   margin-right: 8px;
 }
-.fill-batch >>> .radio_contianer .is-active .el-radio-button__inner{
+
+.fill-batch >>> .radio_contianer .is-active .el-radio-button__inner {
   border-left: none;
 }
+
 .fill-batch >>> .split_page .el-pager > li {
   border-radius: 50%;
 }
 </style>
 
-

src/views/career/components/FillScore.vue

@@ -16,7 +16,7 @@
             v-model="inputScore"
             :min="0"
             label="请输入总分"
-          ></el-input-number>
+          />
         </div>
       </div>
       <div class="input-item">
@@ -27,12 +27,12 @@
             :min="0"
             :disabled="isDisIndex"
             label="高考成绩位次发布后填写"
-          ></el-input-number>
+          />
         </div>
         <div class="item-msg">当前为估分模拟，不需填写排名</div>
       </div>
     </div>
-    <simulate-notice></simulate-notice>
+    <simulate-notice />
   </div>
 </template>
 
@@ -40,33 +40,33 @@
 import SimulateNotice from '@/views/career/components/SimulateNotice'
 
 export default {
-  components:{SimulateNotice},
-  name: "FillScore",
-  data: () => {
-    return {
-      subject: "文科",
-      inputScore: 0,
-      inputIndex: 0,
-    };
-  },
+  name: 'FillScore',
+  components: { SimulateNotice },
   props: {
     isDisIndex: {
       type: Boolean,
-      default: true,
-    },
+      default: true
+    }
+  },
+  data: () => {
+    return {
+      subject: '文科',
+      inputScore: 0,
+      inputIndex: 0
+    }
   },
   methods: {
     getSubject() {
-      return this.subject;
+      return this.subject
     },
     getScore() {
-      return this.inputScore;
+      return this.inputScore
     },
     getIndex() {
-      return this.inputIndex;
-    },
-  },
-};
+      return this.inputIndex
+    }
+  }
+}
 </script>
 
 <style scoped>

src/views/career/components/FilterForm.vue

@@ -4,36 +4,51 @@
       <div>
         <span class="radiaTitle">院校省份:</span>
       </div>
-      <el-checkbox-button v-if="multiple" :value="!!!this.filter.location.length" @click.native="filter.location=[]">不限
+      <el-checkbox-button v-if="multiple" :value="!!!filter.location.length" @click.native="filter.location=[]">不限
       </el-checkbox-button>
       <component :is="useSelectComponent" v-model="filter.location">
-        <component v-if="!multiple" :is="useOptionComponent" label="">所有</component>
-        <component :is="useOptionComponent" v-for="item in filter_list.locations" :key="item" :label="item"
-                   style="margin-bottom:10px"></component>
+        <component :is="useOptionComponent" v-if="!multiple" label="">所有</component>
+        <component
+          :is="useOptionComponent"
+          v-for="item in filter_list.locations"
+          :key="item"
+          :label="item"
+          style="margin-bottom:10px"
+        />
       </component>
     </el-row>
     <el-row class="radioInput">
       <div>
         <span class="radiaTitle">院校类型:</span>
       </div>
-      <el-checkbox-button v-if="multiple" :value="!!!this.filter.type.length" @click.native="filter.type=[]">不限
+      <el-checkbox-button v-if="multiple" :value="!!!filter.type.length" @click.native="filter.type=[]">不限
       </el-checkbox-button>
       <component :is="useSelectComponent" v-model="filter.type">
-        <component v-if="!multiple" :is="useOptionComponent" label="">所有</component>
-        <component :is="useOptionComponent" v-for="item in filter_list.types" :key="item" :label="item"
-                   style="margin-bottom:10px"></component>
+        <component :is="useOptionComponent" v-if="!multiple" label="">所有</component>
+        <component
+          :is="useOptionComponent"
+          v-for="item in filter_list.types"
+          :key="item"
+          :label="item"
+          style="margin-bottom:10px"
+        />
       </component>
     </el-row>
     <el-row class="radioInput">
       <div>
         <span class="radiaTitle">院校层次:</span>
       </div>
-      <el-checkbox-button v-if="multiple" :value="!!!this.filter.features.length" @click.native="filter.features=[]">不限
+      <el-checkbox-button v-if="multiple" :value="!!!filter.features.length" @click.native="filter.features=[]">不限
       </el-checkbox-button>
       <component :is="useSelectComponent" v-model="filter.features">
-        <component v-if="!multiple" :is="useOptionComponent" label="">所有</component>
-        <component :is="useOptionComponent" v-for="item in filter_list.features" :key="item" :label="item"
-                   style="margin-bottom:10px"></component>
+        <component :is="useOptionComponent" v-if="!multiple" label="">所有</component>
+        <component
+          :is="useOptionComponent"
+          v-for="item in filter_list.features"
+          :key="item"
+          :label="item"
+          style="margin-bottom:10px"
+        />
       </component>
     </el-row>
     <el-row class="radioInput">
@@ -41,37 +56,157 @@
         <span class="radiaTitle">办学类型:</span>
       </div>
       <!--   NOTE:注意value传值要强制转成boolean类型，否则无法正常工作   -->
-      <el-checkbox-button v-if="multiple" :value="!!!this.filter.natureTypeCN.length"
-                          @click.native="filter.natureTypeCN=[]">不限
+      <el-checkbox-button v-if="multiple" :value="!!!filter.natureTypeCN.length" @click.native="filter.natureTypeCN=[]">
+        不限
       </el-checkbox-button>
       <component :is="useSelectComponent" v-model="filter.natureTypeCN">
-        <component v-if="!multiple" :is="useOptionComponent" label="">所有</component>
-        <component :is="useOptionComponent" v-for="item in filter_list.natureTypes" :key="item" :label="item"
-                   style="margin-bottom:10px"></component>
+        <component :is="useOptionComponent" v-if="!multiple" label="">所有</component>
+        <component
+          :is="useOptionComponent"
+          v-for="item in filter_list.natureTypes"
+          :key="item"
+          :label="item"
+          style="margin-bottom:10px"
+        />
       </component>
     </el-row>
-    <el-row class="radioInput" v-if="!levelHide">
+    <el-row v-if="!levelHide" class="radioInput">
       <div>
         <span class="radiaTitle">学历层次:</span>
       </div>
-      <el-checkbox-button v-if="multiple" :value="!!!this.filter.level.length" @click.native="filter.level=[]">不限
+      <el-checkbox-button v-if="multiple" :value="!!!filter.level.length" @click.native="filter.level=[]">不限
       </el-checkbox-button>
       <component :is="useSelectComponent" v-model="filter.level">
-        <component v-if="!multiple" :is="useOptionComponent" label="">所有</component>
-        <component :is="useOptionComponent" v-for="item in filter_list.levels" :key="item" :label="item"
-                   style="margin-bottom:10px"></component>
+        <component :is="useOptionComponent" v-if="!multiple" label="">所有</component>
+        <component
+          :is="useOptionComponent"
+          v-for="item in filter_list.levels"
+          :key="item"
+          :label="item"
+          style="margin-bottom:10px"
+        />
       </component>
     </el-row>
+    <template v-if="recommendFeatures">
+      <!--  sinoforeign collect  -->
+      <el-row class="radioInput">
+        <div>
+          <span class="radiaTitle">历年征集:</span>
+        </div>
+        <el-radio-group v-model="filter.collect">
+          <el-radio-button
+            v-for="item in recommendOptions.collect"
+            :key="item.label"
+            :label="item.value"
+            style="margin-bottom:10px; margin-left: 10px"
+          >{{ item.label }}
+          </el-radio-button>
+        </el-radio-group>
+      </el-row>
+      <el-row v-if="false">
+        <el-col :span="12" class="radioInput">
+          <div>
+            <span class="radiaTitle">中外合作:</span>
+          </div>
+          <el-radio-group v-model="filter.sinoforeign">
+            <el-radio-button
+              v-for="item in recommendOptions.sinoforeign"
+              :key="item.label"
+              :label="item.value"
+              style="margin-bottom:10px; margin-left: 10px"
+            >{{ item.label }}
+            </el-radio-button>
+          </el-radio-group>
+        </el-col>
+        <el-col :span="12" class="radioInput">
+          <div>
+            <span class="radiaTitle">历年征集:</span>
+          </div>
+          <el-radio-group v-model="filter.collect">
+            <el-radio-button
+              v-for="item in recommendOptions.collect"
+              :key="item.label"
+              :label="item.value"
+              style="margin-bottom:10px; margin-left: 10px"
+            >{{ item.label }}
+            </el-radio-button>
+          </el-radio-group>
+        </el-col>
+      </el-row>
+      <!-- specialProjectNation specialProjectLocal -->
+      <el-row v-if="false">
+        <el-col :span="12" class="radioInput">
+          <div>
+            <span class="radiaTitle">国家专项:</span>
+          </div>
+          <el-radio-group
+            v-model="filter.specialProjectNation"
+            @change="handleSpecialProjectChange('specialProjectNation')"
+          >
+            <el-radio-button
+              v-for="item in recommendOptions.specialProjectNation"
+              :key="item.label"
+              :label="item.value"
+              style="margin-bottom:10px; margin-left: 10px"
+            >{{ item.label }}
+            </el-radio-button>
+          </el-radio-group>
+        </el-col>
+        <el-col :span="12" class="radioInput">
+          <div>
+            <span class="radiaTitle">地方专项:</span>
+          </div>
+          <el-radio-group
+            v-model="filter.specialProjectLocal"
+            @change="handleSpecialProjectChange('specialProjectLocal')"
+          >
+            <el-radio-button
+              v-for="item in recommendOptions.specialProjectLocal"
+              :key="item.label"
+              :label="item.value"
+              style="margin-bottom:10px; margin-left: 10px"
+            >{{ item.label }}
+            </el-radio-button>
+          </el-radio-group>
+        </el-col>
+      </el-row>
+      <el-row v-if="specialProjectOptions.length" class="radioInput">
+        <div>
+          <span class="radiaTitle">专项计划:</span>
+        </div>
+        <el-checkbox-button :value="!!!filter.specialProjects.length" @click.native="filter.specialProjects=[]">不限
+        </el-checkbox-button>
+        <el-checkbox-group v-model="filter.specialProjects" @change="handleSpecialProjectsMutex">
+          <el-checkbox-button
+            v-for="(item, i) in specialProjectOptions"
+            :key="item"
+            :label="item"
+            style="margin-bottom:10px; margin-left: 10px"
+          >
+            {{ item }}
+            <el-tooltip
+              v-if="i==specialProjectOptions.length-1"
+              effect="light"
+              placement="top"
+              :content="specialProjectsMutexTips"
+            >
+              <i class="el-icon-question" />
+            </el-tooltip>
+          </el-checkbox-button>
+        </el-checkbox-group>
+      </el-row>
+    </template>
   </div>
 </template>
 <script>
 import { universityFilters } from '@/api/webApi/career-course'
+import MxConst from '@/common/MxConst'
 
 export default {
   props: {
     filter: {
       type: Object,
-      default: {}
+      default: () => ({})
     },
     levelHide: {
       type: Boolean,
@@ -80,11 +215,22 @@ export default {
     multiple: {
       type: Boolean,
       default: false
+    },
+    recommendFeatures: {
+      // 特指新增4项筛选条件：中外合作、历年征集、国家专项、地方专项
+      type: Boolean,
+      default: false
+    },
+    specialProjectOptions: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
-      filter_list: {}
+      filter_list: {},
+      recommendOptions: MxConst.recommendOptions,
+      specialProjectSnapshot: []
     }
   },
   computed: {
@@ -93,6 +239,9 @@ export default {
     },
     useOptionComponent() {
       return this.multiple ? 'el-checkbox-button' : 'el-radio-button'
+    },
+    specialProjectsMutexTips() {
+      return `不看${this.specialProjectOptions.slice(0, -1).join('、')}`
     }
   },
   created() {
@@ -106,53 +255,31 @@ export default {
     },
     handleEmpty(key) {
       this.$set(this.filter, key, this.multiple ? [] : '')
+    },
+    handleSpecialProjectChange(key) {
+      return // close exclusive relationship because API changes
+      // nation and local are exclusive, set the other to empty
+      // eslint-disable-next-line no-unreachable
+      const mutualExclusive = ['specialProjectNation', 'specialProjectLocal']
+      const otherKey = mutualExclusive.find(item => item !== key)
+      this.$set(this.filter, otherKey, '')
+    },
+    handleSpecialProjectsMutex(e) {
+      // 互斥关系 定义最后一个选项与其它选项互斥
+      // 1 如果新选中最后一项，则清空其他选项
+      // 2 反之如果新选择了非最后一项，已选中存在最后一项，则清空最后一项
+      // 3 保存有效选项到snapshot以进行下一次对比
+      const mutexItem = this.specialProjectOptions.last()
+      const snapshot = this.specialProjectSnapshot
+      if (e.includes(mutexItem)) {
+        if (!snapshot.includes(mutexItem)) this.filter.specialProjects = [mutexItem]
+        else if (e.length > 1) this.filter.specialProjects.remove(mutexItem)
+      }
+      this.specialProjectSnapshot = [...this.filter.specialProjects]
     }
   }
 }
 </script>
 <style scoped lang="scss">
-.radioInput ::v-deep {
-  background-color: #ffffff;
-  font-size: 14px;
-  padding: 5px;
-
-  .el-checkbox,
-  .el-radio {
-    .el-checkbox__input,
-    .el-radio__input {
-      display: none;
-    }
-  }
-}
-
-.radioInput ::v-deep {
-  display: flex;
-
-  .el-checkbox-button .el-checkbox-button__inner,
-  .el-radio-button .el-radio-button__inner {
-    border-radius: 4px !important;
-    border: none;
-    padding: 5px 10px !important;
-    font-weight: 400;
-    font-family: PingFangSC-Regular, PingFang SC;
-  }
-
-  .el-checkbox-button__original:checked + .el-checkbox-button__inner,
-  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
-    box-shadow: none;
-  }
-
-  .el-checkbox-button {
-    margin-left: 10px;
-  }
-
-  .radiaTitle {
-    display: inline-block;
-    width: 80px;
-    font-size: 14px;
-    text-align: right;
-    margin-top: 2px;
-    margin-right: 10px;
-  }
-}
+@import "filter-form-style";
 </style>

src/views/career/components/MajorChoiceDialog.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="subject-page">
     <div>
-      <div class="schoolpop" v-show="flag.isShowSchoolPopup">
+      <div v-show="flag.isShowSchoolPopup" class="schoolpop">
         <div class="popup-box">
           <div class="popup-item">
             <div class="popup-item-title">地域选择<span>（可多选）</span></div>
             <div class="popup-item-content">
               <el-checkbox-group v-model="selectLocation">
                 <el-checkbox
-                  class="check-box-item"
-                  :label="item"
                   v-for="(item, index) in locationsList"
                   :key="index"
-                ></el-checkbox>
+                  class="check-box-item"
+                  :label="item"
+                />
               </el-checkbox-group>
             </div>
           </div>
@@ -21,12 +21,11 @@
             <div class="popup-item-content">
               <el-checkbox-group v-model="features">
                 <el-checkbox
-                  class="check-box-item"
-                  :label="item"
                   v-for="(item, index) in featuresList"
                   :key="index"
-                  >{{ item }}</el-checkbox
-                >
+                  class="check-box-item"
+                  :label="item"
+                >{{ item }}</el-checkbox>
               </el-checkbox-group>
             </div>
           </div>
@@ -35,11 +34,11 @@
             <div class="popup-item-content">
               <el-checkbox-group v-model="selectTypes">
                 <el-checkbox
-                  class="check-box-item"
-                  :label="item"
                   v-for="(item, index) in typesList"
                   :key="index"
-                ></el-checkbox>
+                  class="check-box-item"
+                  :label="item"
+                />
               </el-checkbox-group>
             </div>
           </div>
@@ -47,12 +46,12 @@
             <div class="popup-msg">* 请点击（或取消）学校信息进行筛选</div>
             <div class="button-list">
               <el-button @click="cleanSchoolSelect">清空</el-button>
-              <el-button @click="schoolSubmit" type="primary">确定</el-button>
+              <el-button type="primary" @click="schoolSubmit">确定</el-button>
             </div>
           </div>
         </div>
       </div>
-      <div class="majorpop" v-show="isShowMajorPopup">
+      <div v-show="isShowMajorPopup" class="majorpop">
         <div class="popup-box major-box">
           <div class="popup-select">
             <div
@@ -73,9 +72,9 @@
           <div class="choice-box">
             <div class="choice-item">
               <div
-                class="choice-item-menv"
                 v-for="(item, index) in marjorsList"
                 :key="index"
+                class="choice-item-menv"
                 :class="curMarjorsCode == item.code ? 'active' : ''"
                 @click="changeMajor(item)"
               >
@@ -84,9 +83,9 @@
             </div>
             <div class="choice-item">
               <div
-                class="choice-item-menv"
                 v-for="(item, index) in marjorsList2"
                 :key="index"
+                class="choice-item-menv"
                 :class="curMarjorsCode2 == item.code ? 'active' : ''"
                 @click="changeMajor(item)"
               >
@@ -99,13 +98,13 @@
                   class="choice-item-checkbox"
                   label="全选"
                   @change="onSelectMarjorsAll"
-                ></el-checkbox>
+                />
                 <el-checkbox
-                  class="choice-item-checkbox"
-                  :label="item.name"
                   v-for="(item, index) in marjorsList3"
                   :key="index"
-                ></el-checkbox>
+                  class="choice-item-checkbox"
+                  :label="item.name"
+                />
               </el-checkbox-group>
             </div>
           </div>
@@ -114,7 +113,7 @@
           <div class="popup-msg">* 请点击（或取消）学校信息进行筛选</div>
           <div class="button-list">
             <el-button @click="cleanMajorList">清空</el-button>
-            <el-button @click="majorSubmit" type="primary">确定</el-button>
+            <el-button type="primary" @click="majorSubmit">确定</el-button>
           </div>
         </div>
       </div>
@@ -126,200 +125,216 @@
 import {
   xkcxlist,
   xkcxYears,
-  universityFilters,
-  marjorsList,
-} from "@/api/webApi/webQue";
+  collectAdd,
+  collectRemove,
+  universityFilters
+} from '@/api/webApi/webQue'
+import { allMajor } from '@/api/webApi/professlib'
 export default {
   props: {
     isShowSchoolPopup: {
       type: Boolean,
       default: false
     },
-    isShowMajorPopup:  {
+    isShowMajorPopup: {
       type: Boolean,
       default: false
-    },
-  },
-  watch: {
-    isShowSchoolPopup() {
-      this.flag.isShowSchoolPopup = this.isShowSchoolPopup;
     }
   },
   data() {
     return {
       flag: {
-        isShowSchoolPopup: false,
+        isShowSchoolPopup: false
       },
-      curSelectScienceList: "",
+      curSelectScienceList: '',
       curSelectLiberalArts: [],
       options: [],
-      selectNian: "",
+      selectNian: '',
       dataList: [],
       yearList: [],
       pageNum: 1,
       pageSize: 20,
       total: 0,
-      keyword: "",
+      keyword: '',
       isShowTable: true,
       locationsList: [],
       typesList: [],
       featuresList: [],
-      selectLocation: [], //地区
-      selectTypes: [], //类别
-      features: [], //选中的特色
+      selectLocation: [], // 地区
+      selectTypes: [], // 类别
+      features: [], // 选中的特色
       marjorsList: [],
       marjorsList2: [],
       marjorsList3: [],
-      marjorsType: "本科",
+      marjorsType: '本科',
       marjorsLevel: 1,
-      marjorsCode: "",
-      curMarjorsCode: "",
-      curMarjorsCode2: "",
-      curMarjorsCode3: [],
-    };
+      marjorsCode: '',
+      curMarjorsCode: '',
+      curMarjorsCode2: '',
+      curMarjorsCode3: []
+    }
+  },
+  watch: {
+    isShowSchoolPopup() {
+      this.flag.isShowSchoolPopup = this.isShowSchoolPopup
+    }
   },
   created() {
-    this.httpGetXkcxYears();
-    this.httpUniversityFilters();
-    this.httpGetMarjorsList();
+    this.httpGetXkcxYears()
+    this.httpUniversityFilters()
+    this.httpGetMarjorsList()
   },
   methods: {
     onSelectMarjorsAll(res) {
       if (res) {
-        let len = this.marjorsList3.length;
+        const len = this.marjorsList3.length
         for (let i = 0; i < len; i++) {
-          let name = this.marjorsList3[i]["name"];
-          let index = this.curMarjorsCode3.indexOf(name);
+          const name = this.marjorsList3[i]['name']
+          const index = this.curMarjorsCode3.indexOf(name)
           if (index < 0) {
-            this.curMarjorsCode3.push(name);
+            this.curMarjorsCode3.push(name)
           }
         }
       } else {
-        this.curMarjorsCode3 = [];
+        this.curMarjorsCode3 = []
       }
     },
     onChangeSchoolPopup() {
-      this.isShowSchoolPopup = !this.isShowSchoolPopup;
+      this.isShowSchoolPopup = !this.isShowSchoolPopup
     },
     onChangeMajorPopup() {
-      this.isShowMajorPopup = !this.isShowMajorPopup;
+      this.isShowMajorPopup = !this.isShowMajorPopup
     },
     changeMajor(res) {
-      this.curMarjorsCode3 = [];
+      this.curMarjorsCode3 = []
       switch (res.level) {
-        case 1:
-          this.curMarjorsCode = res.code;
-          break;
-        case 2:
-          this.curMarjorsCode2 = res.code;
-          break;
+      case 1:
+        this.curMarjorsCode = res.code
+        break
+      case 2:
+        this.curMarjorsCode2 = res.code
+        break
       }
-      this.marjorsCode = res.code;
-      this.marjorsLevel = res.level + 1;
-      this.httpGetMarjorsList();
+      this.marjorsCode = res.code
+      this.marjorsLevel = res.level + 1
+      this.httpGetMarjorsList()
     },
     schoolSubmit() {
-      this.flag.isShowSchoolPopup = false;
-      this.checkData();
+      this.flag.isShowSchoolPopup = false
+      this.checkData()
     },
     majorSubmit() {
-      this.checkData();
+      this.checkData()
     },
     cleanSchoolSelect() {
-      this.selectLocation = [];
-      this.selectTypes = [];
-      this.selectCharacteristic = [];
+      this.selectLocation = []
+      this.selectTypes = []
+      this.selectCharacteristic = []
     },
     cleanMajorList() {
-      this.curMarjorsCode3 = [];
+      this.curMarjorsCode3 = []
     },
     getSubjectText() {
-      let rText = "";
-      rText += this.curSelectScienceList + "+";
-      let lLen = this.curSelectLiberalArts.length;
+      let rText = ''
+      rText += this.curSelectScienceList + '+'
+      const lLen = this.curSelectLiberalArts.length
       for (let i = 0; i < lLen; i++) {
-        rText += this.curSelectLiberalArts[i];
+        rText += this.curSelectLiberalArts[i]
         if (i != lLen - 1) {
-          rText += "+";
+          rText += '+'
         }
       }
-      return rText;
+      return rText
     },
     clickMarjorsType(type) {
-      this.marjorsType = type;
-      this.marjorsLevel = 1;
-      this.marjorsCode = "";
-      this.httpGetMarjorsList();
+      this.marjorsType = type
+      this.marjorsLevel = 1
+      this.marjorsCode = ''
+      this.httpGetMarjorsList()
     },
     httpGetMarjorsList() {
-      marjorsList({
+      allMajor({
         type: this.marjorsType,
         level: this.marjorsLevel,
-        code: this.marjorsCode,
+        parentCode: this.marjorsCode
       }).then((res) => {
         switch (this.marjorsLevel) {
-          case 2:
-            this.marjorsList2 = res.rows;
-            this.changeMajor(res.rows[0]);
-            break;
-          case 3:
-            this.marjorsList3 = res.rows;
-            break;
-          default:
-            this.marjorsList = res.rows;
-            this.changeMajor(res.rows[0]);
-            break;
+        case 2:
+          this.marjorsList2 = res.data
+          this.changeMajor(res.data[0])
+          break
+        case 3:
+          this.marjorsList3 = res.data
+          break
+        default:
+          this.marjorsList = res.data
+          this.changeMajor(res.data[0])
+          break
         }
-      });
+      })
     },
     httpUniversityFilters() {
       universityFilters({}).then(({ data }) => {
-        this.locationsList = data.locations;
-        this.typesList = data.types;
-        this.featuresList = data.features;
-      });
+        this.locationsList = data.locations
+        this.typesList = data.types
+        this.featuresList = data.features
+      })
+    },
+    httpCollectAdd(row) {
+      collectAdd({
+        refId: row.id
+      }).then((res) => {
+        this.checkData()
+      })
+    },
+    httpCollectRemove(row) {
+      collectRemove({
+        refId: row.id
+      }).then((res) => {
+        this.checkData()
+      })
     },
     onChangeYear(res) {
-      this.checkData();
+      this.checkData()
     },
     onClickScience(item) {
       if (this.curSelectScienceList == item.name) {
-        return;
+        return
       } else {
-        this.curSelectScienceList = item.name;
+        this.curSelectScienceList = item.name
       }
-      this.isShowTable = false;
+      this.isShowTable = false
     },
     onClickLiberalArts(item) {
-      let index = this.curSelectLiberalArts.indexOf(item.name);
+      const index = this.curSelectLiberalArts.indexOf(item.name)
       if (index >= 0) {
-        this.curSelectLiberalArts.splice(index, 1);
+        this.curSelectLiberalArts.splice(index, 1)
       } else {
-        this.curSelectLiberalArts.push(item.name);
+        this.curSelectLiberalArts.push(item.name)
       }
-      this.isShowTable = false;
+      this.isShowTable = false
     },
     isShowScience(name) {
-      return this.curSelectScienceList == name;
+      return this.curSelectScienceList == name
     },
     isShowLiberalArts(name) {
-      return this.curSelectLiberalArts.indexOf(name) >= 0;
+      return this.curSelectLiberalArts.indexOf(name) >= 0
     },
     onSearch() {
-      this.checkData();
+      this.checkData()
     },
     httpGetXkcxYears() {
       xkcxYears().then((res) => {
-        this.yearList = res.data;
-      });
+        this.yearList = res.data
+      })
     },
     onChangePage(page) {
-      this.pageSize = page.limit;
-      this.pageNum = page.page;
-      this.checkData();
+      this.pageSize = page.limit
+      this.pageNum = page.page
+      this.checkData()
     },
     checkData(cb) {
-      this.$emit("onMajorChoiced", {locations:this.selectLocation, features:this.features, types:this.selectTypes})
+      this.$emit('onMajorChoiced', { locations: this.selectLocation, features: this.features, types: this.selectTypes })
     },
     httpGetXkcxList() {
       xkcxlist({
@@ -332,23 +347,23 @@ export default {
         year: this.selectNian,
         pageNum: this.pageNum,
         marjors: this.curMarjorsCode3.toString(),
-        pageSize: this.pageSize,
+        pageSize: this.pageSize
       })
         .then((res) => {
-          this.dataList = res.rows;
-          this.total = res.total;
-          this.isShowTable = true;
+          this.dataList = res.rows
+          this.total = res.total
+          this.isShowTable = true
         })
         .catch((err) => {
-          console.log("请求出错！");
-          this.cleanSchoolSelect();
-        });
-    },
-  },
-};
+          console.log('请求出错！', err)
+          this.cleanSchoolSelect()
+        })
+    }
+  }
+}
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .subject-page {
   padding: 0 100px;
 }
@@ -365,7 +380,7 @@ export default {
   border-bottom: 1px solid #eee;
   border-radius: 2px;
   background-color: #fff;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .5);
 }
 .el-breadcrumb {
   font-size: 16px !important;
@@ -374,7 +389,7 @@ export default {
   padding: 60px 40px 60px 50px;
 }
 .content-box-title {
-  color: #47c6a2;
+  color: var(--themeColor);
   font-size: 24px;
 }
 .content-top-box {
@@ -383,9 +398,9 @@ export default {
   justify-content: space-between;
 }
 .my-subject-button {
-  color: #47c6a2;
+  color: var(--themeColor);
   font-size: 14px;
-  border: 1px solid #47c6a2;
+  border: 1px solid var(--themeColor);
   padding: 13px 110px;
 }
 .content-msg {
@@ -405,7 +420,7 @@ export default {
   margin-right: 20px;
 }
 .select-msg {
-  color: #47c6a2;
+  color: var(--themeColor);
   font-size: 14px;
 }
 .select-click-list {
@@ -440,7 +455,7 @@ export default {
   height: 20px;
   width: 20px;
   border-radius: 2px;
-  background: #47c6a2;
+  background: var(--themeColor);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -550,8 +565,8 @@ export default {
   padding: 0 20px 0 30px;
 }
 .popup-select-item.active {
-  color: #47c6a2;
-  border-right: 2px solid #47c6a2;
+  color: var(--themeColor);
+  border-right: 2px solid var(--themeColor);
 }
 .choice-box {
   display: flex;
@@ -569,7 +584,7 @@ export default {
   cursor: pointer;
 }
 .choice-item-menv.active {
-  color: #47c6a2;
+  color: var(--themeColor);
 }
 .choice-item-checkbox {
   padding: 10px 20px;

src/views/career/components/MajorTable.vue

@@ -1,716 +1,749 @@
-<template>
-  <div class="subject-page">
-    <div class="content-box">
-      <div class="xkcx-list-box" v-if="isShowTable">
-        <div class="xkcx-input-box">
-          <div>
-            <el-select
-              v-model="selectNian"
-              @change="onChangeYear"
-              placeholder="全部年份"
-            >
-              <el-option
-                v-for="(item, index) in yearList"
-                :key="index"
-                :label="item"
-                :value="item"
-              >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="button-school">
-            <el-button plain @click="onChangeSchoolPopup">
-              学校
-              <i class="el-icon-my-button"></i>
-            </el-button>
-          </div>
-          <div class="button-major">
-            <el-button plain @click="onChangeMajorPopup">
-              专业<i class="el-icon-my-button"></i
-            ></el-button>
-          </div>
-          <div class="search_header">
-            <input
-              placeholder="请输入内容"
-              v-model="keyword"
-              @keyup.enter="checkData()"
-            />
-            <img
-              src="@/assets/images/icon_search2.png"
-              alt=""
-              @click="checkData()"
-            />
-          </div>
-        </div>
-
-        <div class="concerned-college-container">
-          <mx-table :rows="dataList" :propDefines="propDefines">
-            <template #select="{ row }">
-              <img
-                class="college-icon"
-                v-if="row.collect"
-                @click="httpCollectRemove(row)"
-                src="@/assets/images/subject/icon_shoucang_pre.png"
-              />
-              <img
-                class="college-icon"
-                v-else
-                @click="httpCollectAdd(row)"
-                src="@/assets/images/subject/icon_shoucang_n.png"
-              />
-            </template>
-          </mx-table>
-          <pagination
-            v-show="total > 0"
-            :total="total"
-            :page.sync="pageNum"
-            :limit.sync="pageSize"
-            :page-size="20"
-            @pagination="onChangePage"
-          />
-        </div>
-      </div>
-    </div>
-    <div>
-      <el-dialog
-        :visible="isShowSchoolPopup"
-        width="75%"
-        :before-close="onChangeSchoolPopup"
-      >
-        <div class="popup-box">
-          <div class="popup-item">
-            <div class="popup-item-title">地域选择<span>（可多选）</span></div>
-            <div class="popup-item-content">
-              <el-checkbox-group v-model="selectLocation">
-                <el-checkbox
-                  class="check-box-item"
-                  :label="item"
-                  v-for="(item, index) in locationsList"
-                  :key="index"
-                ></el-checkbox>
-              </el-checkbox-group>
-            </div>
-          </div>
-          <div class="popup-item">
-            <div class="popup-item-title">院校特色<span>（可多选）</span></div>
-            <div class="popup-item-content">
-              <el-checkbox-group v-model="selectCharacteristic">
-                <el-checkbox
-                  class="check-box-item"
-                  :label="item.code"
-                  v-for="(item, index) in characteristicList"
-                  :key="index"
-                  >{{ item.label }}</el-checkbox
-                >
-              </el-checkbox-group>
-            </div>
-          </div>
-          <div class="popup-item">
-            <div class="popup-item-title">院校类别<span>（可多选）</span></div>
-            <div class="popup-item-content">
-              <el-checkbox-group v-model="selectTypes">
-                <el-checkbox
-                  class="check-box-item"
-                  :label="item"
-                  v-for="(item, index) in typesList"
-                  :key="index"
-                ></el-checkbox>
-              </el-checkbox-group>
-            </div>
-          </div>
-          <div class="bottom-box">
-            <div class="popup-msg">*请点击（或取消）以下学校信息进行筛选</div>
-            <div class="button-list">
-              <el-button @click="cleanSchoolSelect">清空</el-button>
-              <el-button @click="schoolSubmit" type="primary">确定</el-button>
-            </div>
-          </div>
-        </div>
-      </el-dialog>
-      <el-dialog
-        :visible="isShowMajorPopup"
-        width="75%"
-        :before-close="onChangeMajorPopup"
-      >
-        <div class="popup-box major-box">
-          <div class="popup-select">
-            <div
-              class="popup-select-item"
-              :class="marjorsType == '本科' ? 'active' : ''"
-              @click="clickMarjorsType('本科')"
-            >
-              本科
-            </div>
-            <div
-              class="popup-select-item"
-              :class="marjorsType == '高职专科' ? 'active' : ''"
-              @click="clickMarjorsType('高职专科')"
-            >
-              专科
-            </div>
-          </div>
-          <div class="choice-box">
-            <div class="choice-item">
-              <div
-                class="choice-item-menv"
-                v-for="(item, index) in marjorsList"
-                :key="index"
-                :class="curMarjorsCode == item.code ? 'active' : ''"
-                @click="changeMajor(item)"
-              >
-                {{ item.name }}
-              </div>
-            </div>
-            <div class="choice-item">
-              <div
-                class="choice-item-menv"
-                v-for="(item, index) in marjorsList2"
-                :key="index"
-                :class="curMarjorsCode2 == item.code ? 'active' : ''"
-                @click="changeMajor(item)"
-              >
-                {{ item.name }}
-              </div>
-            </div>
-            <div class="choice-item">
-              <el-checkbox-group v-model="curMarjorsCode3">
-                <el-checkbox
-                  class="choice-item-checkbox"
-                  label="全选"
-                  @change="onSelectMarjorsAll"
-                ></el-checkbox>
-                <el-checkbox
-                  class="choice-item-checkbox"
-                  :label="item.name"
-                  v-for="(item, index) in marjorsList3"
-                  :key="index"
-                ></el-checkbox>
-              </el-checkbox-group>
-            </div>
-          </div>
-        </div>
-        <div class="bottom-box">
-          <div class="popup-msg">*请点击（或取消）以下学校信息进行筛选</div>
-          <div class="button-list">
-            <el-button @click="cleanMajorList">清空</el-button>
-            <el-button @click="majorSubmit" type="primary">确定</el-button>
-          </div>
-        </div>
-      </el-dialog>
-    </div>
-  </div>
-</template>
-
-<script>
-import {
-  xkcxlist,
-  xkcxYears,
-  collectAdd,
-  collectRemove,
-  universityFilters,
-  marjorsList,
-} from "@/api/webApi/webQue";
-export default {
-  data() {
-    return {
-      scienceList: [
-        {
-          name: "物理",
-          id: 1,
-        },
-        {
-          name: "历史",
-          id: 2,
-        },
-      ],
-      liberalArts: [
-        {
-          name: "化学",
-          id: 1,
-        },
-        {
-          name: "生物",
-          id: 2,
-        },
-        {
-          name: "地理",
-          id: 3,
-        },
-        {
-          name: "政治",
-          id: 4,
-        },
-      ],
-      propDefines: {
-        universityName: {
-          label: "院校名称",
-        },
-        marjorName: {
-          label: "专业（类）名称",
-        },
-        resourcesName: {
-          label: "类中所含专业",
-          align: "left",
-        },
-        level: {
-          label: "专业层次",
-        },
-        courseRemark0: {
-          label: "首选科目",
-          align: "left",
-        },
-        courseRemark1: {
-          label: "再选科目",
-          align: "left",
-        },
-        collect: {
-          label: "选择",
-          align: "left",
-          slot: "select",
-          width: "100px",
-        },
-      },
-      curSelectScienceList: "",
-      curSelectLiberalArts: [],
-      options: [],
-      selectNian: "",
-      dataList: [],
-      yearList: [],
-      pageNum: 1,
-      pageSize: 20,
-      total: 0,
-      keyword: "",
-      isShowTable: true,
-      locationsList: [],
-      typesList: [],
-      characteristicList: [],
-      selectLocation: [], //地区
-      selectTypes: [], //类别
-      selectCharacteristic: [], //选中的特色
-      isShowSchoolPopup: false,
-      isShowMajorPopup: false,
-      marjorsList: [],
-      marjorsList2: [],
-      marjorsList3: [],
-      marjorsType: "本科",
-      marjorsLevel: 1,
-      marjorsCode: "",
-      curMarjorsCode: "",
-      curMarjorsCode2: "",
-      curMarjorsCode3: [],
-    };
-  },
-  created() {
-    this.httpGetXkcxYears();
-    this.httpUniversityFilters();
-    this.httpGetMarjorsList();
-  },
-  methods: {
-    onSelectMarjorsAll(res) {
-      if (res) {
-        let len = this.marjorsList3.length;
-        for (let i = 0; i < len; i++) {
-          let name = this.marjorsList3[i]["name"];
-          let index = this.curMarjorsCode3.indexOf(name);
-          if (index < 0) {
-            this.curMarjorsCode3.push(name);
-          }
-        }
-      } else {
-        this.curMarjorsCode3 = [];
-      }
-    },
-    onChangeSchoolPopup() {
-      this.isShowSchoolPopup = !this.isShowSchoolPopup;
-    },
-    onChangeMajorPopup() {
-      this.isShowMajorPopup = !this.isShowMajorPopup;
-    },
-    changeMajor(res) {
-      this.curMarjorsCode3 = [];
-      switch (res.level) {
-        case 1:
-          this.curMarjorsCode = res.code;
-          break;
-        case 2:
-          this.curMarjorsCode2 = res.code;
-          break;
-      }
-      this.marjorsCode = res.code;
-      this.marjorsLevel = res.level + 1;
-      this.httpGetMarjorsList();
-    },
-    schoolSubmit() {
-      this.isShowSchoolPopup = false;
-      this.checkData();
-    },
-    majorSubmit() {
-      this.isShowMajorPopup = false;
-      this.checkData();
-    },
-    cleanSchoolSelect() {
-      this.selectLocation = [];
-      this.selectTypes = [];
-      this.selectCharacteristic = [];
-    },
-    cleanMajorList() {
-      this.curMarjorsCode3 = [];
-    },
-    getSubjectText() {
-      let rText = "";
-      rText += this.curSelectScienceList + "+";
-      let lLen = this.curSelectLiberalArts.length;
-      for (let i = 0; i < lLen; i++) {
-        rText += this.curSelectLiberalArts[i];
-        if (i != lLen - 1) {
-          rText += "+";
-        }
-      }
-      return rText;
-    },
-    clickMarjorsType(type) {
-      this.marjorsType = type;
-      this.marjorsLevel = 1;
-      this.marjorsCode = "";
-      this.httpGetMarjorsList();
-    },
-    httpGetMarjorsList() {
-      marjorsList({
-        type: this.marjorsType,
-        level: this.marjorsLevel,
-        code: this.marjorsCode,
-      }).then((res) => {
-        switch (this.marjorsLevel) {
-          case 2:
-            this.marjorsList2 = res.rows;
-            this.changeMajor(res.rows[0]);
-            break;
-          case 3:
-            this.marjorsList3 = res.rows;
-            break;
-          default:
-            this.marjorsList = res.rows;
-            this.changeMajor(res.rows[0]);
-            break;
-        }
-      });
-    },
-    httpUniversityFilters() {
-      universityFilters({}).then(({ data }) => {
-        this.locationsList = data.locations;
-        this.typesList = data.types;
-        this.characteristicList = data.features;
-      });
-    },
-    httpCollectAdd(row) {
-      collectAdd({
-        refId: row.id,
-      }).then((res) => {
-        this.checkData();
-      });
-    },
-    httpCollectRemove(row) {
-      collectRemove({
-        refId: row.id,
-      }).then((res) => {
-        this.checkData();
-      });
-    },
-    onChangeYear(res) {
-      this.checkData();
-    },
-    onClickScience(item) {
-      if (this.curSelectScienceList == item.name) {
-        return;
-      } else {
-        this.curSelectScienceList = item.name;
-      }
-      this.isShowTable = false;
-    },
-    onClickLiberalArts(item) {
-      let index = this.curSelectLiberalArts.indexOf(item.name);
-      if (index >= 0) {
-        this.curSelectLiberalArts.splice(index, 1);
-      } else {
-        this.curSelectLiberalArts.push(item.name);
-      }
-      this.isShowTable = false;
-    },
-    isShowScience(name) {
-      return this.curSelectScienceList == name;
-    },
-    isShowLiberalArts(name) {
-      return this.curSelectLiberalArts.indexOf(name) >= 0;
-    },
-    onSearch() {
-      this.checkData();
-    },
-    httpGetXkcxYears() {
-      xkcxYears().then((res) => {
-        this.yearList = res.data;
-      });
-    },
-    onChangePage(page) {
-      this.pageSize = page.limit;
-      this.pageNum = page.page;
-      this.checkData();
-    },
-    checkData(cb) {
-      if (this.curSelectLiberalArts.length != 2) {
-        this.$message.error("请从右侧4门可选科目中点击选择2门");
-        return;
-      }
-      this.httpGetXkcxList();
-    },
-    httpGetXkcxList() {
-      xkcxlist({
-        keyword: this.keyword,
-        course0: this.curSelectScienceList,
-        course1: this.curSelectLiberalArts.toString(),
-        locations: this.selectLocation.toString(),
-        ts: this.selectCharacteristic.toString(),
-        types: this.selectTypes.toString(),
-        year: this.selectNian,
-        pageNum: this.pageNum,
-        marjors: this.curMarjorsCode3.toString(),
-        pageSize: this.pageSize,
-      })
-        .then((res) => {
-          this.dataList = res.rows;
-          this.total = res.total;
-          this.isShowTable = true;
-        })
-        .catch((err) => {
-          console.log("请求出错！");
-          this.cleanSchoolSelect();
-        });
-    },
-  },
-};
-</script>
-
-<style scoped>
-.subject-page {
-  padding: 0 100px;
-}
-.college-icon {
-  cursor: pointer;
-}
-.breadcrumb {
-  padding: 15px 30px;
-  margin: 15px 0;
-  border-bottom: 1px solid #eee;
-  border-radius: 2px;
-  background-color: #fff;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
-}
-.el-breadcrumb {
-  font-size: 16px !important;
-}
-.content-box {
-  padding: 60px 40px 60px 50px;
-}
-.content-box-title {
-  color: #47c6a2;
-  font-size: 24px;
-}
-.content-top-box {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.my-subject-button {
-  color: #47c6a2;
-  font-size: 14px;
-  border: 1px solid #47c6a2;
-  padding: 13px 110px;
-}
-.content-msg {
-  margin: 32px 0;
-  font-size: 16px;
-}
-.select-box {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.select-item {
-  box-sizing: border-box;
-  border: 1px dashed rgba(24, 144, 255, 1);
-  height: 334px;
-  padding: 20px;
-  margin-right: 20px;
-}
-.select-msg {
-  color: #47c6a2;
-  font-size: 14px;
-}
-.select-click-list {
-  margin-top: 40px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-.select-box-click-item {
-  background-color: #fbfbfb;
-  cursor: pointer;
-  height: 89px;
-  line-height: 89px;
-  font-size: 24px;
-  color: #414141;
-  font-weight: 600;
-  text-align: center;
-  position: relative;
-}
-.select-box-click-item.two {
-  margin: 10px 0;
-  width: 100%;
-}
-.select-box-click-item.four {
-  margin: 10px 0;
-  width: 46%;
-}
-.select-box-click-item.active {
-  background-color: #d4eaff !important;
-}
-.select-box-click-item-icon {
-  height: 20px;
-  width: 20px;
-  border-radius: 2px;
-  background: #47c6a2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  color: #fff;
-}
-.select-button {
-  padding: 0px 60px;
-}
-.xkcx-list-title {
-  width: 100%;
-  background-color: #e8e8e8;
-  padding: 30px;
-  text-align: center;
-  font-size: 24px;
-  color: #4c4c4c;
-  margin-top: 80px;
-}
-.xkcx-input-box {
-  padding: 20px 0;
-  display: flex;
-}
-.search_header {
-  margin-left: auto;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  position: relative;
-  margin-right: 20px;
-}
-.search_header img {
-  position: absolute;
-  right: 20px;
-  cursor: pointer;
-  top: 6px;
-}
-.search_header input {
-  background: #f7f7ff;
-  border-radius: 20px;
-  border: 1px solid #c6cbf5;
-  outline: none;
-  width: 340px;
-  height: 32px;
-  padding-left: 24px;
-}
-.button-school {
-  margin: 0 20px;
-}
-.button-icon {
-  width: 12px;
-  height: 12px;
-}
-
-.el-icon-my-button {
-  background: url(../../../assets/images/subject/icon_shaixuan.png) center
-    no-repeat;
-  background-size: cover;
-}
-.el-icon-my-button:before {
-  content: "替";
-  font-size: 16px;
-  visibility: hidden;
-}
-.popup-item-title {
-  color: #414141;
-  font-size: 16px;
-  font-weight: 600;
-}
-.popup-item-title span {
-  font-size: 14px;
-  font-weight: 500;
-}
-.check-box-item {
-  padding: 8px 0;
-  min-width: 70px;
-}
-.popup-item-content {
-  padding: 20px 0;
-}
-.popup-msg {
-  color: #ffa400;
-  font-weight: 400;
-  font-size: 14px;
-}
-.bottom-box {
-  display: flex;
-  justify-content: space-between;
-}
-.button-list {
-  padding: 0 20px;
-}
-.major-box {
-  display: flex;
-  margin-bottom: 30px;
-}
-.popup-select {
-  border-right: 1px solid #d7d7d7;
-}
-.popup-select-item {
-  cursor: pointer;
-  line-height: 30px;
-  width: 100px;
-  padding: 0 20px 0 30px;
-}
-.popup-select-item.active {
-  color: #47c6a2;
-  border-right: 2px solid #47c6a2;
-}
-.choice-box {
-  display: flex;
-}
-.choice-item {
-  margin: 0 10px;
-  min-width: 300px;
-  border: 1px solid #d7d7d7;
-  height: 300px;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.choice-item-menv {
-  margin: 15px 20px;
-  cursor: pointer;
-}
-.choice-item-menv.active {
-  color: #47c6a2;
-}
-.choice-item-checkbox {
-  padding: 10px 20px;
-  width: 100%;
-  box-sizing: border-box;
-}
-</style>
+<template>
+  <div class="subject-page">
+    <div class="content-box">
+      <div v-if="isShowTable" class="xkcx-list-box">
+        <div class="xkcx-input-box">
+          <div>
+            <el-select
+              v-model="selectNian"
+              placeholder="全部年份"
+              @change="onChangeYear"
+            >
+              <el-option
+                v-for="(item, index) in yearList"
+                :key="index"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
+          </div>
+          <div class="button-school">
+            <el-button plain @click="onChangeSchoolPopup">
+              学校
+              <i class="el-icon-my-button" />
+            </el-button>
+          </div>
+          <div class="button-major">
+            <el-button plain @click="onChangeMajorPopup">
+              专业<i class="el-icon-my-button" /></el-button>
+          </div>
+          <div class="search_header">
+            <input
+              v-model="keyword"
+              placeholder="请输入内容"
+              @keyup.enter="checkData()"
+            >
+            <img
+              src="@/assets/images/icon_search2.png"
+              alt=""
+              @click="checkData()"
+            >
+          </div>
+        </div>
+
+        <div class="concerned-college-container">
+          <mx-table :rows="dataList" :prop-defines="propDefines">
+            <template #select="{ row }">
+              <img
+                v-if="row.collect"
+                class="college-icon"
+                src="@/assets/images/subject/icon_shoucang_pre.png"
+                @click="httpCollectRemove(row)"
+              >
+              <img
+                v-else
+                class="college-icon"
+                src="@/assets/images/subject/icon_shoucang_n.png"
+                @click="httpCollectAdd(row)"
+              >
+            </template>
+          </mx-table>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="pageNum"
+            :limit.sync="pageSize"
+            :page-size="20"
+            @pagination="onChangePage"
+          />
+        </div>
+      </div>
+    </div>
+    <div>
+      <el-dialog
+        :visible="isShowSchoolPopup"
+        width="75%"
+        :before-close="onChangeSchoolPopup"
+      >
+        <div class="popup-box">
+          <div class="popup-item">
+            <div class="popup-item-title">地域选择<span>（可多选）</span></div>
+            <div class="popup-item-content">
+              <el-checkbox-group v-model="selectLocation">
+                <el-checkbox
+                  v-for="(item, index) in locationsList"
+                  :key="index"
+                  class="check-box-item"
+                  :label="item"
+                />
+              </el-checkbox-group>
+            </div>
+          </div>
+          <div class="popup-item">
+            <div class="popup-item-title">院校特色<span>（可多选）</span></div>
+            <div class="popup-item-content">
+              <el-checkbox-group v-model="selectCharacteristic">
+                <el-checkbox
+                  v-for="(item, index) in characteristicList"
+                  :key="index"
+                  class="check-box-item"
+                  :label="item.code"
+                >{{ item.label }}
+                </el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+          <div class="popup-item">
+            <div class="popup-item-title">院校类别<span>（可多选）</span></div>
+            <div class="popup-item-content">
+              <el-checkbox-group v-model="selectTypes">
+                <el-checkbox
+                  v-for="(item, index) in typesList"
+                  :key="index"
+                  class="check-box-item"
+                  :label="item"
+                />
+              </el-checkbox-group>
+            </div>
+          </div>
+          <div class="bottom-box">
+            <div class="popup-msg">*请点击（或取消）以下学校信息进行筛选</div>
+            <div class="button-list">
+              <el-button @click="cleanSchoolSelect">清空</el-button>
+              <el-button type="primary" @click="schoolSubmit">确定</el-button>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+      <el-dialog
+        :visible="isShowMajorPopup"
+        width="75%"
+        :before-close="onChangeMajorPopup"
+      >
+        <div class="popup-box major-box">
+          <div class="popup-select">
+            <div
+              class="popup-select-item"
+              :class="marjorsType == '本科' ? 'active' : ''"
+              @click="clickMarjorsType('本科')"
+            >
+              本科
+            </div>
+            <div
+              class="popup-select-item"
+              :class="marjorsType == '高职专科' ? 'active' : ''"
+              @click="clickMarjorsType('高职专科')"
+            >
+              专科
+            </div>
+          </div>
+          <div class="choice-box">
+            <div class="choice-item">
+              <div
+                v-for="(item, index) in marjorsList"
+                :key="index"
+                class="choice-item-menv"
+                :class="curMarjorsCode == item.code ? 'active' : ''"
+                @click="changeMajor(item)"
+              >
+                {{ item.name }}
+              </div>
+            </div>
+            <div class="choice-item">
+              <div
+                v-for="(item, index) in marjorsList2"
+                :key="index"
+                class="choice-item-menv"
+                :class="curMarjorsCode2 == item.code ? 'active' : ''"
+                @click="changeMajor(item)"
+              >
+                {{ item.name }}
+              </div>
+            </div>
+            <div class="choice-item">
+              <el-checkbox-group v-model="curMarjorsCode3">
+                <el-checkbox
+                  class="choice-item-checkbox"
+                  label="全选"
+                  @change="onSelectMarjorsAll"
+                />
+                <el-checkbox
+                  v-for="(item, index) in marjorsList3"
+                  :key="index"
+                  class="choice-item-checkbox"
+                  :label="item.name"
+                />
+              </el-checkbox-group>
+            </div>
+          </div>
+        </div>
+        <div class="bottom-box">
+          <div class="popup-msg">*请点击（或取消）以下学校信息进行筛选</div>
+          <div class="button-list">
+            <el-button @click="cleanMajorList">清空</el-button>
+            <el-button type="primary" @click="majorSubmit">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { collectAdd, collectRemove, marjorsList, universityFilters, xkcxlist, xkcxYears } from '@/api/webApi/webQue'
+
+export default {
+  data() {
+    return {
+      scienceList: [
+        {
+          name: '物理',
+          id: 1
+        },
+        {
+          name: '历史',
+          id: 2
+        }
+      ],
+      liberalArts: [
+        {
+          name: '化学',
+          id: 1
+        },
+        {
+          name: '生物',
+          id: 2
+        },
+        {
+          name: '地理',
+          id: 3
+        },
+        {
+          name: '政治',
+          id: 4
+        }
+      ],
+      propDefines: {
+        universityName: {
+          label: '院校名称'
+        },
+        marjorName: {
+          label: '专业（类）名称'
+        },
+        resourcesName: {
+          label: '类中所含专业',
+          align: 'left'
+        },
+        level: {
+          label: '专业层次'
+        },
+        courseRemark0: {
+          label: '首选科目',
+          align: 'left'
+        },
+        courseRemark1: {
+          label: '再选科目',
+          align: 'left'
+        },
+        collect: {
+          label: '选择',
+          align: 'left',
+          slot: 'select',
+          width: '100px'
+        }
+      },
+      curSelectScienceList: '',
+      curSelectLiberalArts: [],
+      options: [],
+      selectNian: '',
+      dataList: [],
+      yearList: [],
+      pageNum: 1,
+      pageSize: 20,
+      total: 0,
+      keyword: '',
+      isShowTable: true,
+      locationsList: [],
+      typesList: [],
+      characteristicList: [],
+      selectLocation: [], // 地区
+      selectTypes: [], // 类别
+      selectCharacteristic: [], // 选中的特色
+      isShowSchoolPopup: false,
+      isShowMajorPopup: false,
+      marjorsList: [],
+      marjorsList2: [],
+      marjorsList3: [],
+      marjorsType: '本科',
+      marjorsLevel: 1,
+      marjorsCode: '',
+      curMarjorsCode: '',
+      curMarjorsCode2: '',
+      curMarjorsCode3: []
+    }
+  },
+  created() {
+    this.httpGetXkcxYears()
+    this.httpUniversityFilters()
+    this.httpGetMarjorsList()
+  },
+  methods: {
+    onSelectMarjorsAll(res) {
+      if (res) {
+        const len = this.marjorsList3.length
+        for (let i = 0; i < len; i++) {
+          const name = this.marjorsList3[i]['name']
+          const index = this.curMarjorsCode3.indexOf(name)
+          if (index < 0) {
+            this.curMarjorsCode3.push(name)
+          }
+        }
+      } else {
+        this.curMarjorsCode3 = []
+      }
+    },
+    onChangeSchoolPopup() {
+      this.isShowSchoolPopup = !this.isShowSchoolPopup
+    },
+    onChangeMajorPopup() {
+      this.isShowMajorPopup = !this.isShowMajorPopup
+    },
+    changeMajor(res) {
+      this.curMarjorsCode3 = []
+      switch (res.level) {
+      case 1:
+        this.curMarjorsCode = res.code
+        break
+      case 2:
+        this.curMarjorsCode2 = res.code
+        break
+      }
+      this.marjorsCode = res.code
+      this.marjorsLevel = res.level + 1
+      this.httpGetMarjorsList()
+    },
+    schoolSubmit() {
+      this.isShowSchoolPopup = false
+      this.checkData()
+    },
+    majorSubmit() {
+      this.isShowMajorPopup = false
+      this.checkData()
+    },
+    cleanSchoolSelect() {
+      this.selectLocation = []
+      this.selectTypes = []
+      this.selectCharacteristic = []
+    },
+    cleanMajorList() {
+      this.curMarjorsCode3 = []
+    },
+    getSubjectText() {
+      let rText = ''
+      rText += this.curSelectScienceList + '+'
+      const lLen = this.curSelectLiberalArts.length
+      for (let i = 0; i < lLen; i++) {
+        rText += this.curSelectLiberalArts[i]
+        if (i != lLen - 1) {
+          rText += '+'
+        }
+      }
+      return rText
+    },
+    clickMarjorsType(type) {
+      this.marjorsType = type
+      this.marjorsLevel = 1
+      this.marjorsCode = ''
+      this.httpGetMarjorsList()
+    },
+    httpGetMarjorsList() {
+      marjorsList({
+        type: this.marjorsType,
+        level: this.marjorsLevel,
+        code: this.marjorsCode
+      }).then((res) => {
+        switch (this.marjorsLevel) {
+        case 2:
+          this.marjorsList2 = res.rows
+          this.changeMajor(res.rows[0])
+          break
+        case 3:
+          this.marjorsList3 = res.rows
+          break
+        default:
+          this.marjorsList = res.rows
+          this.changeMajor(res.rows[0])
+          break
+        }
+      })
+    },
+    httpUniversityFilters() {
+      universityFilters({}).then(({ data }) => {
+        this.locationsList = data.locations
+        this.typesList = data.types
+        this.characteristicList = data.features
+      })
+    },
+    httpCollectAdd(row) {
+      collectAdd({
+        refId: row.id
+      }).then((res) => {
+        this.checkData()
+      })
+    },
+    httpCollectRemove(row) {
+      collectRemove({
+        refId: row.id
+      }).then((res) => {
+        this.checkData()
+      })
+    },
+    onChangeYear(res) {
+      this.checkData()
+    },
+    onClickScience(item) {
+      if (this.curSelectScienceList == item.name) {
+        return
+      } else {
+        this.curSelectScienceList = item.name
+      }
+      this.isShowTable = false
+    },
+    onClickLiberalArts(item) {
+      const index = this.curSelectLiberalArts.indexOf(item.name)
+      if (index >= 0) {
+        this.curSelectLiberalArts.splice(index, 1)
+      } else {
+        this.curSelectLiberalArts.push(item.name)
+      }
+      this.isShowTable = false
+    },
+    isShowScience(name) {
+      return this.curSelectScienceList == name
+    },
+    isShowLiberalArts(name) {
+      return this.curSelectLiberalArts.indexOf(name) >= 0
+    },
+    onSearch() {
+      this.checkData()
+    },
+    httpGetXkcxYears() {
+      xkcxYears().then((res) => {
+        this.yearList = res.data
+      })
+    },
+    onChangePage(page) {
+      this.pageSize = page.limit
+      this.pageNum = page.page
+      this.checkData()
+    },
+    checkData(cb) {
+      if (this.curSelectLiberalArts.length != 2) {
+        this.$message.error('请从右侧4门可选科目中点击选择2门')
+        return
+      }
+      this.httpGetXkcxList()
+    },
+    httpGetXkcxList() {
+      xkcxlist({
+        keyword: this.keyword,
+        course0: this.curSelectScienceList,
+        course1: this.curSelectLiberalArts.toString(),
+        locations: this.selectLocation.toString(),
+        ts: this.selectCharacteristic.toString(),
+        types: this.selectTypes.toString(),
+        year: this.selectNian,
+        pageNum: this.pageNum,
+        marjors: this.curMarjorsCode3.toString(),
+        pageSize: this.pageSize
+      })
+        .then((res) => {
+          this.dataList = res.rows
+          this.total = res.total
+          this.isShowTable = true
+        })
+        .catch((err) => {
+          console.log('请求出错！', err)
+          this.cleanSchoolSelect()
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.subject-page {
+  padding: 0 100px;
+}
+
+.college-icon {
+  cursor: pointer;
+}
+
+.breadcrumb {
+  padding: 15px 30px;
+  margin: 15px 0;
+  border-bottom: 1px solid #eee;
+  border-radius: 2px;
+  background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .5);
+}
+
+.el-breadcrumb {
+  font-size: 16px !important;
+}
+
+.content-box {
+  padding: 60px 40px 60px 50px;
+}
+
+.content-box-title {
+  color: var(--themeColor);
+  font-size: 24px;
+}
+
+.content-top-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.my-subject-button {
+  color: var(--themeColor);
+  font-size: 14px;
+  border: 1px solid var(--themeColor);
+  padding: 13px 110px;
+}
+
+.content-msg {
+  margin: 32px 0;
+  font-size: 16px;
+}
+
+.select-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.select-item {
+  box-sizing: border-box;
+  border: 1px dashed rgba(24, 144, 255, 1);
+  height: 334px;
+  padding: 20px;
+  margin-right: 20px;
+}
+
+.select-msg {
+  color: var(--themeColor);
+  font-size: 14px;
+}
+
+.select-click-list {
+  margin-top: 40px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.select-box-click-item {
+  background-color: #fbfbfb;
+  cursor: pointer;
+  height: 89px;
+  line-height: 89px;
+  font-size: 24px;
+  color: #414141;
+  font-weight: 600;
+  text-align: center;
+  position: relative;
+}
+
+.select-box-click-item.two {
+  margin: 10px 0;
+  width: 100%;
+}
+
+.select-box-click-item.four {
+  margin: 10px 0;
+  width: 46%;
+}
+
+.select-box-click-item.active {
+  background-color: #d4eaff !important;
+}
+
+.select-box-click-item-icon {
+  height: 20px;
+  width: 20px;
+  border-radius: 2px;
+  background: var(--themeColor);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  color: #fff;
+}
+
+.select-button {
+  padding: 0px 60px;
+}
+
+.xkcx-list-title {
+  width: 100%;
+  background-color: #e8e8e8;
+  padding: 30px;
+  text-align: center;
+  font-size: 24px;
+  color: #4c4c4c;
+  margin-top: 80px;
+}
+
+.xkcx-input-box {
+  padding: 20px 0;
+  display: flex;
+}
+
+.search_header {
+  margin-left: auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  margin-right: 20px;
+}
+
+.search_header img {
+  position: absolute;
+  right: 20px;
+  cursor: pointer;
+  top: 6px;
+}
+
+.search_header input {
+  background: #f7f7ff;
+  border-radius: 20px;
+  border: 1px solid #c6cbf5;
+  outline: none;
+  width: 340px;
+  height: 32px;
+  padding-left: 24px;
+}
+
+.button-school {
+  margin: 0 20px;
+}
+
+.button-icon {
+  width: 12px;
+  height: 12px;
+}
+
+.el-icon-my-button {
+  background: url(../../../assets/images/subject/icon_shaixuan.png) center no-repeat;
+  background-size: cover;
+}
+
+.el-icon-my-button:before {
+  content: "替";
+  font-size: 16px;
+  visibility: hidden;
+}
+
+.popup-item-title {
+  color: #414141;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.popup-item-title span {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.check-box-item {
+  padding: 8px 0;
+  min-width: 70px;
+}
+
+.popup-item-content {
+  padding: 20px 0;
+}
+
+.popup-msg {
+  color: #ffa400;
+  font-weight: 400;
+  font-size: 14px;
+}
+
+.bottom-box {
+  display: flex;
+  justify-content: space-between;
+}
+
+.button-list {
+  padding: 0 20px;
+}
+
+.major-box {
+  display: flex;
+  margin-bottom: 30px;
+}
+
+.popup-select {
+  border-right: 1px solid #d7d7d7;
+}
+
+.popup-select-item {
+  cursor: pointer;
+  line-height: 30px;
+  width: 100px;
+  padding: 0 20px 0 30px;
+}
+
+.popup-select-item.active {
+  color: var(--themeColor);
+  border-right: 2px solid var(--themeColor);
+}
+
+.choice-box {
+  display: flex;
+}
+
+.choice-item {
+  margin: 0 10px;
+  min-width: 300px;
+  border: 1px solid #d7d7d7;
+  height: 300px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.choice-item-menv {
+  margin: 15px 20px;
+  cursor: pointer;
+}
+
+.choice-item-menv.active {
+  color: var(--themeColor);
+}
+
+.choice-item-checkbox {
+  padding: 10px 20px;
+  width: 100%;
+  box-sizing: border-box;
+}
+</style>

src/views/career/components/NewFillMajor.vue

@@ -12,44 +12,45 @@
       <div class="radio_contianer" style="padding: 0 20px">
         <div>
           <span>院校地区</span>
-          <el-radio-group size="mini" v-model="form.location">
-            <el-radio-button label="全部"> 全部 </el-radio-button>
-            <el-radio-button label="北京"> 北京 </el-radio-button>
-            <el-radio-button label="天津"> 天津 </el-radio-button>
-            <el-radio-button label="河北"> 河北 </el-radio-button>
+          <el-radio-group v-model="form.location" size="mini">
+            <el-radio-button label="全部"> 全部</el-radio-button>
+            <el-radio-button label="北京"> 北京</el-radio-button>
+            <el-radio-button label="天津"> 天津</el-radio-button>
+            <el-radio-button label="河北"> 河北</el-radio-button>
           </el-radio-group>
         </div>
         <div>
           <span>院校类型</span>
-          <el-radio-group size="mini" v-model="form.category">
-            <el-radio-button label="全部"> 全部 </el-radio-button>
-            <el-radio-button label="综合"> 综合 </el-radio-button>
-            <el-radio-button label="工科"> 工科 </el-radio-button>
-            <el-radio-button label="农业"> 农业 </el-radio-button>
+          <el-radio-group v-model="form.category" size="mini">
+            <el-radio-button label="全部"> 全部</el-radio-button>
+            <el-radio-button label="综合"> 综合</el-radio-button>
+            <el-radio-button label="工科"> 工科</el-radio-button>
+            <el-radio-button label="农业"> 农业</el-radio-button>
           </el-radio-group>
         </div>
         <div>
           <span>院校特性</span>
-          <el-radio-group size="mini" v-model="form.type">
-            <el-radio-button label="全部"> 全部 </el-radio-button>
-            <el-radio-button label="语双一流文"> 双一流 </el-radio-button>
-            <el-radio-button label="985"> 985 </el-radio-button>
-            <el-radio-button label="211"> 211 </el-radio-button>
+          <el-radio-group v-model="form.type" size="mini">
+            <el-radio-button label="全部"> 全部</el-radio-button>
+            <el-radio-button label="语双一流文"> 双一流</el-radio-button>
+            <el-radio-button label="985"> 985</el-radio-button>
+            <el-radio-button label="211"> 211</el-radio-button>
           </el-radio-group>
         </div>
         <div>
           <span>专业类别</span>
-          <el-radio-group size="mini" v-model="form.texin">
-            <el-radio-button label="全部"> 全部 </el-radio-button>
-            <el-radio-button label="哲学"> 哲学 </el-radio-button>
-            <el-radio-button label="经济学"> 经济学 </el-radio-button>
+          <el-radio-group v-model="form.texin" size="mini">
+            <el-radio-button label="全部"> 全部</el-radio-button>
+            <el-radio-button label="哲学"> 哲学</el-radio-button>
+            <el-radio-button label="经济学"> 经济学</el-radio-button>
           </el-radio-group>
         </div>
         <div class="search_box" style="display:flex;width:500px;align-items: center;">
-           <span style="flex-shrink: 0;">专业搜索</span><el-input  v-model="input" placeholder="请输入意向专业"></el-input>
-            <el-button round>重置</el-button>
+          <span style="flex-shrink: 0;">专业搜索</span>
+          <el-input v-model="input" placeholder="请输入意向专业" />
+          <el-button round>重置</el-button>
 
-           <el-button round type="primary">搜索</el-button>
+          <el-button round type="primary">搜索</el-button>
         </div>
       </div>
     </div>
@@ -57,38 +58,37 @@
 </template>
 
 <script>
-import { zytbMarjor, zytbUniversity } from "@/api/webApi/webQue";
 export default {
-  name: "NewFillMajor",
-  data: () => {
-    return {
-      form: {
-        type: "全部",
-        location: "全部",
-        category: "全部",
-        texin: "全部",
-      },
-    };
-  },
+  name: 'NewFillMajor',
   props: {
     subject: {
       type: String,
-      default: "",
+      default: ''
     },
     score: {
       type: Number,
-      default: 0,
+      default: 0
     },
     firstSubject: {
       type: String,
-      default: "",
+      default: ''
     },
     lastSubject: {
       type: Array,
-      default: [],
-    },
+      default: () => []
+    }
   },
-};
+  data: () => {
+    return {
+      form: {
+        type: '全部',
+        location: '全部',
+        category: '全部',
+        texin: '全部'
+      }
+    }
+  }
+}
 </script>
 
 <style scoped>
@@ -100,6 +100,7 @@ export default {
   padding: 26px;
   border-bottom: 1px solid rgba(183, 183, 183, 0.5);
 }
+
 .radio_contianer > div > span {
   margin-right: 16px;
 }
@@ -113,9 +114,11 @@ export default {
   margin-bottom: 5px;
   margin-right: 8px;
 }
-.new-fill-batch >>> .radio_contianer .is-active .el-radio-button__inner{
+
+.new-fill-batch >>> .radio_contianer .is-active .el-radio-button__inner {
   border-left: none;
 }
+
 .new-fill-batch >>> .split_page .el-pager > li {
   border-radius: 50%;
 }

src/views/career/components/NewFillScore.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fill-score" >
+  <div class="fill-score">
     <div class="top-title">(一)输入高考的成绩</div>
     <div class="input-box">
       <div class="input-item">
@@ -7,15 +7,15 @@
         <div class="item-box">
           <!-- 首选科目 -->
           <el-radio-group v-model="firstSubject" style="margin-bottom: 20px">
-            <el-radio-button label="物理"></el-radio-button>
-            <el-radio-button label="历史"></el-radio-button>
+            <el-radio-button label="物理" />
+            <el-radio-button label="历史" />
           </el-radio-group>
           <!-- 次选科目 -->
           <el-checkbox-group v-model="lastSubject" :max="2">
-            <el-checkbox-button label="化学"></el-checkbox-button>
-            <el-checkbox-button label="生物"></el-checkbox-button>
-            <el-checkbox-button label="地理"></el-checkbox-button>
-            <el-checkbox-button label="政治"></el-checkbox-button>
+            <el-checkbox-button label="化学" />
+            <el-checkbox-button label="生物" />
+            <el-checkbox-button label="地理" />
+            <el-checkbox-button label="政治" />
           </el-checkbox-group>
         </div>
       </div>
@@ -26,7 +26,7 @@
             v-model="inputScore"
             :min="0"
             label="请输入总分"
-          ></el-input-number>
+          />
         </div>
       </div>
       <div class="input-item">
@@ -37,12 +37,12 @@
             :min="0"
             :disabled="isDisIndex"
             label="高考成绩位次发布后填写"
-          ></el-input-number>
+          />
         </div>
         <div class="item-msg">当前为估分模拟，不需填写排名</div>
       </div>
     </div>
-    <simulate-notice></simulate-notice>
+    <simulate-notice />
   </div>
 </template>
 
@@ -50,34 +50,34 @@
 import SimulateNotice from '@/views/career/components/SimulateNotice'
 
 export default {
-  components:{SimulateNotice},
-  name: "NewFillScore",
+  name: 'NewFillScore',
+  components: { SimulateNotice },
+  props: {
+    isDisIndex: {
+      type: Boolean,
+      default: true
+    }
+  },
   data: () => {
     return {
-      firstSubject: "",
+      firstSubject: '',
       inputScore: 0,
       inputIndex: 0,
-      lastSubject: [],
-    };
-  },
-  props: {
-    isDisIndex: {
-      type: Boolean,
-      default: true,
-    },
+      lastSubject: []
+    }
   },
   methods: {
     getSubject() {
-      return this.firstSubject;
+      return this.firstSubject
     },
     getScore() {
-      return this.inputScore;
+      return this.inputScore
     },
     getIndex() {
-      return this.inputIndex;
-    },
-  },
-};
+      return this.inputIndex
+    }
+  }
+}
 </script>
 
 <style scoped>

src/views/career/components/RecordDetail.vue

@@ -51,76 +51,76 @@
 
 <script>
 // 导出word
-import docxtemplater from "docxtemplater";
-import PizZip from "pizzip";
-import JSZipUtils from "jszip-utils";
-import { saveAs } from "file-saver";
-import { mapState } from "vuex";
+import Docxtemplater from 'docxtemplater'
+import PizZip from 'pizzip'
+import JSZipUtils from 'jszip-utils'
+import { saveAs } from 'file-saver'
+import { mapState } from 'vuex'
 export default {
-  name: "RecordDetail",
+  name: 'RecordDetail',
   data() {
     return {
       detail: {},
       recordData: {
         createTime: 0,
-        year: 0,
-      },
-    };
+        year: 0
+      }
+    }
   },
   computed: {
-    ...mapState({ nickName: (state) => state.user.nickName }),
+    ...mapState({ nickName: (state) => state.user.nickName })
   },
   watch: {
     $route: {
       immediate: true,
       handler(val) {
-        this.recordData = val.params.data;
-        if (this.recordData.hasOwnProperty("createTime")) {
-          this.recordData["year"] = this.getYear(this.recordData.createTime);
+        this.recordData = val.params.data
+        if (this.recordData['createTime']) {
+          this.recordData['year'] = this.getYear(this.recordData.createTime)
         }
-        const detail = val.params.data.detail;
-        this.detail = JSON.parse(detail);
-        console.log(this.recordData);
-        console.log(this.detail);
-      },
-    },
+        const detail = val.params.data.detail
+        this.detail = JSON.parse(detail)
+        console.log(this.recordData)
+        console.log(this.detail)
+      }
+    }
   },
   methods: {
     goVolunteerList() {
-      this.$router.push({ name: "VolunteerList" });
+      this.$router.push({ name: 'VolunteerList' })
     },
     getYear(currentDate) {
-      let date = new Date(Date.parse(currentDate));
-      return date.getFullYear();
+      const date = new Date(Date.parse(currentDate))
+      return date.getFullYear()
     },
     getTableData(data) {
-      let list = data.wishes;
-      let len = list.length;
+      const list = data.wishes
+      const len = list.length
       for (let i = 0; i < len; i++) {
-        list[i]["volunteer"] = i + 1 + "志愿";
-        let sLen = data["scores"].length;
-        list[i]["info"] =""
+        list[i]['volunteer'] = i + 1 + '志愿'
+        const sLen = data['scores'].length
+        list[i]['info'] = ''
         for (let y = 0; y < sLen; y++) {
-          list[i]["info"] += data["scores"][y];
+          list[i]['info'] += data['scores'][y]
         }
       }
-      console.log(list);
-      return list;
+      console.log(list)
+      return list
     },
     // 点击导出word
-    exportWord: function () {
-      let that = this;
+    exportWord: function() {
+      const that = this
       // 读取并获得模板文件的二进制内容
-      JSZipUtils.getBinaryContent("/template.docx", (error, content) => {
-        //template.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
+      JSZipUtils.getBinaryContent('/template.docx', (error, content) => {
+        // template.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
         // 抛出异常
         if (error) {
-          throw error;
+          throw error
         }
         // 创建一个PizZip实例，内容为模板的内容
-        let zip = new PizZip(content);
+        const zip = new PizZip(content)
         // 创建并加载docxtemplater实例对象
-        let doc = new docxtemplater().loadZip(zip);
+        const doc = new Docxtemplater().loadZip(zip)
         // 设置模板变量的值
         doc.setData({
           time: that.recordData.createTime,
@@ -129,36 +129,36 @@ export default {
           nickName: that.nickName,
           score: that.detail.score,
           mode: that.detail.mode,
-          table: that.getTableData(that.detail.batch),
-        });
+          table: that.getTableData(that.detail.batch)
+        })
 
         try {
           // 用模板变量的值替换所有模板变量
-          doc.render();
+          doc.render()
         } catch (error) {
           // 抛出异常
-          let e = {
+          const e = {
             message: error.message,
             name: error.name,
             stack: error.stack,
-            properties: error.properties,
-          };
-          console.log(JSON.stringify({ error: e }));
-          throw error;
+            properties: error.properties
+          }
+          console.log(JSON.stringify({ error: e }))
+          throw error
         }
 
         // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
-        let out = doc.getZip().generate({
-          type: "blob",
+        const out = doc.getZip().generate({
+          type: 'blob',
           mimeType:
-            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-        });
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+        })
         // 将目标文件对象保存为目标类型的文件，并命名
-        saveAs(out,that.recordData.year+ that.recordData.batchName+"志愿智能模拟");
-      });
-    },
-  },
-};
+        saveAs(out, that.recordData.year + that.recordData.batchName + '志愿智能模拟')
+      })
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">

src/views/career/components/SelectUniversity.vue

@@ -1,26 +1,35 @@
 <template>
-  <div class="selectUniversity" id="selectUniversity" ref="selectUniversity">
+  <div id="selectUniversity" ref="selectUniversity" class="selectUniversity">
     <div>
-      <mx-search-group class="mb10" justify="space-between" :span="10" v-model="collegeName" placeholder="请输入院校名称"
-                       @search="clickSuffix"
+      <mx-search-group
+        v-model="collegeName"
+        class="mb10"
+        justify="space-between"
+        :span="10"
+        placeholder="请输入院校名称"
+        @search="clickSuffix"
       >
         <h1 class="title">选择院校</h1>
       </mx-search-group>
-      <filter-form :filter="filter_form"></filter-form>
+      <filter-form :filter="filter_form" />
     </div>
 
     <div style="margin-top: 20px;">
       <div>
         <el-row :gutter="20">
-          <el-col :span="6" v-for="item in tableData" :key="item.id">
-            <div @click="changeUniversity(item)" class="universityList">{{ item.name }}</div>
+          <el-col v-for="item in tableData" :key="item.id" :span="6">
+            <div class="universityList" @click="changeUniversity(item)">{{ item.name }}</div>
           </el-col>
         </el-row>
       </div>
-      <pagination class="mt10" :total="total" :autoScroll="false" @pagination="getUniversityList"
-                  :page.sync="pageForm.pageNum"
-                  :limit.sync="pageForm.pageSize"
-      ></pagination>
+      <pagination
+        class="mt10"
+        :total="total"
+        :auto-scroll="false"
+        :page.sync="pageForm.pageNum"
+        :limit.sync="pageForm.pageSize"
+        @pagination="getUniversityList"
+      />
     </div>
   </div>
 </template>
@@ -33,22 +42,22 @@ import { selectUniversityList } from '@/api/webApi/career-course'
 
 export default {
   name: 'SelectUniversity',
-  components: { MxSearchGroup,FilterForm },
+  components: { MxSearchGroup, FilterForm },
   data() {
     return {
       pageForm: {
         pageSize: 20,
-        pageNum: 1,
+        pageNum: 1
       },
-      collegeName:'',
+      collegeName: '',
       total: 0,
-      filter_form:{
-        location:'',
-        natureTypeCN:'',
-        type:'',
-        level:'',
-        features:'',
-        name:''
+      filter_form: {
+        location: '',
+        natureTypeCN: '',
+        type: '',
+        level: '',
+        features: '',
+        name: ''
       },
       tableData: []
     }
@@ -57,17 +66,9 @@ export default {
     ...mapState({ theme: (state) => state.settings.theme })
   },
   watch: {
-    theme: {
+    filter_form: {
       immediate: true,
-      handler(val) {
-        this.$nextTick(() => {
-          this.$refs.selectUniversity.style.setProperty('--themeColor', val)
-        })
-      }
-    },
-    filter_form:{
-      immediate: true,
-      deep:true,
+      deep: true,
       handler(val) {
         this.getUniversityList()
       }
@@ -78,19 +79,21 @@ export default {
       this.$emit('changeUniversity', data)
     },
     getUniversityList() {
-      selectUniversityList({ ...this.pageForm,...this.filter_form }).then(res => {
+      selectUniversityList({ ...this.pageForm, ...this.filter_form }).then(res => {
         this.tableData = res.rows
         this.total = res.total
       })
     },
     clickSuffix() {
       this.filter_form.name = this.collegeName
-    },
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
+@import "@/assets/styles/variables.scss";
+
 #selectUniversity {
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
@@ -112,10 +115,18 @@ export default {
   }
 
   .universityList {
-    background-color: var(--themeColor);
+    background-color: #F2F2F2;
+    border-radius: 8px;
+    box-shadow: 0px 2px 5px 0px rgba($--color-primary, 0.1);
     line-height: 60px;
     margin-bottom: 10px;
     text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      background-color: mix($--color-primary, #F2F2F2, 50%);
+      color: $--color-text-primary;
+    }
   }
 }
 

src/views/career/components/SimulateNotice.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="notice">
-<!--    <div style="text-align: center">-->
-<!--      <h2 style="font-size: 2em; font-weight: 400" :style="{ color: theme }">-->
-<!--        （一）高考志愿模拟填报须知-->
-<!--      </h2>-->
-<!--    </div>-->
+    <!--    <div style="text-align: center">-->
+    <!--      <h2 style="font-size: 2em; font-weight: 400" :style="{ color: theme }">-->
+    <!--        （一）高考志愿模拟填报须知-->
+    <!--      </h2>-->
+    <!--    </div>-->
     <p>填报须知</p>
     <div class="mt20">
       <ul>
@@ -24,13 +24,13 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from 'vuex'
 export default {
-  name: "SimulateNotice",
+  name: 'SimulateNotice',
   computed: {
-    ...mapState({ theme: (state) => state.settings.theme }),
-  },
-};
+    ...mapState({ theme: (state) => state.settings.theme })
+  }
+}
 </script>
 
 <style scoped lang="scss">

src/views/career/components/UniversitiesLine.vue

@@ -1,10 +1,21 @@
 <template>
   <div>
     <div style="background-color: #ffffff;font-size: 14px;padding:5px;">
-      <mx-condition :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
-                    tiny-margin-bottom @invalid="handleInvalidQuery" label-width="80px" />
-      <mx-search-group class="mb10" justify="space-between" :span="6" v-model="queryParams.univerName"
-                       placeholder="请输入名称" @search="handleQuery">
+      <mx-condition
+        :query-params="queryParams"
+        :require-fields="requireFields"
+        label-width="80px"
+        @query="handleQuery"
+      />
+      <mx-search-group
+        v-if="!universityCode"
+        v-model="queryParams.univerName"
+        class="mb10"
+        justify="space-between"
+        :span="6"
+        placeholder="请输入名称"
+        @search="handleQuery"
+      >
         <el-col :span="12">
           <el-alert v-if="isThreeFormSix" style="font-size: 16px;" type="warning" :closable="false" show-icon>
             新高考改革后，本省采用“院校专业”的志愿填报方式，自改革年份起的数据，请查询专业投档线。
@@ -12,9 +23,16 @@
         </el-col>
       </mx-search-group>
       <!-- 表格数据 -->
-      <universities-line-table :tableList="tableList"></universities-line-table>
-      <pagination class="mt10" :total="total" :autoScroll="false" @pagination="getUniversityList"
-                  :page.sync="pageForm.pageNum" :limit.sync="pageForm.pageSize"></pagination>
+      <universities-line-table :year="queryParams.lineYear" :table-list="tableList" :disabled-name-link="disabledNameLink" />
+      <vip-guide-more v-if="!isBind&&total>1" />
+      <pagination
+        class="mt10"
+        :total="total"
+        :auto-scroll="false"
+        :page.sync="pageForm.pageNum"
+        :limit.sync="pageForm.pageSize"
+        @pagination="getUniversityList"
+      />
     </div>
   </div>
 </template>
@@ -24,22 +42,31 @@ import { selectUniversityList } from '@/api/webApi/shiftLine'
 import UniversitiesLineTable from '@/views/career/components/UniversitiesLineTable'
 import MxSearchGroup from '@/components/MxSearch/mx-search-group'
 import MxCondition from '@/components/MxCondition/mx-condition'
-import MxConst from '@/common/mx-const'
+import MxConst from '@/common/MxConst'
 import { mapGetters } from 'vuex'
+import VipGuideMore from '@/components/VipGuideMore/index'
 
 export default {
   name: 'UniversitiesLine',
-  components: { UniversitiesLineTable, MxSearchGroup, MxCondition },
+  components: { VipGuideMore, UniversitiesLineTable, MxSearchGroup, MxCondition },
+  props: {
+    universityCode: {
+      type: String,
+      default: ''
+    },
+    disabledNameLink: {
+      type: Boolean,
+      default: false
+    },
+    disabledLevel: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
-      requireFields: ['lineYear'],
-      queryParams: {
-        lineYear: '',
-        lineLevel: '',
-        lineType: '',
-        lineLocation: '',
-        univerName: ''
-      },
+      requireFields: [],
+      queryParams: {},
       tableLoading: false,
       total: 0,
       tableList: [],
@@ -49,22 +76,33 @@ export default {
       }
     }
   },
-  created() {
-    // this.queryParams.lineLocation = this.currentUser.provinceName
-  },
   computed: {
-    ...mapGetters(['currentUser']),
+    ...mapGetters(['currentUser', 'isBind']),
     isThreeFormSix() {
       return Object.keys(MxConst.enum.gkSelectType).find(item => this.currentUser.newgaokaoType == MxConst.enum.gkSelectType[item]) == 'threeFormSix'
     }
   },
+  mounted() {
+    const params = this.universityCode
+      ? {
+        lineYear: '',
+        lineLevel: '',
+        lineType: '',
+        univerName: ''
+      } : {
+        lineYear: '',
+        lineLevel: '',
+        lineType: '',
+        lineLocation: '',
+        univerName: ''
+      }
+    if (this.disabledLevel) delete params.lineLevel
+    this.queryParams = params
+  },
   methods: {
     handleQuery() {
       this.pageForm.pageNum = 1
       this.getUniversityList()
-    },
-    handleInvalidQuery() {
-
     },
     async getUniversityList() {
       this.tableLoading = true
@@ -74,6 +112,7 @@ export default {
         type: this.queryParams.lineType,
         location: this.queryParams.lineLocation,
         univerName: this.queryParams.univerName,
+        code: this.universityCode,
         ...this.pageForm
       }).then(res => {
         this.tableList = res.rows

src/views/career/components/UniversitiesLineTable.vue

@@ -1,73 +1,97 @@
 <template>
-  <div id="lineTable" >
-    <mx-table :prop-defines="propsDefine" :rows="tableList" border>
+  <div id="lineTable">
+    <dynamic-table :columns="columns" :rows="tableList" border>
       <template #temp="{row}">
-        <el-link  :underline="false" @click="toDetail(row)">
-          {{row.collegeCode}}  {{row.universityName}}
+        <div v-if="disabledNameLink">{{ row.collegeCode }} {{ row.universityName }}</div>
+        <el-link v-else :underline="false" @click="toDetail(row)">
+          {{ row.collegeCode }} {{ row.universityName }}
         </el-link>
-        <p v-if="row.collegeRemark">{{`(${row.collegeRemark})` }}</p>
+        <div v-if="row.collegeRemark" class="f-primary">{{ `(${row.collegeRemark})` }}</div>
       </template>
       <template #numReal="{row}">
-         <p>{{row.numReal || '-'}}</p>
+        <p>{{ row.numReal || '-' }}</p>
       </template>
-    </mx-table>
+    </dynamic-table>
   </div>
 </template>
 <script>
-import MxSearchGroup from '@/components/MxSearch/mx-search-group'
 import transferMixin from '@/components/mx-transfer-mixin'
+import GlobalVoluntaryDataMixin from '@/views/career/GlobalVoluntaryDataMixin'
+import DynamicTable from '@/components/dynamic-table/index.vue'
 
 export default {
   name: 'UniversitiesLineTable',
-  components: {
-    MxSearchGroup
-  },
-  mixins:[transferMixin],
+  components: { DynamicTable },
+  mixins: [transferMixin, GlobalVoluntaryDataMixin],
   props: {
+    year: {
+      type: String | Number,
+      default: ''
+    },
     tableList: {
       type: Array,
       default() {
         return []
       }
+    },
+    disabledNameLink: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
-      propsDefine:{
-        code:{
-          label:'院校',
-          slot:'temp',
-          width:'200'
-        },
-        location:{
-          label:'所在地'
-        },
-        year:{
-          label:'年份'
-        },
-        batchName:{
-          label:'批次/段'
-        },
-        course:{
-          label:'选考要求'
-        },
-        score:{
-          label:'投档分'
-        },
-        seat:{
-          label:'投档分位次'
-        },
-        numReal:{
-          label:'录取数',
-          slot:'numReal'
-        }
-      },
     }
   },
-  methods:{
+  computed: {
+    columns() {
+      return [{
+        prop: 'code',
+        label: '院校',
+        slotBody: 'temp',
+        width: '200'
+      }, {
+        prop: 'location',
+        label: '所在地'
+      }, {
+        prop: 'year',
+        label: '年份'
+      }, {
+        prop: 'type',
+        label: '科类',
+        hidden: this.isNewGaokao
+      }, {
+        prop: 'batchName',
+        label: '批次/段'
+      }, {
+        prop: 'course',
+        label: '选考要求',
+        hidden: !this.isNewGaokao
+      }, {
+        prop: 'score',
+        label: '投档分'
+      }, {
+        prop: 'seat',
+        label: '投档分位次'
+      }, {
+        prop: 'numReal',
+        label: '录取数',
+        slotBody: 'numReal'
+      }]
+    }
+  },
+  watch: {
+    year() {
+      if (this.year) {
+        this.ensureVoluntaryData({ year: this.year })
+      }
+    }
+  },
+  methods: {
     toDetail(item) {
-      this.transferTo('/career/plan/UniversityDetail',{code:item.universityCode})
-    },
+      if (this.disabledNameLink) return
+      this.transferTo('/career/plan/UniversityDetail', { code: item.universityCode })
+    }
   }
 }
 </script>

src/views/career/components/UniversitiesTable.vue

@@ -3,112 +3,111 @@
     <el-table :data="tableData" script>
       <el-table-column prop="code" label="院校代码" align="center">
         <template slot-scope="scope">
-          <el-link :underline="false" @click="goDetails(scope.row.id)">【{{scope.row.code}}】</el-link>
+          <el-link :underline="false" @click="goDetails(scope.row.id)">【{{ scope.row.code }}】</el-link>
         </template>
       </el-table-column>
       <el-table-column prop="name" label="院校名称" align="center">
         <template slot-scope="scope">
-          <el-link :underline="false" @click="goDetails(scope.row.id)">{{scope.row.name}}</el-link>
+          <el-link :underline="false" @click="goDetails(scope.row.id)">{{ scope.row.name }}</el-link>
         </template>
       </el-table-column>
-      <el-table-column prop="location" label="所在地" width="70" align="center"></el-table-column>
-      <el-table-column prop="managerType" label="主管部门" align="center"></el-table-column>
-      <el-table-column prop="type" label="院校类型" align="center"></el-table-column>
-      <el-table-column prop="level" label="学历层次" align="center"></el-table-column>
+      <el-table-column prop="location" label="所在地" width="70" align="center" />
+      <el-table-column prop="managerType" label="主管部门" align="center" />
+      <el-table-column prop="type" label="院校类型" align="center" />
+      <el-table-column prop="level" label="学历层次" align="center" />
       <!--sortable  排序-->
-      <el-table-column label="一流大学建设高校" align="center"  width="100">
+      <el-table-column label="一流大学建设高校" align="center" width="100">
         <template slot-scope="scope">
-          <el-image v-if="scope.row.ylxx===2" :src="require('@/assets/images/career/icon_duigou.png')"></el-image>
+          <el-image v-if="scope.row.ylxx===2" :src="require('@/assets/images/career/icon_duigou.png')" />
         </template>
       </el-table-column>
-      <el-table-column label="一流学科建设高校" align="center"  width="100">
+      <el-table-column label="一流学科建设高校" align="center" width="100">
         <template slot-scope="scope">
-          <el-image v-if="scope.row.ylxk===2" :src="require('@/assets/images/career/icon_duigou.png')"></el-image>
+          <el-image v-if="scope.row.ylxk===2" :src="require('@/assets/images/career/icon_duigou.png')" />
         </template>
       </el-table-column>
-      <el-table-column label="研究生院" align="center" >
+      <el-table-column label="研究生院" align="center">
         <template slot-scope="scope">
-          <el-image v-if="scope.row.yjsy===2" :src="require('@/assets/images/career/icon_duigou.png')"></el-image>
+          <el-image v-if="scope.row.yjsy===2" :src="require('@/assets/images/career/icon_duigou.png')" />
         </template>
       </el-table-column>
     </el-table>
     <el-pagination
       style="margin-top:10px;"
       :page-sizes="[10,20,30,40,50,60,70,80,90,100]"
-      :page-size=tableParams.limit
+      :page-size="tableParams.limit"
       layout="prev,pager,next,jumper,total,sizes"
       :total="tableParams.examRecordTotal"
       @current-change="currentChange"
-     @size-change="sizeChange"
-    >
-    </el-pagination>
+      @size-change="sizeChange"
+    />
   </div>
 </template>
 
 <script>
-  import { selectUniversityList} from '@/api/webApi/career-course'
-    export default {
-      name: "UniversitiesTable",
-      props:{
-        filterForm:{type:Object,default(){return {}}}
+import { selectUniversityList } from '@/api/webApi/career-course'
+export default {
+  name: 'UniversitiesTable',
+  props: {
+    filterForm: { type: Object, default() { return {} } }
+  },
+  data() {
+    return {
+      tableParams: {
+        examRecordTotal: 0,
+        pageSize: 1,
+        limit: 20
       },
-      data(){
-        return {
-          tableParams:{
-            examRecordTotal:0,
-            pageSize:1,
-            limit:20
-          },
-          tableData:[]
-        }
-      },
-      watch:{
-        filterForm:{
-          immediate:true,
-          deep:true,
-          handler(val){
-            this.getUniversityList()
-          }
-        }
-      },
-      methods:{
-        goDetails(id){
-          this.$router.push({ path: '/career/components/UniversityDetail', query: { id: id } })
-        },
-        sizeChange(e){
-          //每页条数
-          this.tableParams.limit=e
-          this.getUniversityList()
-        },
-        currentChange(e){
-          //页数
-          this.tableParams.pageSize=e
-          this.getUniversityList()
-        },
-        getUniversityList(){
-          // console.log(params)
-          selectUniversityList({ ...this.filterForm,
-            pageNum:this.tableParams.pageSize,
-            pageSize:this.tableParams.limit,
-          }).then(res=>{
-            this.tableData=res.rows
-            this.tableParams.examRecordTotal=res.total
-          })
-        },
-        getUniverCharact(type){  //判断学院特性
-          let result='';  //1-->否  2-->是
-          const flag=this.universityParams.checkList.some(item=>{
-            return item===type
-          });
-          if(flag){
-            result=2
-          }else{
-            result=''
-          }
-          return result
-        }
+      tableData: []
+    }
+  },
+  watch: {
+    filterForm: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        this.getUniversityList()
       }
     }
+  },
+  methods: {
+    goDetails(id) {
+      this.$router.push({ path: '/career/components/UniversityDetail', query: { id: id }})
+    },
+    sizeChange(e) {
+      // 每页条数
+      this.tableParams.limit = e
+      this.getUniversityList()
+    },
+    currentChange(e) {
+      // 页数
+      this.tableParams.pageSize = e
+      this.getUniversityList()
+    },
+    getUniversityList() {
+      // console.log(params)
+      selectUniversityList({ ...this.filterForm,
+        pageNum: this.tableParams.pageSize,
+        pageSize: this.tableParams.limit
+      }).then(res => {
+        this.tableData = res.rows
+        this.tableParams.examRecordTotal = res.total
+      })
+    },
+    getUniverCharact(type) { // 判断学院特性
+      let result = '' // 1-->否  2-->是
+      const flag = this.universityParams.checkList.some(item => {
+        return item === type
+      })
+      if (flag) {
+        result = 2
+      } else {
+        result = ''
+      }
+      return result
+    }
+  }
+}
 </script>
 
 <style lang="scss">

src/views/career/components/UniversityDetail.vue

@@ -1,181 +1,175 @@
 <template>
-    <div ref="universityDetail" id="universityDetail" style="padding:24px 8%;background-color:#f7f7f7;">
-      <el-card style="color: #5E5E5E;" ref="navBar">
-        <el-breadcrumb separator-class="el-icon-arrow-right">
-          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-          <el-breadcrumb-item :to="{ name: 'LibraryCollege'}">校园库</el-breadcrumb-item>
-          <el-breadcrumb-item>校院详情</el-breadcrumb-item>
-        </el-breadcrumb>
-      </el-card>
-      <el-row ref="header" style="margin-top: 10px;background-color: #F0F3FC;height:260px;" v-if="universityDetails.baseInfo">
-        <el-col :span="5"  class="headerImg">
-            <el-image class="img" :src="universityDetails.baseInfo.logo" style="text-align: center">
-              <h1 slot="error">{{universityDetails.baseInfo.name}}</h1>
-            </el-image>
-        </el-col>
-        <el-col :span="19">
-          <el-row style="padding:20px 0 30px 30px;">
-            <el-col :span="20">
-              <div class="baseInfo">
-                <span>院校属性：</span>
-                <p></p>
-              </div>
-              <div class="baseInfo">
-                <span>网址：</span>
-                <el-link :underline="false" style="color:#1154FF">{{universityDetails.baseInfo.url}}</el-link>
-              </div>
-              <div class="baseInfo">
-                <span>电话：</span>
-                <span :underline="false">
-                  {{universityDetails.baseInfo.tel}}
-                </span>
-              </div>
-              <div class="baseInfo">
-                <span>院校隶属：</span>
-                <span :underline="false">
-                  {{universityDetails.baseInfo.managerType}}
-                </span>
-              </div>
-              <div class="baseInfo">
-                <span>所在地：</span>
-                <span :underline="false">
-                  {{universityDetails.baseInfo.location}}
-                </span>
-              </div>
-              <div class="baseInfo">
-                <span>院校类型：</span>
-                <span :underline="false">
-                  {{universityDetails.baseInfo.type}}
-                </span>
-              </div>
-            </el-col>
-            <el-col :span="4" style="text-align: right;">
-              <div class="headerText">NO:{{universityDetails.baseInfo.code}}</div>
-            </el-col>
-          </el-row>
-        </el-col>
-      </el-row>
-      <el-row style="padding:20px 0px;" v-if="universityDetails.overview">
-        <el-col :span="5" class="detailNaver">
-          <div >院校概况</div>
-          <div >院系设置</div>
-          <div >招生简章</div>
-          <div >录取分数线</div>
-          <div >招生计划</div>
-          <div >VR校园</div>
-          <div @click="activeSelectNaver('1')" :class="{'activeNaver':selectNaver==='1','noActiveNaver':selectNaver==='2' || selectNaver==='3' }">学校状况</div>
-          <div @click="activeSelectNaver('2')" :class="{'activeNaver':selectNaver==='2','noActiveNaver':selectNaver==='1' || selectNaver==='3' }">招生简章</div>
-          <div @click="activeSelectNaver('3')" :class="{'activeNaver':selectNaver==='3','noActiveNaver':selectNaver==='2' || selectNaver==='1' }">开设专业</div>
-        </el-col>
-        <el-col :span="19" style="padding:0px 20px;">
+  <div id="universityDetail" ref="universityDetail" style="padding:24px 8%;background-color:#f7f7f7;">
+    <el-card ref="navBar" style="color: #5E5E5E;">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/career/plan/UniversitiesColleges'}">校园库</el-breadcrumb-item>
+        <el-breadcrumb-item>校院详情</el-breadcrumb-item>
+      </el-breadcrumb>
+    </el-card>
+    <el-row v-if="universityDetails.baseInfo" ref="header" style="margin-top: 10px;background-color: #F0F3FC;height:260px;">
+      <el-col :span="5" class="headerImg">
+        <el-image class="img" :src="universityDetails.baseInfo.logo" style="text-align: center">
+          <h1 slot="error">{{ universityDetails.baseInfo.name }}</h1>
+        </el-image>
+      </el-col>
+      <el-col :span="19">
+        <el-row style="padding:20px 0 30px 30px;">
+          <el-col :span="20">
+            <div class="baseInfo">
+              <span>院校属性：</span>
+              <p />
+            </div>
+            <div class="baseInfo">
+              <span>网址：</span>
+              <el-link :underline="false" style="color:#1154FF">{{ universityDetails.baseInfo.url }}</el-link>
+            </div>
+            <div class="baseInfo">
+              <span>电话：</span>
+              <span :underline="false">
+                {{ universityDetails.baseInfo.tel }}
+              </span>
+            </div>
+            <div class="baseInfo">
+              <span>院校隶属：</span>
+              <span :underline="false">
+                {{ universityDetails.baseInfo.managerType }}
+              </span>
+            </div>
+            <div class="baseInfo">
+              <span>所在地：</span>
+              <span :underline="false">
+                {{ universityDetails.baseInfo.location }}
+              </span>
+            </div>
+            <div class="baseInfo">
+              <span>院校类型：</span>
+              <span :underline="false">
+                {{ universityDetails.baseInfo.type }}
+              </span>
+            </div>
+          </el-col>
+          <el-col :span="4" style="text-align: right;">
+            <div class="headerText">NO:{{ universityDetails.baseInfo.code }}</div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row v-if="universityDetails.overview" style="padding:20px 0px;">
+      <el-col :span="5" class="detailNaver">
+        <div>院校概况</div>
+        <div>院系设置</div>
+        <div>招生简章</div>
+        <div>录取分数线</div>
+        <div>招生计划</div>
+        <div>VR校园</div>
+        <div :class="{'activeNaver':selectNaver==='1','noActiveNaver':selectNaver==='2' || selectNaver==='3' }" @click="activeSelectNaver('1')">学校状况</div>
+        <div :class="{'activeNaver':selectNaver==='2','noActiveNaver':selectNaver==='1' || selectNaver==='3' }" @click="activeSelectNaver('2')">招生简章</div>
+        <div :class="{'activeNaver':selectNaver==='3','noActiveNaver':selectNaver==='2' || selectNaver==='1' }" @click="activeSelectNaver('3')">开设专业</div>
+      </el-col>
+      <el-col :span="19" style="padding:0px 20px;">
         <div ref="a1" style="background-color: #ffffff;padding:20px 20px 0px 0px;">
-         <div style="display: flex;justify-content: space-between">
-           <span :style="{'color':theme}" style="background-color:#F0F3FC;font-size:16px;font-weight:bold;padding:10px 100px 10px 50px;display:inline-block;clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);">学校概况</span>
-           <span :style="{'color':theme}" style="font-size:36px;color:#FCE1B0;">SCHOOL SURVEY</span>
-         </div>
+          <div style="display: flex;justify-content: space-between">
+            <span :style="{'color':theme}" style="background-color:#F0F3FC;font-size:16px;font-weight:bold;padding:10px 100px 10px 50px;display:inline-block;clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);">学校概况</span>
+            <span :style="{'color':theme}" style="font-size:36px;color:#FCE1B0;">SCHOOL SURVEY</span>
+          </div>
           <!--第一个内容区域-->
           <div style="padding:30px;">
-            <div v-html="universityDetails.overview"></div>
+            <div v-html="universityDetails.overview" />
           </div>
         </div>
-          <!--第二个内容区域-->
-          <div ref="a2" style="background-color: #ffffff;padding:20px 20px 0px 0px;margin-top: 30px;">
-            <div style="display: flex;justify-content: space-between">
-              <span :style="{'color':theme}" style="background-color:#F0F3FC;font-size:16px;font-weight:bold;padding:10px 100px 10px 50px;display:inline-block;clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);">招生简章</span>
-              <span :style="{'color':theme}" style="font-size:36px;color:#FCE1B0;">GENERAL RULES</span>
-            </div>
-            <div style="padding:30px;">
-              <div class="generalTitle" v-for="(item,index) in universityDetails.zsjzs" :key="item.title">
-                <p :style="{'color':activeGeneralTitle===index?theme:'#000'}" @click="activeGeneralTitle=index" >·{{item.title}}</p>
-              </div>
-              <div style="margin-top:50px;" v-html="universityDetails.zsjzs[activeGeneralTitle].remark"></div>
-            </div>
+        <!--第二个内容区域-->
+        <div ref="a2" style="background-color: #ffffff;padding:20px 20px 0px 0px;margin-top: 30px;">
+          <div style="display: flex;justify-content: space-between">
+            <span :style="{'color':theme}" style="background-color:#F0F3FC;font-size:16px;font-weight:bold;padding:10px 100px 10px 50px;display:inline-block;clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);">招生简章</span>
+            <span :style="{'color':theme}" style="font-size:36px;color:#FCE1B0;">GENERAL RULES</span>
           </div>
-          <!--第三个内容区域-->
-          <div ref="a3" style="background-color: #ffffff;padding:20px 20px 0px 0px;margin-top: 30px;">
-            <div style="display: flex;justify-content: space-between">
-              <span :style="{'color':theme}" style="background-color:#F0F3FC;font-size:16px;font-weight:bold;padding:10px 100px 10px 50px;display:inline-block;clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);">开设专业</span>
-              <span :style="{'color':theme}" style="font-size:36px;color:#FCE1B0;">MARJOR</span>
-            </div>
-            <div style="padding:30px;">
-              <el-row :gutter="30" style="font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;">
-                <el-col :span="12" v-for="(item,index) in universityDetails.marjors" :key="item.name+index">
-                  <div style="padding: 8px;">
-                    <h5 style="margin:0 0 8px">{{item.name}}（{{item.children.length}}个）</h5>
-                    <span style="padding:4px;display: inline-block" v-for="val in item.children" :key="val">{{val}}</span>
-                  </div>
-                </el-col>
-              </el-row>
+          <div style="padding:30px;">
+            <div v-for="(item,index) in universityDetails.zsjzs" :key="item.title" class="generalTitle">
+              <p :style="{'color':activeGeneralTitle===index?theme:'#000'}" @click="activeGeneralTitle=index">·{{ item.title }}</p>
             </div>
+            <div style="margin-top:50px;" v-html="universityDetails.zsjzs[activeGeneralTitle].remark" />
+          </div>
+        </div>
+        <!--第三个内容区域-->
+        <div ref="a3" style="background-color: #ffffff;padding:20px 20px 0px 0px;margin-top: 30px;">
+          <div style="display: flex;justify-content: space-between">
+            <span :style="{'color':theme}" style="background-color:#F0F3FC;font-size:16px;font-weight:bold;padding:10px 100px 10px 50px;display:inline-block;clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);">开设专业</span>
+            <span :style="{'color':theme}" style="font-size:36px;color:#FCE1B0;">MARJOR</span>
+          </div>
+          <div style="padding:30px;">
+            <el-row
+              :gutter="30"
+              style="font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;"
+            >
+              <el-col v-for="(item,index) in universityDetails.marjors" :key="item.name+index" :span="12">
+                <div style="padding: 8px;">
+                  <h5 style="margin:0 0 8px">{{ item.name }}（{{ item.children.length }}个）</h5>
+                  <span v-for="val in item.children" :key="val" style="padding:4px;display: inline-block">{{ val }}</span>
+                </div>
+              </el-col>
+            </el-row>
           </div>
-        </el-col>
-      </el-row>
-    </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
-  import {mapState} from 'vuex';
-  import {selectUniversityDetail} from '@/api/webApi/career-course'
-    export default {
-      name: "UniversityDetail",
-      data(){
-        return {
-          universityId:'',
-          universityDetails:{},
-          selectNaver:'1',
-          activeGeneralTitle:0
-        }
-      },
-      computed:{
-        ...mapState({theme: state => state.settings.theme}),
-      },
-       watch:{
-         theme:{
-           immediate:true,
-           handler(val){
-             this.$nextTick(()=>{
-               this.$refs.universityDetail.style.setProperty('--themeColor', val)
-             })
-           }
-         },
-       '$route':{
-         immediate:true,
-         handler(val){
-           this.universityId= val.query.id
-           this.getUniversityDetail()
-         }
-       }
-     },
-      methods:{
-        activeSelectNaver(type){
-          this.selectNaver=type
-          const navBarHeight=this.$refs.navBar.$el.offsetHeight
-          const headerHeight=this.$refs.header.$el.offsetHeight
-          const a1Height=this.$refs.a1.offsetHeight
-          const a2Height=this.$refs.a2.offsetHeight
-          const a3Height=this.$refs.a3.offsetHeight
-          if(type==='1'){
-            document.documentElement.scrollTop=navBarHeight+headerHeight+50
-          }else if(type==='2'){
-            document.documentElement.scrollTop=navBarHeight+headerHeight+a1Height+50+20
-          }else if(type==='3'){
-            document.documentElement.scrollTop=navBarHeight+headerHeight+a1Height+a2Height+50+20+20
-          }
-        },
-        getUniversityDetail(){
-          if(this.universityId){
-            const params={
-              universityId:this.universityId
-            }
-            selectUniversityDetail(params).then(res=>{
-              this.universityDetails=res.data
-            })
-          }
-
+import { mapState } from 'vuex'
+import { selectUniversityDetail } from '@/api/webApi/career-course'
+export default {
+  name: 'UniversityDetail',
+  data() {
+    return {
+      universityId: '',
+      universityDetails: {},
+      selectNaver: '1',
+      activeGeneralTitle: 0
+    }
+  },
+  computed: {
+    ...mapState({ theme: state => state.settings.theme })
+  },
+  watch: {
+    '$route': {
+      immediate: true,
+      handler(val) {
+        this.universityId = val.query.id
+        this.getUniversityDetail()
+      }
+    }
+  },
+  methods: {
+    activeSelectNaver(type) {
+      this.selectNaver = type
+      const navBarHeight = this.$refs.navBar.$el.offsetHeight
+      const headerHeight = this.$refs.header.$el.offsetHeight
+      const a1Height = this.$refs.a1.offsetHeight
+      const a2Height = this.$refs.a2.offsetHeight
+      // const a3Height = this.$refs.a3.offsetHeight
+      if (type === '1') {
+        document.documentElement.scrollTop = navBarHeight + headerHeight + 50
+      } else if (type === '2') {
+        document.documentElement.scrollTop = navBarHeight + headerHeight + a1Height + 50 + 20
+      } else if (type === '3') {
+        document.documentElement.scrollTop = navBarHeight + headerHeight + a1Height + a2Height + 50 + 20 + 20
+      }
+    },
+    getUniversityDetail() {
+      if (this.universityId) {
+        const params = {
+          universityId: this.universityId
         }
+        selectUniversityDetail(params).then(res => {
+          this.universityDetails = res.data
+        })
       }
     }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -240,5 +234,4 @@
     border-top: 4px solid var(--themeColor);
   }
 
-
 </style>

src/views/career/components/ZhiYuanHeader.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="navigation_top w1200">
-      <el-image
+    <el-image
       class="xuanke_bk"
       :src="require('@/assets/images/career/nav-simulation.png')"
     />
-    <p>{{msg}}</p>
+    <p>{{ msg }}</p>
   </div>
 </template>
 <script>
@@ -12,10 +12,10 @@ export default {
   props: {
     msg: {
       type: String,
-      default: "依据历年院校录取数据提供高考志愿智能模拟功能。",
+      default: '依据历年院校录取数据提供高考志愿智能模拟功能。'
     }
-  },
-};
+  }
+}
 </script>
 <style lang="scss" scoped>
 .navigation_top {
@@ -37,4 +37,4 @@ export default {
   left: -7px;
   top: 0;
 }
-</style>
+</style>

src/views/career/components/careerTestReport.vue

@@ -2,53 +2,63 @@
   <div>
     <!-- banner -->
     <div class="banner">
-      <img style="width: 100%" src="@/assets/images/career/banner.png" alt="" />
+      <img style="width: 100%" src="@/assets/images/career/banner.png" alt="">
       <p>生涯测评报告</p>
     </div>
 
-    <el-card>
+    <el-card shadow="never" class="mt20">
       <!-- 专业兴趣测评（HOLLAND） -->
       <div>
         <div style="padding: 24px 0; color: #ffa400">
           专业兴趣测评（HOLLAND）
         </div>
-        <mx-table :rows="hollData" :propDefines="propDefines">
+        <mx-table :rows="hollData" :prop-defines="propDefines">
           <template #time="{ value }">
             {{ value.split(" ")[0] }}
           </template>
-          <template #nav="{ row, value }">
+          <template #nav="{ row }">
             <el-link type="primary" :underline="false" @click="goHollandDetails(row)"> {{ row.ruleCode }}</el-link>
           </template>
         </mx-table>
         <!-- 分页 -->
         <div>
-          <pagination :total="hollTotal" :autoScroll="false" @pagination="onHollChangePage" :page.sync="hollPageForm.pageNum"
-                      :limit.sync="hollPageForm.pageSize"></pagination>
+          <pagination
+            :total="hollTotal"
+            :auto-scroll="false"
+            :page.sync="hollPageForm.pageNum"
+            :limit.sync="hollPageForm.pageSize"
+            @pagination="onHollChangePage"
+          />
         </div>
       </div>
       <!-- 职业性格测评（MBTI） -->
       <div>
         <div style="padding: 24px 0; color: #1a74d3">职业性格测评（MBTI）</div>
-        <mx-table :rows="mbtiData" :propDefines="mbtiPropDefines">
+        <mx-table :rows="mbtiData" :prop-defines="mbtiPropDefines">
           <template #time="{ value }">
             {{ value.split(" ")[0] }}
           </template>
-          <template #nav="{ row, value }">
+          <template #nav="{ row }">
             <el-link type="primary" :underline="false" @click="goMbtiDetails(row)"> {{ row.ruleCode }}</el-link>
           </template>
         </mx-table>
       </div>
-         <!-- 分页 -->
-        <div>
-          <pagination :total="mbtiTotal" :autoScroll="false" @pagination="onMbtiChangePage" :page.sync="mbtiPageForm.pageNum"
-                      :limit.sync="mbtiPageForm.pageSize"></pagination>
-        </div>
+      <!-- 分页 -->
+      <div>
+        <pagination
+          :total="mbtiTotal"
+          :auto-scroll="false"
+          :page.sync="mbtiPageForm.pageNum"
+          :limit.sync="mbtiPageForm.pageSize"
+          @pagination="onMbtiChangePage"
+        />
+      </div>
     </el-card>
   </div>
 </template>
 <script>
 import Pagination from '@/components/Pagination/index'
-import { hollandRecord, mbtiRecord } from "@/api/webApi/career-other";
+import { hollandRecord, mbtiRecord } from '@/api/webApi/career-other'
 export default {
   components: {
     Pagination
@@ -59,126 +69,127 @@ export default {
       hollTotal: 0,
       hollPageForm: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 10
       },
       mbtiData: [],
       mbtiTotal: 0,
       mbtiPageForm: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 10
       },
       propDefines: {
         id: {
-          label: "ID",
+          label: 'ID'
         },
         createTime: {
-          label: "测评时间",
-          slot: "time",
+          label: '测评时间',
+          slot: 'time'
         },
         scorer: {
-          label: "现实型",
+          label: '现实型'
         },
         scorea: {
-          label: "艺术型",
+          label: '艺术型'
         },
         scorei: {
-          label: "研究型",
+          label: '研究型'
         },
         scores: {
-          label: "社会型",
+          label: '社会型'
         },
         scoree: {
-          label: "企业型",
+          label: '企业型'
         },
         scorec: {
-          label: "传统型",
+          label: '传统型'
         },
         ruleCode: {
-          label: "测评结果",
-          slot: "nav",
-        },
+          label: '测评结果',
+          slot: 'nav'
+        }
       },
       mbtiPropDefines: {
         id: {
-          label: "ID",
+          label: 'ID'
         },
         createTime: {
-          label: "测评时间",
-          slot: "time",
+          label: '测评时间',
+          slot: 'time'
         },
         scoreE: {
-          label: "外向",
+          label: '外向'
         },
         scoreI: {
-          label: "内向",
+          label: '内向'
         },
         scoreS: {
-          label: "实感",
+          label: '实感'
         },
         scoreN: {
-          label: "直觉",
+          label: '直觉'
         },
         scoreT: {
-          label: "思考",
+          label: '思考'
         },
         scoreF: {
-          label: "情感",
+          label: '情感'
         },
         scoreJ: {
-          label: "判断",
+          label: '判断'
         },
         scoreP: {
-          label: "认知",
+          label: '认知'
         },
         ruleCode: {
-          label: "测评结果",
-          slot: "nav",
-        },
-      },
-    };
+          label: '测评结果',
+          slot: 'nav'
+        }
+      }
+    }
   },
   created() {
-    this.getHollandRecord();
+    this.getHollandRecord()
     this.getMbtiRecord()
   },
   methods: {
     goHollandDetails(item) {
-      this.$router.push({ name: 'CareerHollandReport', query: { code: item.code }})
+      this.$router.push({ path: '/career/components/CareerHollandReportDetail', query: { code: item.code }})
     },
     goMbtiDetails(item) {
+      console.log(item)
       const { scoreE, scoreI, scoreS, scoreN, scoreT, scoreF, scoreJ, scoreP } = item
       const query = {
         code: item.ruleCode,
         scores: [scoreE, scoreI, scoreS, scoreN, scoreT, scoreF, scoreJ, scoreP]
       }
-      this.$router.push({ name: 'CareerMbtiReport', query })
+      this.$router.push({ path: '/career/components/CareerMbtiReportDetail', query })
     },
     getHollandRecord() {
       hollandRecord(this.hollPageForm).then((res) => {
-        this.hollData = res.rows;
-        this.hollTotal = res.total;
-        console.log(res);
-      });
+        this.hollData = res.rows
+        this.hollTotal = res.total
+        console.log(res)
+      })
     },
-    onHollChangePage(page){
-      this.hollPageForm.pageSize = page.limit;
-      this.hollPageForm.pageNum = page.page;
-      this.getHollandRecord();
+    onHollChangePage(page) {
+      this.hollPageForm.pageSize = page.limit
+      this.hollPageForm.pageNum = page.page
+      this.getHollandRecord()
     },
-    onMbtiChangePage(page){
-      this.mbtiPageForm.pageSize = page.limit;
-      this.mbtiPageForm.pageNum = page.page;
-      this.getMbtiRecord();
+    onMbtiChangePage(page) {
+      this.mbtiPageForm.pageSize = page.limit
+      this.mbtiPageForm.pageNum = page.page
+      this.getMbtiRecord()
     },
     getMbtiRecord() {
       mbtiRecord(this.mbtiPageForm).then((res) => {
-        this.mbtiData = res.rows;
-        this.mbtiTotal = res.total;
-        console.log(res);
-      });
+        this.mbtiData = res.rows
+        this.mbtiTotal = res.total
+        console.log(res)
+      })
     }
-  },
-};
+  }
+}
 </script>
 <style lang="scss" scoped>
 .banner {

src/views/career/components/concernedMajor.vue

@@ -1,89 +1,94 @@
 <template>
-  <div class="concerned-major-container" v-loading="loading">
-    <mx-table :rows="dataList" :propDefines="propDefines">
+  <div v-loading="loading" class="concerned-major-container">
+    <mx-table :rows="dataList" :prop-defines="propDefines">
       <template #column-delete="{ row }">
-        <i class="el-icon-delete pointer" @click="del(row)"></i>
+        <i class="el-icon-delete pointer" @click="del(row)" />
       </template>
     </mx-table>
-    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-size="20"
-      @pagination="getList" />
+    <pagination
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      :page-size="20"
+      @pagination="getList"
+    />
   </div>
 </template>
 <script>
-  import {
-    concernedMajors,
-    removeConcernedMajor,
-  } from "@/api/webApi/career-other";
-  import { formatDate } from '@/utils'
+import {
+  concernedMajors,
+  removeConcernedMajor
+} from '@/api/webApi/career-other'
+import { formatDate } from '@/utils'
 
-  export default {
-    data() {
-      return {
-        loading: false,
-        total: 1,
-        dataList: [],
-        propDefines: {
-          code: {
-            label: "专业代码"
-          },
-          name: {
-            label: "专业名称"
-          },
-          type: {
-            label: "专业类型"
-          },
-          createTime: {
-            label: "收藏时间"
-          },
-          actions: {
-            label: "操作",
-            slot: "column-delete",
-            width: "80px",
-          },
+export default {
+  data() {
+    return {
+      loading: false,
+      total: 1,
+      dataList: [],
+      propDefines: {
+        code: {
+          label: '专业代码'
         },
-        queryParams: {
-          pageNum: 1,
-          pageSize: 20,
+        name: {
+          label: '专业名称'
         },
-      };
-    },
-    created() {
-      this.getList();
-    },
-    methods: {
-      getList() {
-        this.loading = true;
-        concernedMajors(this.queryParams).then((res) => {
-          console.log("concernedMajors res", res);
-          if (res.code == 200 || res.code == 0) {
-            this.dataList = res.rows.map(item => {
-              item.createTime = formatDate(item.createTime)
-              return item
-            });
-            this.total = res.total;
-          } else {
-            this.msgError(res.msg || "concernedMajors 请求异常");
-          }
-          this.loading = false;
-        });
-      },
-      del(row) {
-        if (!row || !row.id) return;
-        this.$confirm(`确认删除 '${row.name}'`, "提示", {
-          confirmButtonText: "确认",
-          cancelButtonText: "取消",
-          type: "warning",
-        }).then(() => {
-          removeConcernedMajor({
-            code: row.code
-          }).then((res) => {
-            this.$message.success('操作成功')
-            this.getList()
-          });
-        });
+        type: {
+          label: '专业类型'
+        },
+        createTime: {
+          label: '收藏时间'
+        },
+        actions: {
+          label: '操作',
+          slot: 'column-delete',
+          width: '80px'
+        }
       },
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.loading = true
+      concernedMajors(this.queryParams).then((res) => {
+        console.log('concernedMajors res', res)
+        if (res.code == 200 || res.code == 0) {
+          this.dataList = res.rows.map(item => {
+            item.createTime = formatDate(item.createTime)
+            return item
+          })
+          this.total = res.total
+        } else {
+          this.msgError(res.msg || 'concernedMajors 请求异常')
+        }
+        this.loading = false
+      })
     },
-  };
+    del(row) {
+      if (!row || !row.id) return
+      this.$confirm(`确认删除 '${row.name}'`, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        removeConcernedMajor({
+          code: row.code
+        }).then((res) => {
+          this.$message.success('操作成功')
+          this.getList()
+        })
+      })
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 </style>

src/views/career/components/concernedUniversity.vue

@@ -1,105 +1,111 @@
-<template>
-  <div class="concerned-college-container">
-    <mx-table :rows="dataList" :propDefines="propDefines">
-      <template #column-check-style="{value}">
-        <mx-check-status :checked="value>1" yes-only />
-      </template>
-      <template #column-delete="{ row }">
-        <i class="el-icon-delete pointer" @click="del(row)"></i>
-      </template>
-    </mx-table>
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      :page-size="20" @pagination="getList" />
-  </div>
-</template>
-<script>
-  import {concernedUniversities, removeConcernedUniversity} from "@/api/webApi/career-other"
-
-  export default {
-    data() {
-      return {
-        total: 0,
-        dataList: [],
-        propDefines: {
-          name: {
-            label: "院校名称"
-          },
-          location: {
-            label: "所在地"
-          },
-          managerType: {
-            label: "主管部门"
-          },
-          type: {
-            label: "院校类型"
-          },
-          level: {
-            label: "学历层次"
-          },
-          ylxx: {
-            label: "一流大学建设高校",
-            sortable: true,
-            displayIcon: true,
-            slot: "column-check-style",
-          },
-          ylxk: {
-            label: "一流学科建设高校",
-            sortable: true,
-            displayIcon: true,
-            slot: "column-check-style",
-          },
-          yjsy: {
-            label: "研究生院",
-            sortable: true,
-            displayIcon: true,
-            slot: "column-check-style",
-          },
-          actions: {
-            label: "操作",
-            slot: "column-delete",
-            width: "80px",
-          },
-        },
-        queryParams: {
-          pageNum: 1,
-          pageSize: 20,
-        },
-      };
-    },
-    created() {
-      this.getList();
-    },
-    methods: {
-      getList() {
-        this.loading = true;
-        concernedUniversities(this.queryParams).then((res) => {
-          console.log("concernedUniversities res", res);
-          if (res.code == 200 || res.code == 0) {
-            this.dataList = res.rows;
-            this.total = res.total;
-          } else {
-            this.msgError(res.msg || "concernedUniversities 请求异常");
-          }
-          this.loading = false;
-        });
-      },
-      del(row) {
-        if (!row || !row.id) return;
-        this.$confirm(`确认删除 '${row.name}'`, "提示", {
-          confirmButtonText: "确认",
-          cancelButtonText: "取消",
-          type: "warning",
-        }).then(() => {
-          removeConcernedUniversity({
-            id: row.id
-          }).then((res) => {
-            const msgFunc = res.code == 200 ? this.msgError : this.msgSuccess;
-            msgFunc(res.msg);
-          });
-        });
-      },
-    },
-  };
-</script>
-<style lang="scss" scoped>
-</style>
+<template>
+  <div class="concerned-college-container">
+    <mx-table :rows="dataList" :prop-defines="propDefines">
+      <template #column-check-style="{value}">
+        <mx-check-status :checked="value>1" yes-only />
+      </template>
+      <template #column-delete="{ row }">
+        <i class="el-icon-delete pointer" @click="del(row)" />
+      </template>
+    </mx-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      :page-size="20"
+      @pagination="getList"
+    />
+  </div>
+</template>
+<script>
+import { concernedUniversities, removeConcernedUniversity } from '@/api/webApi/career-other'
+
+export default {
+  data() {
+    return {
+      total: 0,
+      dataList: [],
+      propDefines: {
+        name: {
+          label: '院校名称'
+        },
+        location: {
+          label: '所在地'
+        },
+        managerType: {
+          label: '主管部门'
+        },
+        type: {
+          label: '院校类型'
+        },
+        level: {
+          label: '学历层次'
+        },
+        ylxx: {
+          label: '一流大学建设高校',
+          sortable: true,
+          displayIcon: true,
+          slot: 'column-check-style'
+        },
+        ylxk: {
+          label: '一流学科建设高校',
+          sortable: true,
+          displayIcon: true,
+          slot: 'column-check-style'
+        },
+        yjsy: {
+          label: '研究生院',
+          sortable: true,
+          displayIcon: true,
+          slot: 'column-check-style'
+        },
+        actions: {
+          label: '操作',
+          slot: 'column-delete',
+          width: '80px'
+        }
+      },
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.loading = true
+      concernedUniversities(this.queryParams).then((res) => {
+        console.log('concernedUniversities res', res)
+        if (res.code == 200 || res.code == 0) {
+          this.dataList = res.rows
+          this.total = res.total
+        } else {
+          this.msgError(res.msg || 'concernedUniversities 请求异常')
+        }
+        this.loading = false
+      })
+    },
+    del(row) {
+      if (!row || !row.id) return
+      this.$confirm(`确认删除 '${row.name}'`, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        removeConcernedUniversity({
+          id: row.id
+        }).then((res) => {
+          const msgFunc = res.code == 200 ? this.msgError : this.msgSuccess
+          msgFunc(res.msg)
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/views/career/components/courseCard.vue

@@ -1,69 +1,69 @@
-<template>
-  <div class="career-course-card">
-    <div class="career-course-card-img">
-      <el-image :src="img || defaultImg"></el-image>
-    </div>
-    <div class="career-course-card-text">
-      <div class="career-course-card-title">{{ title }}</div>
-      <div class="career-course-card-num">
-        <i class="el-icon-view"></i>
-        {{ count }}人
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    img: {
-      type: String,
-      default: "",
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    count: {
-      type: Number | String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      defaultImg: "",
-    };
-  },
-};
-</script>
-<style lang="scss" scoped>
-.career-course-card {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.career-course-card-img {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.career-course-card-text {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  padding-top: 5px;
-  white-space: nowrap;
-}
-.career-course-card-title {
-  font-size: 14px;
-  font-weight: 400;
-  color: #585858;
-  padding-right: 20px;
-  overflow: hidden; //禁止内容溢出
-  text-overflow: ellipsis; //省略号
-}
-.career-course-card-num {
-  font-size: 12px;
-  font-weight: 400;
-  color: #7a7a7a;
-}
-</style>
+<template>
+  <div class="fx-column fx-sta-cen">
+    <div class="fx-row fx-cen-cen">
+      <el-image :src="img || defaultImg" />
+    </div>
+    <div class="fx-row fx-bet-cen">
+      <div class="career-course-card-title">{{ title }}</div>
+      <div class="career-course-card-num">
+        <i class="el-icon-view" />
+        {{ count }}人
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    img: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    count: {
+      type: Number | String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      defaultImg: ''
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.career-course-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.career-course-card-img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.career-course-card-text {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding-top: 5px;
+  white-space: nowrap;
+}
+.career-course-card-title {
+  font-size: 14px;
+  font-weight: 400;
+  color: #585858;
+  padding-right: 20px;
+  overflow: hidden; //禁止内容溢出
+  text-overflow: ellipsis; //省略号
+}
+.career-course-card-num {
+  font-size: 12px;
+  font-weight: 400;
+  color: #7a7a7a;
+}
+</style>

src/views/career/components/courseTabPage.vue

@@ -1,115 +1,124 @@
 <template>
-  <div class="career-course-tabPage">
-    <div class="career-course-head">
-      <div class="career-course-title">
-        <el-image class="mr5" :src="require('@/assets/images/career/career_course_icon.png')" />
-        {{ title }}
-      </div>
-      <div class="career-course-tabs">
-        <el-radio-group v-model="queryParams.type" @change="typeChanged" round>
-          <el-radio-button v-for="t in types" :key="t.value" :label="t.value">{{
-            t.label
-          }}</el-radio-button>
-        </el-radio-group>
-      </div>
+  <index-card>
+    <div slot="title" class="fx-row">
+      <el-image class="mr10" :src="require('@/assets/images/career/career_course_icon.png')" fit="contain" />
+      <span class="f24 bold pf">{{ title }}</span>
     </div>
-    <mx-seperator />
-    <div class="career-course-body mt10">
-      <el-row v-if="total > 0" :gutter="10">
-        <el-col class="evaluation-card-wrapper" v-for="c in dataList" :key="c.id" :span="4">
-          <el-card>
-            <course-card @click.native="detail(c)" :img="c.pictUrl" :title="c.name" :count="c.plays"></course-card>
-          </el-card>
-        </el-col>
-      </el-row>
-      <evaluation-empty class="mt10" v-else />
-      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-size="12" :pageSizes="[12, 24, 48]" @pagination="getList" />
+    <div slot="more" class="career-course-tabs">
+      <el-radio-group v-model="queryParams.type" round @change="typeChanged">
+        <el-radio-button v-for="t in types" :key="t.value" :label="t.value">{{
+          t.label
+        }}
+        </el-radio-button>
+      </el-radio-group>
     </div>
-  </div>
+    <index-card-content v-if="total > 0" :list="dataList" :line-size="lineSize" :gutter="20">
+      <template #default="{item}">
+        <index-image-item v-bind="item" use-tooltip />
+      </template>
+    </index-card-content>
+    <evaluation-empty v-else class="mt10" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      :page-size="12"
+      :page-sizes="[12, 24, 48]"
+      @pagination="getList"
+    />
+  </index-card>
 </template>
 <script>
-import * as career from "@/api/webApi/career-course";
-import courseCard from "./courseCard.vue";
+import * as career from '@/api/webApi/career-course'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+import IndexCardContent from '@/views/login/components/modules/shared/IndexCardContent'
+import IndexImageItem from '@/views/login/components/modules/shared/IndexImageItem'
+
 export default {
-  components: { courseCard },
-  data () {
+  components: { IndexImageItem, IndexCardContent, IndexCard },
+  data() {
     return {
-      title: "生涯课程",
+      title: '生涯课程',
       types: [],
       queryParams: {
         pageSize: 12,
         pageNum: 1,
-        type: 0,
+        type: 0
       },
+      lineSize: 4,
       total: 0,
-      dataList: [],
-    };
+      dataList: []
+    }
   },
-  created () {
-    this.getTypes();
+  created() {
+    this.getTypes()
   },
   methods: {
-    detail (item) {
+    detail(item) {
       const nextParams = {
         id: item.id,
         aliid: item.aliid,
         aliIdType: item.aliIdType,
         name: item.name,
         count: item.plays,
-        img: item.pictUrl,
-      };
+        img: item.pictUrl
+      }
       this.$router.push({
-        path: "/career/plan/detail",
-        query: nextParams,
-      });
+        path: '/career/plan/detail',
+        query: nextParams
+      })
     },
-    getTypes () {
+    getTypes() {
       career.types().then((res) => {
         if (res.code == 200 || res.code == 0) {
-          this.types = res.rows.slice(0, 3);
+          // assign this.types with res.rows, and take 2 element form index 1.
+          this.types = res.rows.slice(1, 3)
           // set default.
           if (this.types.length > 0) {
-            this.type = this.types[0].value;
-            this.typeChanged();
+            this.type = this.types[0].value
+            this.queryParams.type = this.type
+            this.typeChanged()
           }
         }
-      });
+      })
     },
-    typeChanged () {
-      this.queryParams.pageNum = 1;
-      this.getList();
+    typeChanged() {
+      this.queryParams.pageNum = 1
+      this.getList()
     },
-    getList () {
+    getList() {
       career.list(this.queryParams).then((res) => {
-        console.log("career coursse list res", res);
         if (res.code == 200 || res.code == 0) {
-          this.total = res.total;
-          this.dataList = res.rows;
+          this.total = res.total
+          this.dataList = res.rows.map((item, idx) => {
+            const path = '/career/plan/detail'
+            const nextParams = {
+              id: item.id,
+              aliid: item.aliid,
+              aliIdType: item.aliIdType,
+              name: item.name,
+              count: item.plays,
+              img: item.pictUrl
+            }
+            return {
+              title: item.name,
+              src: item.pictUrl,
+              path: path,
+              nextData: nextParams,
+              class: idx >= this.lineSize ? ['mt20'] : [],
+              titleClasses: ['fx-1', 'f-666 pf f14 bold hover-primary', 'text-ellipsis'],
+              desc: item.plays,
+              descIcon: 'el-icon-view',
+              descClasses: ['f-666 pf f14 ml5'],
+              textLayout: 'fx-row fx-bet-cen mt5'
+            }
+          })
         }
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
-.career-course {
-  display: flex;
-  flex-direction: column;
-}
-.career-course-head {
-  display: flex;
-  justify-content: space-between;
-}
-.career-course-title {
-  font-size: 16px;
-  color: #585858;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-.career-course-tabs {
-  display: flex;
-  align-items: center;
-  padding: 10px 0;
-}
 </style>

src/views/career/components/filter-form-style.scss

@@ -0,0 +1,44 @@
+.radioInput ::v-deep {
+  background-color: #ffffff;
+  font-size: 14px;
+  padding: 5px;
+
+  .el-checkbox,
+  .el-radio {
+    .el-checkbox__input,
+    .el-radio__input {
+      display: none;
+    }
+  }
+}
+
+.radioInput ::v-deep {
+  display: flex;
+
+  .el-checkbox-button .el-checkbox-button__inner,
+  .el-radio-button .el-radio-button__inner {
+    border-radius: 4px !important;
+    border: none;
+    padding: 5px 10px !important;
+    font-weight: 400;
+    font-family: PingFangSC-Regular, PingFang SC;
+  }
+
+  .el-checkbox-button__original:checked + .el-checkbox-button__inner,
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    box-shadow: none;
+  }
+
+  .el-checkbox-button {
+    margin-left: 10px;
+  }
+
+  .radiaTitle {
+    display: inline-block;
+    width: 80px;
+    font-size: 14px;
+    text-align: right;
+    margin-top: 2px;
+    margin-right: 10px;
+  }
+}

src/views/career/components/infoCard.vue

@@ -1,51 +1,35 @@
-<template>
-  <div class="info-list-item" style="padding: 0; width: 100%">
-    <div class="info-list-date" v-if="date">{{ date }}</div>
-    <div class="info-list-title">{{ name }}</div>
-
-    <el-image
-      class="evaluation-card-icon"
-      :src="require('@/assets/images/icon_rightArrow.png')"
-    />
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    date: {
-      type: String,
-      default: "",
-    },
-    name: {
-      type: String,
-      default: "",
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.info-list-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  width: 100%;
-  font-size: 14px;
-  font-weight: 400;
-  color: #414141;
-  cursor: pointer;
-}
-.info-list-date {
-  margin-right: 50px;
-}
-.info-list-title {
-  flex: 1;
-  margin-right: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.evaluation-card-icon {
-  width: 16px;
-  height: 16px;
-}
-</style>
+<template>
+  <div class="fx-row fx-bet-cen info-list-item pointer f16">
+    <div v-if="date" class="light f-666" style="width: 150px">{{ date }}</div>
+    <div class="fx-1 text-ellipsis mr20 pf">{{ name }}</div>
+    <div class="icon16 round bg-primary fx-row fx-cen-cen">
+      <i class="el-icon-right f-fff" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    date: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "~@/assets/styles/common.scss";
+
+.info-list-item {
+  line-height: 56px;
+  border-bottom: 2px dashed $--background-color-base;
+}
+
+.pointer:hover {
+  color: $--color-primary;
+}
+</style>

src/views/career/components/infoDetail.vue

@@ -1,70 +1,63 @@
-<template>
-  <div class="info-detail-container">
-    <evaluation-title
-      navBackButton
-      :title="`${type}/${title}`"
-      :navAction="closeDetail"
-    ></evaluation-title>
-    <el-card
-      class="mt20"
-      v-loading="loading"
-      v-html="data.content"
-      style="padding: 20px"
-    />
-  </div>
-</template>
-<script>
-import * as career from "@/api/webApi/career-news";
-
-export default {
-  props: {
-    type: {
-      type: String | Number,
-      default: "",
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    id: {
-      type: String | Number,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      data: {},
-    };
-  },
-  watch: {
-    id(newVal, oldVal) {
-      this.getDetail();
-    },
-  },
-  created() {
-    this.getDetail();
-  },
-  methods: {
-    closeDetail() {
-      this.$emit("close");
-    },
-
-    getDetail() {
-      if (!this.id) return;
-      this.loading = true;
-      career.info({ id: this.id }).then((res) => {
-        console.log("career news info res", res);
-        if (res.code == 200 || res.code == 0) {
-          this.data = res.data;
-        } else {
-          this.msgError(res.msg || "career news info 请求异常");
-        }
-        this.loading = false;
-      });
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-</style>
+<template>
+  <index-card :title="`${type}/${title}`">
+    <el-button slot="more" size="small" round @click="closeDetail">返回</el-button>
+    <div v-loading="loading" class="mt20" style="padding: 0 30px" v-html="data.content" />
+  </index-card>
+</template>
+<script>
+import * as career from '@/api/webApi/career-news'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+
+export default {
+  components: { IndexCard },
+  props: {
+    type: {
+      type: String | Number,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    id: {
+      type: String | Number,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      data: {}
+    }
+  },
+  watch: {
+    id(newVal, oldVal) {
+      this.getDetail()
+    }
+  },
+  created() {
+    this.getDetail()
+  },
+  methods: {
+    closeDetail() {
+      this.$emit('close')
+    },
+
+    getDetail() {
+      if (!this.id) return
+      this.loading = true
+      career.info({ id: this.id }).then((res) => {
+        console.log('career news info res', res)
+        if (res.code == 200 || res.code == 0) {
+          this.data = res.data
+        } else {
+          this.msgError(res.msg || 'career news info 请求异常')
+        }
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/views/career/components/infoList.vue

@@ -1,51 +1,36 @@
 <template>
-  <div class="info-list-container">
-    <el-row :gutter="10" v-if="total > 0">
-      <el-col
-        class="evaluation-card-wrapper"
+  <div class="pl30 pt30 pb30 pr30 fx-column">
+    <template v-if="dataList.length">
+      <info-card
         v-for="item in dataList"
         :key="item.id"
-        :span="24"
-      >
-        <el-card>
-          <info-card
-            :date="item.sendDate"
-            :name="item.title"
-            @click.native="detail(item)"
-          />
-        </el-card>
-      </el-col>
-    </el-row>
-    <evaluation-empty class="mt10" v-else />
+        :date="item.sendDate"
+        :name="item.title"
+        @click.native="detail(item)"
+      />
+    </template>
+    <evaluation-empty v-else class="mt10" />
     <pagination
-      v-show="total > queryParams.pageSize"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
       :page-size="20"
-      :pageSizes="[20, 40, 100]"
+      :page-sizes="[20, 40, 100]"
       @pagination="getList"
     />
   </div>
 </template>
 <script>
-import infoCard from "./infoCard.vue";
-import * as career from "@/api/webApi/career-news";
+import infoCard from './infoCard.vue'
+import * as career from '@/api/webApi/career-news'
 
 export default {
   components: { infoCard },
   props: {
     type: {
       type: String | Number,
-      default: "",
-    },
-  },
-  watch: {
-    type(newVal, oldVal) {
-      console.log(2222222222222222)
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
+      default: ''
+    }
   },
   data() {
     return {
@@ -55,27 +40,33 @@ export default {
         tag: ''
       },
       dataList: [],
-      total: 0,
-    };
+      total: 0
+    }
+  },
+  watch: {
+    type(newVal, oldVal) {
+      this.queryParams.pageNum = 1
+      this.getList()
+    }
   },
   methods: {
     detail(item) {
-      this.$emit("click", item);
+      this.$emit('click', item)
     },
     getList() {
-      if (!this.type) return;
+      if (!this.type) return
       career.list({ ...this.queryParams, type: this.type }).then((res) => {
-        console.log("career news list res", res);
+        console.log('career news list res', res)
         if (res.code == 200 || res.code == 0) {
-          this.dataList = res.rows;
-          this.total = res.total;
+          this.dataList = res.rows
+          this.total = res.total
         } else {
-          this.msgError(res.msg || "career news list 请求异常");
+          this.msgError(res.msg || 'career news list 请求异常')
         }
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 </style>

src/views/career/components/infoSample.vue

@@ -1,87 +1,92 @@
-<template>
-  <div class="info-sample-container">
-    <div class="info-sample-title">{{ title }}</div>
-    <div class="info-sample-seperator"></div>
-    <div class="info-sample-list" v-if="dataList.length">
-      <template v-for="(item, idx) in dataList">
-        <info-card
-          :key="item.id"
-          :name="item.title"
-          @click.native="detail(item)"
-        />
-        <mx-seperator
-          class="info-sample-item-seperator"
-          :key="idx"
-          v-if="idx < dataList.length - 1"
-        />
-      </template>
-    </div>
-  </div>
-</template>
-<script>
-import infoCard from "./infoCard.vue";
-import * as career from "@/api/webApi/career-news";
-
-export default {
-  components: { infoCard },
-  props: {
-    type: {
-      type: String,
-      default: "",
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      dataList: [],
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        tag: "hot",
-      },
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    detail(item) {
-      this.$emit("click", item);
-    },
-    getList() {
-      if (!this.type) return;
-      career.list({ ...this.queryParams, type: this.type }).then((res) => {
-        console.log("career news list res", res);
-        if (res.code == 200 || res.code == 0) {
-          this.dataList = res.rows;
-          this.total = res.total;
-        } else {
-          this.msgError(res.msg || "career news list 请求异常");
-        }
-      });
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.info-sample-container {
-  display: flex;
-  flex-direction: column;
-}
-.info-sample-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #414141;
-}
-.info-sample-seperator {
-  width: 21px;
-  height: 2px;
-  background-color: #414141;
-}
-.info-sample-item-seperator {
-  margin: 5px -5px;
-}
-</style>
+<template>
+  <div class="info-sample-container fx-column">
+    <el-badge class="self-sta" value="HOT">
+      <span class="info-sample-title">{{ title }}</span>
+    </el-badge>
+    <div class="info-sample-separator" />
+    <div v-if="dataList.length" class="info-sample-list">
+      <template v-for="(item) in dataList">
+        <info-card
+          :key="item.id"
+          :name="item.title"
+          @click.native="detail(item)"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import infoCard from './infoCard.vue'
+import * as career from '@/api/webApi/career-news'
+
+export default {
+  components: { infoCard },
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      dataList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        tag: 'hot'
+      }
+    }
+  },
+  watch: {
+    type: {
+      immediate: true,
+      handler: function() {
+        this.getList()
+      }
+    }
+  },
+  methods: {
+    detail(item) {
+      this.$emit('click', item)
+    },
+    getList() {
+      if (!this.type) return
+      career.list({ ...this.queryParams, type: this.type }).then((res) => {
+        console.log('career news list res', res)
+        if (res.code == 200 || res.code == 0) {
+          this.dataList = res.rows
+          this.total = res.total
+        } else {
+          this.msgError(res.msg || 'career news list 请求异常')
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.info-sample-container {
+  padding: 20px;
+  border: 1px solid #dddddd;
+}
+
+.info-sample-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #414141;
+}
+
+.info-sample-separator {
+  width: 21px;
+  height: 2px;
+  background-color: #414141;
+}
+
+.info-sample-item-separator {
+  margin: 5px -5px;
+}
+</style>

src/views/career/components/preferenceForm.vue

@@ -1,21 +1,21 @@
 <template>
-  <volunteer-list></volunteer-list>
+  <volunteer-list />
 </template>
 <script>
-import VolunteerList from "../zhiyuan/components/volunteerList.vue"
+import VolunteerList from '../zhiyuan/volunteerList.vue'
 export default {
   components: { VolunteerList },
   data() {
     return {
-    };
+    }
   },
   created() {
 
   },
   methods: {
 
-  },
-};
+  }
+}
 </script>
 <style lang="scss" scoped>
 </style>

src/views/career/newGaokao/video.vue

@@ -1,52 +1,110 @@
 <template>
-  <div class="app-container">
-    <div class="career-course-body mt10">
-      <el-row v-if="total > 0" :gutter="10">
-        <el-col class="evaluation-card-wrapper" v-for="c in dataList" :key="c.id" :span="6">
-          <el-card>
-            <course-card class="pointer" @click.native="detail(c)" :img="c.coverUrl" :title="c.title"
-                         :count="c.clicked"></course-card>
-          </el-card>
-        </el-col>
-      </el-row>
-      <evaluation-empty class="mt10" v-else/>
-      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-                  :page-size="12" :pageSizes="[12, 24, 48]" @pagination="getList"
+  <div class="bg-page fx-column fx-cen-cen">
+    <index-card :title="type.alias" class="index-block">
+      <template #title>
+        <el-radio-group v-model="currentPath" @change="changeVideoPage">
+          <el-radio-button v-for="r in videoRouters" :key="r.category" :label="r.category">
+            {{ r.name }}
+          </el-radio-button>
+        </el-radio-group>
+      </template>
+      <index-card-content v-if="total>0" :list="dataList" :line-size="lineSize" :gutter="20">
+        <template #default="{item}">
+          <index-image-item v-bind="item" use-tooltip @click.native="saveClick(item.nextData.id)"/>
+        </template>
+      </index-card-content>
+      <evaluation-empty v-else/>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        :page-size="12"
+        :page-sizes="[12, 24, 48]"
+        @pagination="getList"
       />
-    </div>
+    </index-card>
   </div>
 </template>
 <script>
-import { gkVideo, saveClicked } from '@/api/webApi/career-news'
-import courseCard from '../components/courseCard.vue'
+import {gkVideo, saveClicked, subTypes} from '@/api/webApi/career-news'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+import IndexCardContent from '@/views/login/components/modules/shared/IndexCardContent'
+import IndexImageItem from '@/views/login/components/modules/shared/IndexImageItem'
+import {mapGetters} from 'vuex'
 
 export default {
+  name: 'NewGaokaoVideo',
   components: {
-    courseCard
+    IndexImageItem,
+    IndexCardContent,
+    IndexCard
   },
   data() {
     return {
-      type: '',
+      typeKey: '',
+      type: {},
+      subTypes: [],
+      subType: '',
+      currentPath: '',
       queryParams: {
         pageSize: 12,
         pageNum: 1
       },
-      category: {
-        gksp: { name: '高考视频', playPath: '/fuzhu/play/gksp' },
-        gktf: { name: '高考提分', playPath: '/fuzhu/play/gktf' }
+      gksp: {
+        policy: {name: '高考政策', alias: '高考政策', playPath: '/fuzhu/play/gksp'},
+        form: {name: '填报技巧', alias: '填报技巧', playPath: '/fuzhu/play/gksp'},
+        major: {name: '专业解读', alias: '专业解读', playPath: '/fuzhu/play/gksp'},
+        multiple: {name: '多元升学解读', alias: '多元升学解读', playPath: '/fuzhu/play/gksp'}
+      },
+      gktf: {
+        improve: {name: '高考提分', alias: '高考提分', playPath: '/fuzhu/play/gktf'}
       },
       total: 0,
+      lineSize: 4,
       dataList: []
     }
   },
+  computed: {
+    ...mapGetters(['topbarRouters']),
+    category() {
+      if (!this.typeKey) return {}
+      return this[this.typeKey]
+    },
+    videoRouters() {
+      return Object.keys(this.category).map(k => ({category: k, name: this.category[k].name}))
+    },
+    useHigherImage() {
+      return this.type == this.category.policy
+    }
+  },
   mounted() {
-    const subPaths = this.$route.path.split('/')
-    const lastSubPath = subPaths[subPaths.length - 1]
-    const typeKey = lastSubPath.split('_')[lastSubPath.split('_').length - 1]
-    this.type = this.category[typeKey]
-    this.getList()
+    this.initPage()
   },
   methods: {
+    initPage() {
+      const subPaths = this.$route.path.split('/')
+      const lastSubPath = subPaths[subPaths.length - 1]
+      this.typeKey = lastSubPath.split('_')[lastSubPath.split('_').length - 1]
+
+      // set first as default
+      const first = Object.keys(this.category).first()
+      this.type = this.category[first]
+      this.currentPath = first
+
+      this.getSubTypes()
+      this.getList()
+    },
+    changeVideoPage() {
+      this.type = this.category[this.currentPath]
+      this.getSubTypes()
+      this.getList()
+    },
+    getSubTypes() {
+      subTypes({type: this.type.alias}).then(res => {
+        this.subTypes = res['rows']
+      })
+    },
     detail(item) {
       this.saveClick(item.id)
       const nextParams = {
@@ -63,20 +121,40 @@ export default {
       })
     },
     saveClick(id) {
-      saveClicked({
-        id: id
-      }).then(res => {
-        console.log(res)
-      })
+      saveClicked({id})
     },
     getList() {
       gkVideo({
-        type: this.type.name,
+        type: this.type.alias,
+        subType: this.subType,
         tag: '',
         ...this.queryParams
       }).then(res => {
         this.total = res.total
-        this.dataList = res.rows
+        this.dataList = res.rows.map((item, idx) => {
+          const path = this.type.playPath
+          const nextParams = {
+            id: item.id,
+            aliid: item.aliId,
+            aliIdType: item.aliIdType,
+            name: item.title,
+            count: item.clicked,
+            img: item.coverUrl
+          }
+          return {
+            title: item.title,
+            src: item.coverUrl,
+            path: path,
+            nextData: nextParams,
+            class: idx >= this.lineSize ? ['mt20'] : [],
+            titleClasses: ['fx-1', 'f-666 pf f14 bold hover-primary', 'text-ellipsis'],
+            // desc: item.clicked,
+            // descIcon: 'el-icon-view',
+            // descClasses: ['f-666 pf f14 ml5'],
+            imgStyle: {width: '279px', height: (this.useHigherImage ? '173.93px' : '156.93px')},
+            textLayout: 'fx-row fx-bet-cen mt5'
+          }
+        })
       })
     }
   }

src/views/career/plan/CareerEva.vue

@@ -1,27 +1,23 @@
 <template>
-  <div class="app-container">
-    <el-card shadow="never">
-      <el-row :gutter="40">
-        <el-col :span="5">
-          <el-image :src="require('@/assets/images/career/img_holland.png')"></el-image>
-        </el-col>
-        <el-col :span="18">
-          <div>
-            <h3 class="mb15">职业兴趣测评（HOLLAND）</h3>
-            <div class="pf light f14 mb15 fx-row fx-bet-cen">
-              <div>
-                <span style="width:200px;display:inline-block">测评方向：专业倾向</span>
-                <span>测评题目：60题</span>
-              </div>
-              <div>
-                <el-button size="mini" round type="primary" @click="goCareer('HOLLAND')">进入评测</el-button>
-                <el-button size="mini" round plain @click="goReportList('HOLLAND')">查看记录</el-button>
-              </div>
-            </div>
-            <div class="pf light f14 mb15">
-              <span style="width:200px;display:inline-block">测评时间：约15分钟</span>
-              <span v-if="false">测评次数：剩余2次</span>
+  <div class="app-container bg-page fx-column fx-cen-cen">
+    <index-card class="width100" title="职业兴趣测评（HOLLAND）">
+      <div slot="more" class="fx-row">
+        <el-button size="small" round type="primary" @click="goCareer('HOLLAND')">进入评测</el-button>
+        <el-button size="small" round plain @click="goReportList('HOLLAND')">查看记录</el-button>
+      </div>
+      <div class="fx-row fx-bet-sta">
+        <el-image style="width: 200px" :src="require('@/assets/images/career/img_holland.png')" fit="contain" />
+        <div class="ml20 fx-1 fx-column">
+          <div class="text" style="display:flex;align-items: center;">
+            <div>
+              <span style="width:200px;display:inline-block">测评方向：专业倾向</span>
+              <span>测评题目：60题</span>
             </div>
+            <div />
+          </div>
+          <div class="text">
+            <span style="width:200px;display:inline-block">测评时间：18分钟</span>
+            <!--<span>测评次数：剩余2次</span>-->
           </div>
           <div class="tabBox">
             <template>
@@ -49,31 +45,29 @@
               </el-tabs>
             </template>
           </div>
-        </el-col>
-      </el-row>
-    </el-card>
+        </div>
+      </div>
+    </index-card>
     <!-- 2. -->
-    <el-card shadow="never" class="mt20">
-      <el-row :gutter="40">
-        <el-col :span="5">
-          <el-image :src="require('@/assets/images/career/img_MBTI.png')"></el-image>
-        </el-col>
-        <el-col :span="18">
+    <index-card class="width100 mt20" title="迈尔斯布里格斯类型指标（MBTI）">
+      <div slot="more" class="fx-row">
+        <el-button size="small" round type="primary" @click="goCareer('BMTI')">进入评测</el-button>
+        <el-button size="small" round plain @click="goReportList('MBTI')">查看记录</el-button>
+      </div>
+      <div class="fx-row fx-bet-sta">
+        <el-image style="width:200px" :src="require('@/assets/images/career/img_MBTI.png')" fit="contain" />
+        <div class="fx-1 ml20 fx-column">
           <div>
-            <h3 class="mb15">迈尔斯布里格斯类型指标（MBTI）</h3>
-            <div class="pf light f14 mb15 fx-row fx-bet-cen">
+            <div class="text" style="display:flex;align-items: center;">
               <div>
                 <span style="width:200px;display:inline-block">测评方向：性格倾向</span>
                 <span>测评题目：93题</span>
               </div>
-              <div>
-                <el-button size="mini" round type="primary" @click="goCareer('BMTI')">进入评测</el-button>
-                <el-button size="mini" round plain @click="goReportList('MBTI')">查看记录</el-button>
-              </div>
+              <div />
             </div>
-            <div class="pf light f14 mb15">
-              <span style="width:200px;display:inline-block">测评时间：约18分钟</span>
-              <span v-if="false">测评次数：剩余2次</span>
+            <div class="text">
+              <span style="width:200px;display:inline-block">测评时间：18分钟</span>
+              <span>测评次数：剩余2次</span>
             </div>
           </div>
           <div class="tabBox">
@@ -103,36 +97,36 @@
               </el-tabs>
             </template>
           </div>
-        </el-col>
-      </el-row>
-    </el-card>
+        </div>
+      </div>
+    </index-card>
   </div>
 </template>
 
 <script>
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+import TransferMixin from '@/components/TransferMixin'
 export default {
   name: 'CareerEva',
-  data () {
+  components: { IndexCard },
+  mixins: [TransferMixin],
+  data() {
     return {
       activeName: 'first',
       activeName02: 'first02'
     }
   },
   methods: {
-    goCareer (type) {
-      if (type === 'HOLLAND') {
-        this.$router.push({ name: 'CareerEvaDetail', query: { type: 'HOLLAND' } })
-      }else if(type === 'BMTI'){
-        this.$router.push({ name: 'CareerEvaDetail', query: { type: 'BMTI' } })
-      }
+    goCareer(type) {
+      this.transferTo('/career/plan/CareerEvaDetail', { type })
     },
-    goReportList(type){
-      if(type==='HOLLAND'){
-        this.$router.push({name:'CareerHollandReportList'})
-      }else if(type==='MBTI'){
-        this.$router.push({name:'CareerMbtiReportList'})
+    goReportList(type) {
+      if (type === 'HOLLAND') {
+        this.$router.push({ name: 'CareerHollandReportList' })
+      } else if (type === 'MBTI') {
+        this.$router.push({ name: 'CareerMbtiReportList' })
       }
-    },
+    }
   }
 }
 </script>
@@ -149,9 +143,9 @@ export default {
     width: 100%;
     list-style: none;
     padding: 8px 0;
-    line-height: 1.2;
+    line-height: 1.75;
     word-wrap: normal;
-    white-space: wrap;
+    white-space: pre-wrap;
   }
 }
 .text {
@@ -163,4 +157,22 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
+.tabBox {
+  .el-tabs {
+    .el-tabs__header {
+      .el-tabs__nav-wrap {
+        .el-tabs__nav-scroll {
+          .el-tabs__nav {
+            .el-tabs__active-bar {
+              background-color: var(--themeColor) !important;
+            }
+            .el-tabs__item.is-active {
+              color: var(--themeColor) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/views/career/plan/CareerEvaDetail.vue

@@ -1,7 +1,8 @@
 <template>
   <!-- style="padding:24px 12%;background-color:#f7f7f7;" -->
-  <div class="app-container">
-    <div class="bg-white">
+  <div class="bg-page fx-column fx-cen-cen">
+    <div class="bg-white width100 fx-column">
+      <el-image :src="require('@/assets/images/img_zhiyuan_banner.png')" class="index-block" fit="conver" />
       <div v-if="flag===false" style="padding:10px 72px;">
         <!-- 迈尔斯布里格斯类型指标（MBTI）测试前 -->
         <h2 v-if="careerType === 'HOLLAND'">职业性格测评（HOLLAND）测试前须知</h2>
@@ -14,7 +15,7 @@
             </li>
             <li>
               <div class="number">2</div>
-              <div></div>
+              <div />
               《性格分析报告》展示的你的性格倾向，而不是你的知识，技能，经验。
             </li>
             <li>
@@ -25,55 +26,61 @@
             </li>
             <li>
               <div class="number">4</div>
-              <div>
-                本测试分为四部分，共{{ careerType === 'HOLLAND' ? '60题' : '93题' }}。需时约18分钟，所有题目没有对错之分，请根据自己的时间情况填写
-              </div>
+              <div>本测试分为四部分，共{{ careerType === 'HOLLAND' ? '60题' : '93题' }}。需时约18分钟，所有题目没有对错之分，请根据自己的时间情况填写</div>
             </li>
           </ul>
         </el-row>
         <div style="position: relative;">
-          <el-image style="width:100%;margin-top: 20px;"
-                    :src="require('@/assets/images/career/bg_xuzhi.png')"></el-image>
-          <div style="width: 60%;position: absolute;top:40%;right:15%;color:#47C6A2;font-size: 14px;">
-            只要你是认真、真实地填写了测试问卷，那么通常情况下你都能得到一个确实和你的性格相匹配的类型。
-            希望你能从中或多或少地获得一些有益的信息。
+          <el-image style="width:100%;margin-top: 20px;" :src="require('@/assets/images/career/bg_xuzhi.png')" />
+          <div class="f-primary" style="width: 60%;position: absolute;top:40%;right:15%;font-size: 14px;">
+            只要你是认真、真实地填写了测试问卷，那么通常情况下你都能得到一个确实和你的性格相匹配的类型。 希望你能从中或多或少地获得一些有益的信息。
           </div>
         </div>
         <el-row style="margin-top: 56px;margin-bottom: 60px;">
-          <el-button style="background-color: #47C6A2;color: #ffffff;" @click="flag=true">开始测试</el-button>
-          <el-button @click="$router.push({name:careerType === 'HOLLAND'?'CareerHollandReportList': 'CareerMbtiReportList'})">
-            查询记录
-          </el-button>
+          <el-button type="primary" @click="flag=true">开始测试</el-button>
+          <el-button style="color: #979797;" @click="goHistory">查询记录</el-button>
         </el-row>
       </div>
       <div v-if="careerType === 'HOLLAND' && flag===true ">
-        <career-holland/>
+        <career-holland />
       </div>
       <div v-if="careerType === 'BMTI' && flag===true ">
-        <career-mbti/>
+        <career-mbti />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import CareerHolland from "@/views/career/components/CareerHolland";
-import CareerMbti from "@/views/career/components/CareerMbti";
+import CareerHolland from '@/views/career/components/CareerHolland'
+import CareerMbti from '@/views/career/components/CareerMbti'
+import TransferMixin from '@/components/TransferMixin'
 
 export default {
-  name: "CareerEvaDetail",
-  components: {CareerHolland, CareerMbti},
+  name: 'CareerEvaDetail',
+  components: { CareerHolland, CareerMbti },
+  mixins: [TransferMixin],
   data() {
     return {
-      flag: true
-    };
+      flag: true // 直接隐藏引导页
+    }
   },
   computed: {
     careerType() {
-      return this.$route.query.type || 'HOLLAND'
+      // 标识是从哪里进来的
+      const supports = ['HOLLAND', 'BMTI']
+      const inputType = this.prevData.type
+      return supports.includes(inputType) ? inputType : supports.first()
+    }
+  },
+  methods: {
+    goHistory() {
+      const path = this.careerType === 'BMTI' ? '/career/components/CareerMbtiReportList'
+        : '/career/components/CareerHollandReportList'
+      this.$router.push({ path })
     }
   }
-};
+}
 </script>
 
 <style scoped lang="scss">

src/views/career/plan/ProfessLib.vue

@@ -1,393 +0,0 @@
-<template>
-  <div>
-    <el-row >
-      <el-col>
-        <el-card style="height:158px;margin: 10px auto;">
-          <div style=" display: flex;justify-content: space-between;">
-          <div style="width:400px;margin-left:52px;display: inline-block;">
-            <p style="font-size:24px;font-weight: 600;color:#A6A6A6;text-transform: uppercase;margin-top:32px">Professional library</p>
-            <p style="font-weight: 600;color: #414141;font-size:24px;margin: 10px 0;">专业库</p>
-            <div style="width: 41px;height: 4px;background: #47C6A2;margin-top: 21px;"></div>
-          </div>
-           <el-image :src="require('@/assets/images/icon_pro.png')"></el-image>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col>
-        <el-card style="margin: 0 auto;" :style="height">
-          <el-input style="width:300px;float: right;bottom:15px;right:24px;"
-          placeholder="请输入搜索内容"
-          suffix-icon="el-icon-search"
-          v-model="input1">
-          </el-input>
-          <div style="margin-top:40px">
-            <el-tabs v-model="activeName" type="card" @tab-click="ZBigCategClick">
-            <el-tab-pane label="本科" name="first">
-            <div class="eltabs">
-            <div style="width:291px;height:56px;background: #47C6A2;color: #FFFFFF;line-height: 56px;font-weight: 400;font-size:14px;text-align: center">专业大类</div>
-            <el-tabs tab-position="left" v-model="BigCategName" @tab-click="BigCategClick">
-            <el-tab-pane  v-for="i in BigCategData" :key="i.id" :name="i.code">
-              <div slot="label"  >{{i.name}}</div>
-              <el-row :gutter="10">
-                <el-col :span="7">
-                  <el-menu
-                    @close="handleClose"
-                    :default-openeds="opens"
-                    :default-active="active"
-                    @select="Prodetailclck"
-                  >
-                    <el-card>
-                      <el-submenu index="1" style="background:#fff">
-                        <template slot="title">
-                          <el-image style="filter: drop-shadow(#47C6A2 85px 0);position: relative;left: -57px;" :src="require('@/assets/images/icon_zhuanye.png')"></el-image>
-                          <span slot="title" style="height:33px ;font-size: 24px;color:#47C6A2;font-weight: 600;display: inline-block;margin-top: 20px;">专业类</span>
-                          <div style="width: 41px;height: 4px;background: #47C6A2;margin-top: 25px;margin-left: 30px;"></div>
-                        </template>
-                        <el-menu-item-group>
-                          <el-menu-item :index="i.code" v-for="i in ProCategoryData" :key="i.id">{{i.name}}</el-menu-item>
-                        </el-menu-item-group>
-                      </el-submenu>
-                    </el-card>
-                  </el-menu>
-                </el-col>
-                <el-col :span="17" style="padding-right:10px;">
-                  <el-table :data="ProDetailData"  border>
-                    <el-table-column prop="name" label="专业名称" >
-                    </el-table-column>
-                    <el-table-column prop="code" label="专业代码" >
-                    </el-table-column>
-                    <el-table-column prop="id" label="专业详情" >
-                      <template slot-scope="scope">
-                        <div style="color:#FFA401;font-size: 14px;cursor:pointer;" @click="goDetail(scope.row.id)">查看>>></div>
-                      </template>
-                    </el-table-column>
-                  </el-table>
-                </el-col>
-
-              </el-row>
-            </el-tab-pane>
-            </el-tabs>
-            </div>
-            </el-tab-pane>
-              <el-tab-pane label="高职专科" name="second">
-              <div class="eltabs">
-            <div style="width:291px;height:56px;background: #47C6A2;color: #FFFFFF;line-height: 56px;font-weight: 400;font-size:14px;text-align: center">专业大类</div>
-           <el-tabs tab-position="left" v-model="ZBigCategName" @tab-click="getBigCategClick">
-            <el-tab-pane  v-for="i in ZBigCategData" :key="i.id" :name="i.code">
-              <div slot="label">{{i.name}}</div>
-              <el-row :gutter="10">
-                <el-col :span="7">
-                  <el-menu
-                    class="elmenu"
-                    @close="handleClose"
-                    :default-openeds="opens"
-                    :default-active="Zactive"
-                    @select="ZProdetailclck"
-                  >
-                    <el-card>
-                      <el-submenu index="1" style="background:#fff">
-                        <template slot="title" >
-                          <el-image style="filter: drop-shadow(#47C6A2 85px 0);position: relative;left: -57px;" :src="require('@/assets/images/icon_zhuanye.png')"></el-image>
-                          <span slot="title" style="height:33px ;font-size: 24px;color:#47C6A2;font-weight: 600;display: inline-block;margin-top: 20px;">专业类</span>
-                          <div style="width: 41px;height: 4px;background: #47C6A2;margin-top: 25px;margin-left: 30px;"></div>
-                        </template>
-                        <el-menu-item-group>
-                          <el-menu-item :index="i.code" v-for="i in ZProCategoryData" :key="i.id">{{i.name}}</el-menu-item>
-                        </el-menu-item-group>
-                      </el-submenu>
-                    </el-card>
-                  </el-menu>
-                </el-col>
-                <el-col :span="17" style="padding-right:10px;">
-                  <el-table :data="ProDetailData"  border>
-                    <el-table-column prop="name" label="专业名称" >
-                    </el-table-column>
-                    <el-table-column prop="code" label="专业代码" >
-                    </el-table-column>
-                    <el-table-column prop="id" label="专业详情" >
-                      <template slot-scope="scope">
-                        <div style="color:#FFA401;font-size: 14px;cursor:pointer;" @click="goDetail(scope.row.id)">查看>>></div>
-                      </template>
-                    </el-table-column>
-                  </el-table>
-                </el-col>
-              </el-row>
-            </el-tab-pane>
-          </el-tabs>
-          </div>
-            </el-tab-pane>
-            </el-tabs>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <!--<BottomP></BottomP>-->
-  </div>
-</template>
-<script>
- import {
-    getProfesslibData
-  } from "@/api/webApi/professlib"
-export default {
-  name:'OldProfessLib',
-  data() {
-    return {
-      input1:'',
-      opens:[],
-      height:'height:890px',
-      iscollapse:false,
-      activeName:'first',
-      active:'51',
-      BigCategName:'01',
-      type:'本科',
-      level:1,
-      code: "0101",
-      BigCategData:[],
-      ProCategoryData:[],
-      ProDetailData:[],
-      types:'高职专科',
-      levels:1,
-      codes:'',
-      Zactive:'5101',
-      ZBigCategName:'51',
-      ZBigCategData:[],
-      ZProCategoryData:[],
-      ZProDetailData:[]
-    }
-  },
-  mounted() {
-   this.getBigCategData()
-
-  },
-  methods: {
-     handleClose(keyPath) {
-       // this.$refs.menus.open(keyPath);
-          this.opens = keyPath
-		    },
-        //点击大类
-    BigCategClick(tab) {
-      this.level = 2
-      this.getBigCategData(tab.name)
-    },
-    // 点击专业类
-    Prodetailclck(data) {
-      this.level = 3
-      this.getBigCategData(data)
-    },
-    //专业大类
-      getBigCategData(data) {
-        getProfesslibData({
-          type:this.type,
-          level:this.level,
-          code:data
-        }).then(res => {
-          if(res.rows.length != 0){
-            if(res.rows[0].level == 1){
-            this.BigCategData = res.rows
-          }else if(res.rows[0].level == 2){
-            this.ProCategoryData = res.rows
-          }else if(res.rows[0].level == 3){
-             this.ProDetailData = res.rows
-          }
-          }else {
-            this.BigCategData = ''
-            this.ProCategoryData = ''
-            this.ProDetailData = ''
-          }
-
-        })
-      },
-      goDetail(id) {
-        this.$router.push(
-          {
-            path: '/career/plan/ProfessLibDetail',
-            query:
-            {
-              majorId: id
-              }
-          });
-      },
-      // 高职专科
-      getzkdata() {
-        getProfesslibData({
-            type:this.types,
-            level:this.levels,
-            code:this.codes
-        }).then(res => {
-          if(res.rows.length != 0){
-            if(res.rows[0].level == 1){
-            this.ZBigCategData = res.rows
-          }else if(res.rows[0].level == 2){
-            this.ZProCategoryData = res.rows
-          }else if(res.rows[0].level == 3){
-             this.ProDetailData = res.rows
-          }
-          }else {
-            this.ZBigCategData = []
-            this.ZProCategoryData = []
-            this.ProDetailData = []
-          }
-        })
-        },
-
-      ZBigCategClick(e) {
-        if(e.label == "高职专科") {
-          this.height = 'height:1300px;'
-          this.getzkdata()
-        }else {
-        this.height = 'height:890px;'
-        this.level = 3
-        let code = this.ProCategoryData[0].code
-        this.getBigCategData(code)
-        }
-      },
-      //点击高职大类
-      getBigCategClick(top) {
-        console.log(top);
-        this.levels = 2
-        this.codes = top.name
-        this.getzkdata()
-
-      },
-      //点击高职专业类
-      ZProdetailclck(data) {
-        this.levels = 3
-        this.codes = data
-        this.getzkdata()
-
-      }
-  },
-  watch: {
-    BigCategData(val) {
-      if(val){
-        this.level = 2
-        let code = this.BigCategData[0].code
-        this.getBigCategData(code)
-      }
-    },
-    ProCategoryData(val) {
-      if(val) {
-        this.active = val[0].code
-        this.level = 3
-        let code = this.ProCategoryData[0].code
-        this.getBigCategData(code)
-      }
-    },
-    ZBigCategData(val) {
-      if(val){
-        this.levels = 2
-         this.codes = this.ZBigCategData[0].code
-        this.getzkdata()
-
-      }
-    },
-    ZProCategoryData(val) {
-      if(val) {
-        this.Zactive = val[0].code
-        this.levels = 3
-        this.codes = this.ZProCategoryData[0].code
-        this.getzkdata()
-
-      }
-    }
-  }
-
-}
-</script>
-<style scoped>
-.el-card /deep/.el-card__body{
-padding: 0;
-
-}
-.el-card /deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav  {
-  border: none;
-
-}
-.el-card /deep/.el-tabs__item.el-tabs__item.is-active {
-  color: #fff;
-  background: #47C6A2;
-  border: none;
-
-}
-.el-card /deep/.el-tabs__item {
- background: #EEEEEE;
-}
-.el-card /deep/.el-tabs__item:hover {
-  color: #fff;
-  background: #47C6A2;
-}
-.el-card /deep/ .el-tabs--card > .el-tabs__header{
-  border-bottom: 5px solid #47C6A2;
-}
-.el-input /deep/ .el-input__inner{
-  border-radius: 30px;
-}
-
-
-/* 专业大类 */
-.eltabs /deep/ .el-tabs__header {
-  width: 290px;
-}
-.eltabs /deep/.el-tabs__item {
-  width: 240px;
-  height: 56px;
-  margin:5px 0 0 50px;
-  color: #414141;;
-  text-align: center;
-  line-height: 56px;
-  background: #FEFFF4;
-}
-.eltabs /deep/.el-menu-item {
-  padding-left:50px !important;
-}
-.eltabs /deep/.el-tabs__active-bar {
-  display: none;
-}
-.eltabs /deep/.el-tabs__item.el-tabs__item.is-active {
-  width: 240px;
-  margin-left: 50px;
-  color: #fff;
-  background: #47C6A2;
-  border: none;
-}
-.eltabs /deep/.el-tabs__item:hover {
-  width: 240px;
-  margin-left: 50px;
-  color: #fff;
-  background: #47C6A2;
-
-}
-.eltabs /deep/ .el-tabs__nav{
-  width: 290px;
-  background: #FEFFF4;
-
-}
-.el-menu /deep/ .el-submenu .el-submenu__title .el-submenu__icon-arrow {
-        visibility: hidden
-    }
-.el-menu /deep/ .el-submenu .el-submenu__title{
-  height: 120px;
-
-}
-.el-menu /deep/ .el-submenu .el-submenu__title:hover{
- background-color:#fff;
- cursor:default
-}
-.eltabs /deep/.el-image {
-  left: 30px;
-}
-.eltabs /deep/ .is-active{
-  background: #edf9f6;
-}
-.el-table /deep/.cell{
-  text-align: center;
-}
-
-/* 高职 */
-.eltabs /deep/ .el-card {
-  height: 1144px;
-}
-.elmenu /deep/ .is-active{
-  background: #edf9f6;
-}
-</style>

src/views/career/plan/ProfessLibDetail.vue

@@ -1,154 +0,0 @@
-<template>
-  <div>
-    <el-row>
-      <!--<div style="width: 1180px;height: 22px;margin: 10px auto;">-->
-        <el-card style="width: 1180px;margin: 10px auto;">
-          <el-breadcrumb separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-            <!--<el-breadcrumb-item :to="{ path: '/career/plan/index'}">生涯·志愿</el-breadcrumb-item>-->
-            <el-breadcrumb-item :to="{ path: '/career/plan/ProfessLib'}">专业库</el-breadcrumb-item>
-            <el-breadcrumb-item>专业库详情</el-breadcrumb-item>
-          </el-breadcrumb>
-        </el-card>
-      <!--</div>-->
-      <el-col >
-        <div style="width: 1180px;height: 200px;margin: 0 auto;background: #F0F3FC;margin-bottom:32px">
-        <div style="width: 280px;height: 200px;display: inline-block;background: #47C6A2;opacity: 0.5;text-align: center; line-height: 200px;">
-          <span style="display: inline-block;width:260px;height:200px;font-size: 40px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: #525252;line-height: 55px;">
-            {{ProfesslibDetailsData.name}}
-          </span>
-        </div>
-        <div style="width:600px;height:200px;display: inline-block;margin-left:20px;position: absolute;line-height: 35px;">
-          <p style="top:20px">专业代码: <span>{{ProfesslibDetailsData.code}}</span></p>
-          <p style="top:25px">专业类别: <span>{{ProfesslibDetailsData.typeName}}</span></p>
-          <p style="top:30px">专业层次: <span>{{ProfesslibDetailsData.type}}</span></p>
-        </div>
-        </div>
-      </el-col>
-      <el-col>
-        <el-card class="main">
-          <div class="main_item">
-          <div class="title_left">
-            <span style="margin:50px">专业详情</span>
-            <div class="Triangle"></div>
-          </div>
-          <span class="title_right">Professional profile</span>
-          </div>
-            <div v-html="ProfesslibDetailsData.zyxq"></div>
-        </el-card>
-      </el-col>
-      <el-col>
-        <el-card class="main">
-          <div class="main_item">
-          <div class="title_left">
-            <span style="margin:50px">素质要求</span>
-            <div class="Triangle"></div>
-          </div>
-          <span class="title_right">Quality requirements</span>
-          </div>
-          <div v-html="ProfesslibDetailsData.zytz"></div>
-        </el-card>
-      </el-col>
-       <el-col>
-        <el-card class="main">
-          <div class="main_item">
-          <div class="title_left">
-            <span style="margin:50px">就业方向</span>
-            <div class="Triangle"></div>
-          </div>
-          <span class="title_right">Employment direction</span>
-          </div>
-          <div v-html="ProfesslibDetailsData.jyjx"></div>
-        </el-card>
-      </el-col>
-       <el-col>
-        <el-card class="main">
-          <div class="main_item">
-          <div class="title_left">
-            <span style="margin:50px">开设院校</span>
-            <div class="Triangle"></div>
-          </div>
-          <span class="title_right">universities and colleges</span>
-          </div>
-          <div style="width:1180px;">
-            <div style="text-align: justify;display: inline-block;" v-for="i in ProfesslibDetailsData.uiversitys" :key="i.id">
-            <span style=" padding: 10px 20px;display: inline-block; background-color: #eeee;margin: 5px;">{{i.name}}</span>
-          </div>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <!--<BottomP></BottomP>-->
-  </div>
-</template>
-<script>
-import {
-    getProfesslibDetails
-  } from "@/api/webApi/professlib"
-export default {
-  name:'ProfessLibDetails',
-  data() {
-    return {
-      majorId:'',
-      ProfesslibDetailsData:[],
-    }
-  },
-  mounted() {
-   this.majorId = this.$route.query.majorId
-   this.getProfesslibDetailsData()
-  },
-  methods: {
-    getProfesslibDetailsData() {
-      getProfesslibDetails(
-     {
-       majorId:this.majorId
-       })
-       .then(res =>{
-         this.ProfesslibDetailsData = res.data
-    })
-    }
-  }
-}
-</script>
-<style scoped>
-p{
-position: relative;
-}
-.Triangle {
-    width: 10px;
-    height: 0;
-    border-left: 19px solid transparent;
-    border-right: 50px solid transparent;
-    border-bottom: 35px solid #fff;
-    transform:rotate(56deg);
-    position: relative;
-    top: -53px;
-    left: 243px;
-}
-.main{
-  width:1180px;
-  margin: 0 auto;
-  margin-bottom:20px
-}
-.main_item {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom:20px;
-}
-.title_left{
-  width: 280px;
-  height: 56px;
-  display: inline-block;
-  line-height: 56px;
-  color: #47C6A2;
-  font-size:16px;
-  font-weight: 600;
-  background: #F0F3FC;
-}
-.title_right {
-  font-size:36px;
-  font-weight: 600;
-  color: #47C6A2;
-  text-transform: uppercase
-}
-</style>

src/views/career/plan/UniversitiesColleges.vue

@@ -1,90 +0,0 @@
-<template>
-  <div ref="UniversitiesColleges" class="app-container" >
-    <el-card :style="{'background-image':backimg}" style="padding:30px;margin:10px 0;background-color:white;background-repeat: no-repeat;background-position: bottom right;">
-      <p style="color:#A6A6A6;font-size:24px;font-weight:bold;">UNIVERSITIES AND COLLECGES</p>
-      <p style="color:#414141;font-size:24px;font-weight:bold;">院校库</p>
-      <hr class="layui-bg-orange" style="width:40px;height:4px;margin-top:10px;" />
-    </el-card>
-    <el-card style="background-color: #ffffff;font-size: 14px;padding:5px;">
-      <div slot="header" class="radioInput" >
-        <span class="radioTitle" :class="filter_type == 'all'?'active' : ''" @click="filter_type= 'all'">全部院校</span>
-        <span class="radioTitle" :class="filter_type == 'top'?'active' : ''" @click="filter_type= 'top'">大学排名</span>
-      </div>
-      <keep-alive>
-        <all-university v-if="filter_type == 'all'"></all-university>
-      </keep-alive>
-      <keep-alive>
-        <rank-university v-if="filter_type == 'top'"></rank-university>
-      </keep-alive>
-    </el-card>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-import AllUniversity from '@/views/career/plan/compoents/AllUniversity';
-import RankUniversity from '@/views/career/plan/compoents/RankUniversity';
-import MxTransferMixin from "@/components/mx-transfer-mixin";
-export default {
-  name: "UniversitiesColleges",
-  components:{
-    AllUniversity,
-    RankUniversity
-  },
-  mixins: [MxTransferMixin],
-  data() {
-    return {
-      backimg: 'url(' + require('@/assets/images/career/icon_colleges.png') + ')',
-      filter_type:'all'
-    }
-  },
-  computed: {
-    ...mapState({ theme: state => state.settings.theme }),
-  },
-  watch: {
-    theme: {
-      immediate: true,
-      handler(val) {
-        this.$nextTick(() => {
-          this.$refs.UniversitiesColleges.style.setProperty('--themeColor', val)
-        })
-      }
-    },
-  },
-  created() {
-    const validTypes = ['all', 'top']
-    const queryType = this.prevData.type
-    if (validTypes.includes(queryType)) this.filter_type = queryType
-  },
-  methods: {
-
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.layui-bg-orange {
-  background-color: var(--themeColor);
-  margin-left: 0;
-}
-.radioInput{
-  background-color: #ffffff;
-  padding:5px;
-  padding-left: 30px;
-  .radioTitle{
-    cursor: pointer;
-    display: inline-block;
-    width: 80px;
-    font-size: 14px;
-    padding: 5px 10px ;
-    text-align: center;
-    &.active{
-      color: #fff;
-      border-radius: 4px ;
-      border: none;
-      font-weight: 400;
-      background: #42b983;
-    }
-  }
-}
-</style>

src/views/career/plan/UniversitiesDetail.vue

@@ -1,476 +0,0 @@
-<template>
-  <div ref="universityDetail" id="universityDetail" class="app-container" v-loading="loading">
-    <el-row :gutter="10" class="mt20 mb30">
-      <el-col :span="12" class="fx-row ai-center">
-        <div class="mr30">
-          <img class="pointer" @click="toWindow(baseInfo.url)" width="72px" height="72px" :src="baseInfo.logo" alt=""/>
-        </div>
-        <div>
-          <span class="f28 ">{{ baseInfo.name }}</span>
-          <div class="mt5 mb5">
-            <el-tag class="mr5" size="mini" v-for="item in baseInfo.features ? baseInfo.features.split(',') : []">
-              {{ item }}
-            </el-tag>
-          </div>
-          <span class="f14 f-666 "
-          >{{ `${baseInfo.location} ${baseInfo.cityName} ${baseInfo.type} / ${baseInfo.natureTypeCN} / ${baseInfo.managerType} ` }}</span>
-        </div>
-      </el-col>
-      <el-col :span="12" class="text-right">
-        <el-button plain round @click="$router.go(-1)">返回</el-button>
-      </el-col>
-    </el-row>
-    <div>
-      <div class="tabs-wrap mb20">
-        <span class="tabs-item" @click="tabActive = 0" :class="{'bg-primary':tabActive == 0}">院校概况</span>
-        <span class="tabs-item" @click="tabActive = 1" :class="{'bg-primary':tabActive == 1}">招生简章</span>
-        <span class="tabs-item" @click="tabActive = 2" :class="{'bg-primary':tabActive == 2}">院校风采</span>
-      </div>
-      <div v-if="tabActive == 0">
-        <el-row class="fx-row">
-          <el-col :span="8">
-            <img  :src="baseInfo.bannerUrl" width="100%" alt="">
-          </el-col>
-          <el-col :span="16">
-            <div class="f14 f-666 text-center fx-row">
-              <el-col :span="24" v-for="item in iconList" v-if="Array.isArray(item.value) ? item.value.length : item.value">
-                  <div v-if="Array.isArray(item.value)">
-                    <img width="50px" :src="item.img" :alt="item.desc">
-                    <el-popover
-                      placement="bottom"
-                      trigger="hover"
-                    >
-                      <div>
-                        <p v-for="i in item.value">
-                          {{i.type}}  {{i.number}}个
-                        </p>
-                      </div>
-                      <p class="mt10" slot="reference">
-                        {{ `${item.value[0] ? item.value[0].number : ''} / ${item.value[1] ? item.value[1].number : ''} ` }}
-                        <i class="el-icon-question"></i>
-                      </p>
-                    </el-popover>
-                  </div>
-                  <div v-else>
-                    <img width="50px" :src="item.img" :alt="item.desc">
-                    <p class="mt10">{{ item.value }}</p>
-                  </div>
-              </el-col>
-            </div>
-            <div class="mt10  pl10 f14">
-                <span class="info-tips"> {{
-                    baseInfo.introduction
-                  }}</span>
-              <p class="text-right mr10">
-                <el-button type="text" @click="dialogVisible = true">全部</el-button>
-              </p>
-            </div>
-          </el-col>
-        </el-row>
-        <div style="width:70%">
-          <div class="mt20" v-if="formatProfessions.length">
-            <p class="format-tit">特色专业</p>
-            <mx-table border :propDefines="professionsProps" :rows="formatProfessions">
-              <template #tmp="{row}">
-                <p class="major-wrap">
-                  <a v-for="item in row.majors" @click="toMajorDetail(item.code)">{{ item.name }}</a>
-                </p>
-              </template>
-            </mx-table>
-          </div>
-          <div class="mt20" v-if="Object.keys(subjects).length">
-            <p class="format-tit">重点学科</p>
-            <mx-table border :prop-defines="keySubjectProp" :rows="subjects.keySubjects">
-              <template #tmp="{row}">
-                <p class="major-wrap">
-                  <span v-for="item in row.subjects">{{ item }}</span>
-                </p>
-              </template>
-            </mx-table>
-          </div>
-          <div class="mt20" v-if="Object.keys(activeSyl).length">
-            <p class="format-tit">双一流学科</p>
-            <el-select v-model="activeSylId" placeholder="placeholder">
-              <el-option
-                v-for="item in subjects.sylSubjectsGroup"
-                :key="item.id"
-                :label="item.evaluations"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <mx-table border class="mt10" :prop-defines="activeSyl.col" :rows="activeSyl.row">
-              <template #tmp="{row}">
-                <p class="major-wrap">
-                  <span v-for="item in row.subjects">{{ item }}</span>
-                </p>
-              </template>
-            </mx-table>
-          </div>
-          <div class="mt20" v-if="subjectevaluates.length">
-            <p class="format-tit">学科评估</p>
-            <el-select v-model="evaluate_type" placeholder="placeholder">
-              <el-option
-                v-for="item in evaluateTypes"
-                :key="item.dictValue"
-                :label="item.dictLabel"
-                :value="item.dictValue"
-              >
-              </el-option>
-            </el-select>
-            <mx-table border class="mt10" :prop-defines="activeEvaluate.col" :rows="activeEvaluate.row">
-              <template #level="{row}">
-                <p class="major-wrap" v-if="row.level.length">
-                  <span v-for="item in row.level">{{ item.name }}{{ item.level }}</span>
-                </p>
-                <p v-else>
-                  暂无数据
-                </p>
-              </template>
-            </mx-table>
-          </div>
-          <div class="mt20">
-            <p class="format-tit">院系设置</p>
-            <mx-table border :propDefines="collegeProps" :rows="departments">
-              <template #tmp="{row}">
-                <p class="major-wrap">
-                  <a @click="toMajorDetail(item.code)" v-for="item in row.departmentMajor">{{ item.name }}</a>
-                </p>
-              </template>
-            </mx-table>
-          </div>
-          <div class="mt20" v-if="employmentreports.length">
-            <p class="format-tit">就业报告</p>
-            <div class="list f-333">
-                <div class="list-item" v-for="item in employmentreports">
-                  <span class="url pointer" @click="toWindow(item.webSite)">{{item.title}}</span>
-                  <span class="url pointer" @click="toWindow(item.url)" v-if="item.url"><i class="el-icon-edit mr5" ></i>在线预览</span>
-                  <span class="pointer" v-if="item.url"  @click="toWindow(item.url)">下载附件</span>
-                </div>
-            </div>
-          </div>
-
-        </div>
-
-      </div>
-      <!--  招生简章-->
-      <keep-alive>
-        <enroll-list :code="code" v-if="tabActive == 1"></enroll-list>
-      </keep-alive>
-      <!--  院校风采-->
-      <keep-alive>
-        <university-style :code="code" v-if="tabActive == 2"></university-style>
-      </keep-alive>
-
-    </div>
-    <el-dialog
-      :visible.sync="dialogVisible"
-      width="70%"
-    >
-      <span class="f20 f-666">{{ baseInfo.name }}院校介绍</span>
-      <div>
-        {{ baseInfo.introduction }}
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import EnrollList from './compoents/EnrollList'
-import UniversityStyle from './compoents/UniversityStyle'
-import { evaluateType, selectUniversityDetail } from '@/api/webApi/career-course'
-import transferMixin from '@/components/mx-transfer-mixin'
-
-export default {
-  name: 'UniversityDetail',
-  mixins: [transferMixin],
-  components: { EnrollList, UniversityStyle },
-  data() {
-    return {
-      tabActive: 0,
-      baseInfo: '',
-      departments: [],
-      dialogVisible: false,
-      professions: {},
-      subjectevaluates: [],
-      evaluateTypes: [],
-      evaluate_type: '',
-      employmentreports:[],
-      loading:false,
-      professionsProps: {
-        level: {
-          label: '专业层次',
-          width: '200'
-        },
-        count: {
-          label: '数量',
-          width: '100'
-        },
-        majors: {
-          label: '专业',
-          slot: 'tmp',
-          align: 'left'
-        }
-      },
-      subjects: '',
-      code: '',
-      activeSylId: '',
-      collegeProps: {
-        name: {
-          label: '学院',
-          width: '200'
-        },
-        departmentMajor: {
-          label: '包含专业',
-          slot: 'tmp',
-          align: 'left'
-        }
-      },
-      keySubjectProp: {
-        typeName: {
-          label: '类别',
-          width: '100'
-        },
-        subjects: {
-          label: '专业',
-          slot: 'tmp',
-          align: 'left'
-        },
-        category: {
-          label: '学科类别',
-          width: '100'
-        }
-      }
-    }
-  },
-  created() {
-    this.code = this.prevData.code
-    // this.getHit()
-    this.getDetail()
-    this.getEvaluateType()
-  },
-  computed: {
-    formatProfessions() {
-      const arr = []
-      for (const key in this.professions) {
-        console.log(key)
-        let item = {
-          level: key == 'country' ? '国家级' : '省级(直辖市)',
-          count: this.professions[key].length,
-          majors: this.professions[key]
-        }
-        arr.push(item)
-      }
-      return arr
-    },
-    activeEvaluate() {
-      const currentRow = this.subjectevaluates.filter(item => {
-        return item.extTypeId == this.evaluate_type
-      })
-      const row = {
-        count: currentRow.length || '-',
-        level: currentRow
-      }
-      return {
-        row: [row],
-        col: {
-          count: {
-            label: '数量',
-            width: '100'
-          },
-          level: {
-            label: ' 专业评级',
-            align: 'left',
-            slot: 'level'
-          }
-        }
-      }
-    },
-    activeSyl() {
-      if (!this.subjects.hasOwnProperty('sylSubjectsGroup')) return {}
-      // const col = this.
-      const row = this.subjects.sylSubjectsGroup.find(item => {
-        return item.id == this.activeSylId
-      })
-      return {
-        col: {
-          subjectCount: {
-            label: '数量',
-            width: 100
-          },
-          subjects: {
-            label: '学科',
-            slot: 'tmp',
-            align: 'left'
-          },
-          typeName: {
-            label: '类别',
-            width: '100'
-          }
-        },
-        row: [row]
-      }
-    },
-    iconList() {
-      const baseInfo = this.baseInfo
-      return [
-        {
-          img: require('@/assets/images/career/year.png'),
-          value: `${baseInfo.createdYear}年`,
-          desc: '创办时间'
-        },
-        {
-          img: require('@/assets/images/career/type.png'),
-          value: baseInfo.natureTypeCN,
-          desc: '办学类型'
-        },
-        {
-          img: require('@/assets/images/career/xingzhi.png'),
-          value: baseInfo.type,
-          desc: '院校类型'
-        },
-        {
-          img: require('@/assets/images/career/bumen.png'),
-          value: baseInfo.managerType,
-          desc: '所属部门'
-        },
-        {
-          img: require('@/assets/images/career/xueli.png'),
-          value: baseInfo.level,
-          desc: '学历层次'
-        },
-        {
-          img: require('@/assets/images/career/location.png'),
-          value: `${baseInfo.location} ${baseInfo.cityName}`,
-          desc: '所处地'
-        },
-        {
-          img: require('@/assets/images/career/shuoshi.png'),
-          value: baseInfo.pointsOfShuo,
-          desc: '硕士点',
-          type: 'arr'
-        },
-        {
-          img: require('@/assets/images/career/boshi.png'),
-          value: baseInfo.pointsOfBo,
-          desc: '博士点',
-          type: 'arr'
-        }
-      ]
-    }
-  },
-  watch: {},
-  methods: {
-    toWindow(url) {
-      window.open(url,'_blank')
-    },
-    getEvaluateType() {
-      evaluateType({ code: this.code }).then(res => {
-        this.evaluateTypes = res.data
-        this.evaluate_type = res.data[0].dictValue
-        console.log(res)
-      })
-    },
-    toMajorDetail(code) {
-      this.$router.push({ path: '/career/plan/MajorDetail', query: { code: code } })
-    },
-    // getHit() {
-    //   saveUniversitiesHits({ code: this.code }).then(res => {
-    //     console.log(res)
-    //   })
-    // },
-    getDetail() {
-      this.loading = true
-      selectUniversityDetail({ code: this.code }).then(res => {
-        this.baseInfo = res.data.baseInfo
-        this.departments = res.data.departments
-        this.professions = res.data.professions
-        this.subjects = res.data.subjects
-        this.subjectevaluates = res.data.subjectevaluates
-        this.employmentreports =res.data.employmentreports
-        this.activeSylId = this.subjects.sylSubjectsGroup ? this.subjects.sylSubjectsGroup[0].id : ''
-        console.log(res)
-      }).finally(_=>{
-        this.loading = false
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-#universityDetail {
-  .tabs-wrap {
-    border-bottom: 1px solid #42b983;
-    height: 40px;
-
-    .tabs-item {
-      cursor: pointer;
-      padding: 0 33px;
-      border-radius: 4px 4px 0 0;
-      display: inline-block;
-      line-height: 40px;
-
-      &:hover {
-        color: #47C6A2;
-      }
-
-      &.bg-primary {
-        background: #47C6A2;
-        color: white;
-      }
-    }
-  }
-
-  .format-tit {
-    border-left: 4px solid #47C6A2;
-    padding-left: 10px;
-    margin-bottom: 20px;
-    font-size: 20px;
-  }
-
-  .info-tips {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-    word-wrap: break-word;
-  }
-  .list-item{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid #f2f2f2;
-    font-size: 14px;
-    padding-bottom: 10px;
-    .url:hover{
-      color: #42b983;
-    }
-  }
-  .major-wrap {
-    text-align: left;
-
-    span {
-      display: inline-block;
-      margin-right: 20px;
-      margin-top: 10px;
-      margin-bottom: 10px;
-    }
-
-    a {
-      display: inline-block;
-      margin-right: 20px;
-      margin-top: 10px;
-      margin-bottom: 10px;
-
-      &:hover {
-        color: #42b983;
-      }
-    }
-  }
-}
-</style>

src/views/career/plan/compoents/EnrollList.vue

@@ -1,113 +0,0 @@
-<template>
-   <div >
-     <div v-if="!showDetail" v-loading="loading">
-       <mx-search-group v-model="title" :span="8" placeholder="请输入内容" @search="getEnrollBrochure">
-         <div class="f-666 f14 ml10">
-           共 <span class="f-primary">{{ total }}</span>  条
-         </div> </mx-search-group>
-       <div class="guide-list" v-if="enrollList.length" >
-         <el-row class="guid-item" v-for="item in enrollList">
-           <el-col :span="20">
-             <a class="f-333 f16 text-ellipsis" @click="toDetail(item)">
-               <span>{{ item.title }}</span>
-             </a>
-           </el-col>
-           <el-col class="f-666 f14" :span="2">{{ item.hits }} 次浏览</el-col>
-           <el-col class="f-666 f14" :span="2">{{ item.createTime.split(' ')[0] }}</el-col>
-         </el-row>
-         <pagination v-if="total > 0" class="mt10" :total="total"  :autoScroll="false" @pagination="onChangePage"
-                     :page.sync="pageForm.pageNum"
-                     :limit.sync="pageForm.pageSize"
-         ></pagination>
-       </div>
-       <evaluation-empty class="mt20" v-else shadow title="暂无数据"></evaluation-empty>
-     </div>
-     <div v-else>
-       <div class="jc-between fx-row ai-center mb20">
-         <p class="f28 f-333 text-ellipsis">{{detailInfo.title}}</p>
-         <el-button plain round @click="showDetail= false">返回列表</el-button>
-       </div>
-       <div class="jc-between fx-row ai-center mb20 f-999 f14">
-         <div class="left">
-           <span class="mr30">来源：{{detailInfo.collegeName}}</span>
-           <span class="mr30">{{ detailInfo.hits }} 次浏览 </span>
-           <span>发布时间：{{ detailInfo.createTime.split(' ')[0] }}</span>
-         </div>
-         <div class="right">
-           <i class="iconfont icon-zitisuoxiao "></i>
-           <i class="iconfont icon-zitifangda"></i>
-         </div>
-       </div>
-       <div v-html="detailInfo.content">
-
-       </div>
-     </div>
-   </div>
-</template>
-
-<script>
-import MxSearchGroup from '@/components/MxSearch/mx-search-group'
-import { enrollBrochure, saveEnrollBrochureHits } from '@/api/webApi/career-course'
-export default {
-  components: { MxSearchGroup },
-  props:{
-    code:{
-      type:String || Number,
-      default:'',
-    }
-  },
-  created() {
-    this.getEnrollBrochure()
-  },
-  data() {
-    return{
-      loading:false,
-      pageForm:{
-        pageSize:999,
-        pageNum:1,
-      },
-      title:'',
-      enrollList:[],
-      total:0,
-      showDetail:false,
-      detailInfo:{}
-    }
-  },
-  methods:{
-    getEnrollBrochure(){
-      this.loading = true
-      enrollBrochure({code:this.code,...this.pageForm}).then(res =>{
-        this.total = res.total
-        this.enrollList =  res.rows
-      }).finally(()=>{
-        this.loading = false
-      })
-    },
-    saveEnrollBrochureHits(id) {
-      saveEnrollBrochureHits({id:id}).then(res =>{
-        console.log(res)
-      })
-    },
-    toDetail(row) {
-      this.detailInfo =row
-      this.saveEnrollBrochureHits(row.id)
-      this.showDetail= true
-    },
-    onChangePage(page) {
-      this.pageForm.pageSize = page.limit
-      this.pageForm.pageNum = page.page
-      this.getEnrollBrochure()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.guid-item{
-  border-bottom: 1px solid #f2f2f2;
-  line-height: 60px;
-}
-.guid-item a :hover{
-  color: #42b983;
-}
-</style>

src/views/career/plan/compoents/RankUniversity.vue

@@ -1,220 +0,0 @@
-<template>
-  <div  v-loading="loading">
-    <div class="filter">
-      <el-row class="radioInput">
-        <div>
-          <span class="radiaTitle">排名类型:</span>
-        </div>
-        <el-radio-group v-model="filter_form.type">
-          <el-radio-button v-for="item in filter_list.types" :key="item" :label="item" style="margin-bottom:10px"
-          ></el-radio-button>
-        </el-radio-group>
-      </el-row>
-      <el-row class="radioInput">
-        <div>
-          <span class="radiaTitle">排名年份:</span>
-        </div>
-        <el-radio-group v-model="filter_form.year">
-          <el-radio-button v-for="item in filter_list.years" :key="item" :label="item" style="margin-bottom:10px"
-          ></el-radio-button>
-        </el-radio-group>
-      </el-row>
-      <mx-search-group justify="end"  v-model="collegeName" @search="clickSuffix">
-        <p>共 <span class="f-primary">{{pageForm.total}}</span> 条</p>
-      </mx-search-group>
-    </div>
-    <el-row class="mt10 ">
-      <div v-if="pageForm.total > 0">
-        <div class="list-wrap pl30">
-          <div class="list-item fx-row mb30" v-for="item in collegeList">
-            <div class="index">{{item.ranking}}</div>
-            <div class="img" >
-              <img style="width: 100%;height: 100%" :src="item.universities.logo" alt="">
-            </div>
-            <div class="info-main ml20">
-              <div class="college_name pointer f-333 f20 mb5" @click="toDetail(item)">{{item.collegeName}}</div>
-              <div class="tags" v-if="item.universities.features">
-                <span class="mr5 el-tag el-tag--info el-tag--plain" v-for="feature in item.universities.features.split(',')">{{ feature }}</span>
-              </div>
-              <div class="college-desc mt5 f14 f-666">
-                <p>{{`${item.universities.location} ${item.universities.cityName} ${item.universities.type} / ${item.universities.natureTypeCN} / ${item.universities.managerType} `}}</p>
-              </div>
-            </div>
-            <div class="heat f12 f-666">
-              <p>综合指数</p>
-              <p class="mt3">{{item.universities.comScore }}</p>
-            </div>
-            <div class="heat f12  f-666">
-              <p>热度</p>
-              <p class="mt3">{{ (item.universities.hits/10000).toFixed(1) }}万</p>
-            </div>
-          </div>
-        </div>
-        <pagination class="mt10" :total="pageForm.total" :autoScroll="false" @pagination="onChangePage"
-                    :page.sync="pageForm.pageNum"
-                    :limit.sync="pageForm.pageSize"
-        ></pagination>
-      </div>
-
-      <evaluation-empty v-else shadow title="暂无数据"></evaluation-empty>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-import { rankingFilter,universitiesRanking } from '@/api/webApi/career-course'
-import MxSearchGroup from '@/components/MxSearch/mx-search-group'
-import transferMixin from '@/components/mx-transfer-mixin'
-export default {
-  mixins:[transferMixin],
-  components: { MxSearchGroup },
-  data() {
-    return {
-      filter_form:{
-        type:'',
-        year:'',
-        collegeName:''
-      },
-      loading:false,
-      pageForm:{
-        pageSize:10,
-        pageNum:1,
-        total:0
-      },
-      collegeName: '',
-      filter_list:{},
-      collegeList:[],
-    }
-  },
-  created() {
-    this.getRankingFilter()
-  },
-  watch: {
-    filter_form:{
-      immediate:false,
-      deep:true,
-      handler(val) {
-        console.log(111111111)
-        console.log(val)
-        this.getUniversitiesRanking()
-      }
-    },
-  },
-  methods: {
-    clickSuffix() {
-      this.filter_form.collegeName = this.collegeName
-    },
-    getRankingFilter() {
-       rankingFilter().then(res =>{
-        this.filter_list = res.data
-        this.filter_form.type = res.data.types[0]
-        this.filter_form.year = res.data.years[0]
-        console.log(res)
-      })
-    },
-    getUniversitiesRanking(){
-      this.loading = true
-      universitiesRanking({...this.filter_form, pageNum:this.pageForm.pageNum,
-        pageSize:this.pageForm.pageSize,}).then(res =>{
-          this.collegeList  =res.rows
-          this.pageForm.total = res.total
-        console.log(res)
-      }).finally(_=>{
-        this.loading = false
-      })
-    },
-    toDetail(item) {
-      console.log(item)
-      this.transferTo('/career/plan/UniversityDetail',{code:item.collegeCode})
-    },
-    onChangePage(page) {
-      this.pageForm.pageSize = page.limit
-      this.pageForm.pageNum = page.page
-      this.getUniversitiesRanking()
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.heat{
-  width: 200px;
-  height: 72px;
-  padding-top: 22px;
-  color: #666;
-}
-.info-main{
-  width: 400px;
-}
-.index{
-width: 50px;
-flex-shrink: 0;
-text-align: center;
-  align-self: center;}
-.img{
-  flex-shrink: 0;
-  width: 72px;
-  height: 72px;
-  align-self: center;
-}
-.tags {
-  .el-tag{
-    height: 16px;
-    line-height: 16px;
-    font-size: 12px;
-    color: #909399;
-  }
-}
-.radioInput ::v-deep {
-  display: flex;
-
-  .el-radio-button .el-radio-button__inner {
-    border-radius: 4px !important;
-    border: none;
-    padding: 5px 10px !important;
-    font-weight: 400;
-    font-family: PingFangSC-Regular, PingFang SC;
-  }
-
-  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
-    box-shadow: none;
-  }
-
-  .radiaTitle {
-    display: inline-block;
-    width: 80px;
-    font-size: 14px;
-    text-align: right;
-    margin-top: 2px;
-    margin-right: 10px;
-  }
-}.radioInput ::v-deep {
-   display: flex;
-
-   .el-radio-button .el-radio-button__inner {
-     border-radius: 4px !important;
-     border: none;
-     padding: 5px 10px !important;
-     font-weight: 400;
-     font-family: PingFangSC-Regular, PingFang SC;
-   }
-
-   .el-radio-button__orig-radio:checked + .el-radio-button__inner {
-     box-shadow: none;
-   }
-
-   .radiaTitle {
-     display: inline-block;
-     width: 80px;
-     font-size: 14px;
-     text-align: right;
-     margin-top: 2px;
-     margin-right: 10px;
-   }
- }
-.radioInput ::v-deep {
-  background-color: #ffffff;font-size: 14px;padding:5px;
-}
-
-</style>

src/views/career/plan/compoents/AllUniversity.vue → src/views/career/plan/components/AllUniversity.vue

@@ -1,21 +1,24 @@
 <template>
   <div v-loading="loading">
-    <filter-form :filter="filter_form" multiple></filter-form>
-    <mx-search-group justify="end" v-model="collegeName" @search="clickSuffix">
+    <filter-form :filter="filter_form" multiple />
+    <mx-search-group v-model="collegeName" justify="end" @search="clickSuffix">
       <p>共 <span class="f-primary">{{ pageForm.total }}</span> 条</p>
     </mx-search-group>
     <el-row class="mt10 ">
       <div v-if="pageForm.total > 0">
         <div class="list-wrap pl30">
-          <div class="fx-row ai-cen mb30" v-for="item in collegeList">
-            <div class="img">
+          <div v-for="(item, index) in collegeList" :key="index" class="list-item fx-row mb30">
+            <div class="img pointer" @click="toDetail(item)">
               <img style="width: 100%;height: 100%" :src="item.logo" alt="">
             </div>
-            <div class="info-main ml20">
+            <div class="info ml20">
               <div class="college_name pointer f-333 f20 mb5" @click="toDetail(item)">{{ item.name }}</div>
-              <div class="tags" v-if="item.features">
-                <span class="mr5 el-tag el-tag--info el-tag--plain"
-                      v-for="feature in item.features.split(',')">{{ feature }}</span>
+              <div v-if="item.features" class="tags">
+                <span
+                  v-for="feature in item.features.split(',')"
+                  :key="feature"
+                  class="mr5 el-tag el-tag--info el-tag--plain"
+                >{{ feature }}</span>
               </div>
               <div class="college-desc mt5 f14 f-666">
                 <p>
@@ -32,12 +35,16 @@
             </div>
           </div>
         </div>
-        <pagination class="mt10" :total="pageForm.total" :autoScroll="false" @pagination="onChangePage"
-                    :page.sync="pageForm.pageNum"
-                    :limit.sync="pageForm.pageSize"
-        ></pagination>
+        <pagination
+          class="mt10"
+          :total="pageForm.total"
+          :auto-scroll="false"
+          :page.sync="pageForm.pageNum"
+          :limit.sync="pageForm.pageSize"
+          @pagination="onChangePage"
+        />
       </div>
-      <evaluation-empty v-else shadow title="暂无数据"></evaluation-empty>
+      <evaluation-empty v-else title="暂无数据" />
     </el-row>
   </div>
 </template>
@@ -49,8 +56,8 @@ import MxSearchGroup from '@/components/MxSearch/mx-search-group'
 import transferMixin from '@/components/mx-transfer-mixin'
 
 export default {
-  mixins: [transferMixin],
   components: { MxSearchGroup, FilterForm },
+  mixins: [transferMixin],
   data() {
     return {
       filter_form: {
@@ -124,7 +131,7 @@ export default {
   color: #666;
 }
 
-.info-main {
+.info {
   width: 400px;
 }
 
@@ -143,5 +150,4 @@ export default {
   }
 }
 
-
 </style>

src/views/career/plan/components/EnrollList.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div v-if="!showDetail" v-loading="loading">
+      <mx-search-group v-model="pageForm.title" :span="8" placeholder="请输入内容" @search="getEnrollBrochure">
+        <div class="f-666 f14 ml10">共 <span class="f-primary">{{ total }}</span> 条</div>
+      </mx-search-group>
+      <div v-if="enrollList.length" class="guide-list mt20">
+        <el-row v-for="item in enrollList" :key="item.id" class="guid-item">
+          <el-col :span="20">
+            <a class="f-333 f16 text-ellipsis" @click="toDetail(item)">
+              <span>{{ item.title }}</span>
+            </a>
+          </el-col>
+          <el-col class="f-666 f14" :span="4">
+            <div class="fx-row fx-bet-cen f-666 f14">
+              <span>{{ item.hits }} 次浏览</span>
+              <span>{{ item.createTime.split(' ')[0] }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <pagination
+          v-if="total > 0"
+          class="mt10"
+          :total="total"
+          :auto-scroll="false"
+          :page.sync="pageForm.pageNum"
+          :limit.sync="pageForm.pageSize"
+          @pagination="onChangePage"
+        />
+      </div>
+      <evaluation-empty v-else class="mt20" title="暂无数据" />
+    </div>
+    <div v-else>
+      <div class="jc-between fx-row ai-center mb20">
+        <p class="f28 f-333 text-ellipsis">{{ detailInfo.title }}</p>
+        <el-button type="primary" size="mini" plain round @click="showDetail= false">返回列表</el-button>
+      </div>
+      <div class="jc-between fx-row ai-center mb20 f-999 f14">
+        <div class="left">
+          <span class="mr30">来源：{{ detailInfo.collegeName }}</span>
+          <span class="mr30">{{ detailInfo.hits }} 次浏览 </span>
+          <span>发布时间：{{ detailInfo.createTime.split(' ')[0] }}</span>
+        </div>
+        <div class="right">
+          <i class="iconfont icon-zitisuoxiao " />
+          <i class="iconfont icon-zitifangda" />
+        </div>
+      </div>
+      <div v-html="detailInfo.content" />
+    </div>
+  </div>
+</template>
+
+<script>
+import MxSearchGroup from '@/components/MxSearch/mx-search-group'
+import { enrollBrochure, saveEnrollBrochureHits } from '@/api/webApi/career-course'
+
+export default {
+  components: { MxSearchGroup },
+  props: {
+    code: {
+      type: String || Number,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      pageForm: {
+        pageSize: 999,
+        pageNum: 1,
+        title: ''
+      },
+      enrollList: [],
+      total: 0,
+      showDetail: false,
+      detailInfo: {}
+    }
+  },
+  created() {
+    this.getEnrollBrochure()
+  },
+  methods: {
+    getEnrollBrochure() {
+      this.loading = true
+      enrollBrochure({ code: this.code, ...this.pageForm }).then(res => {
+        this.total = res.total
+        this.enrollList = res.rows
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    saveEnrollBrochureHits(id) {
+      saveEnrollBrochureHits({ id: id }).then(res => {
+        console.log(res)
+      })
+    },
+    toDetail(row) {
+      this.detailInfo = row
+      this.saveEnrollBrochureHits(row.id)
+      this.showDetail = true
+    },
+    onChangePage(page) {
+      this.pageForm.pageSize = page.limit
+      this.pageForm.pageNum = page.page
+      this.getEnrollBrochure()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/common.scss";
+
+.guid-item {
+  border-bottom: 2px dashed $--background-color-base;
+  line-height: 60px;
+}
+
+.guid-item a :hover {
+  color: $--color-primary;
+}
+</style>

src/views/career/plan/components/EnrollPlanContent.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="recruit-plan-content">
+    <div class="fx-row ai-cen picker-group mb20">
+      <el-select v-model="form.year" placeholder="年份">
+        <el-option v-for="item in years" :key="item" :label="item" :value="item" />
+      </el-select>
+      <el-select v-model="form.type" placeholder="科类">
+        <el-option v-for="item in types" :key="item" :label="item" :value="item" />
+      </el-select>
+      <el-select v-model="form.level" placeholder="批次">
+        <el-option v-for="item in levels" :key="item" :label="item" :value="item" />
+      </el-select>
+      <el-select v-model="form.universityNameText" placeholder="院校/专业组" style="min-width: 350px">
+        <el-option v-for="item in universityNameTexts" :key="item" :label="item" :value="item" />
+      </el-select>
+    </div>
+    <dynamic-table :columns="columns" :rows="rows" border>
+      <template #name="{row}">
+        <div :class="{pointer:!disabledNameLink}" @click="toDetail(row)">{{ row.universityName }}</div>
+        <div v-if="row.specialProject">({{ row.specialProject }})</div>
+      </template>
+      <template #temp="{row}">
+        <p>{{ `[${row.marjorBelongs}]` }}{{ row.marjorName }}</p>
+        <p class="f-999 f12">{{ row.marjorDirection }}</p>
+      </template>
+    </dynamic-table>
+    <vip-guide-more v-if="total>1&&!isBind" />
+    <pagination
+      class="mt10"
+      :total="total"
+      :auto-scroll="false"
+      :page.sync="pageForm.pageNum"
+      :limit.sync="pageForm.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import VipGuideMore from '@/components/VipGuideMore/index'
+import {
+  recruitPlan,
+  recruitPlanLevels,
+  recruitPlanTypes,
+  recruitPlanYears,
+  getRecruitPlanUniversityNameText
+} from '@/api/webApi/shiftLine'
+import { mapGetters } from 'vuex'
+import DynamicTable from '@/components/dynamic-table/index.vue'
+import GlobalVoluntaryDataMixin from '@/views/career/GlobalVoluntaryDataMixin'
+
+export default {
+  name: 'EnrollPlanContent',
+  components: { DynamicTable, VipGuideMore },
+  mixins: [GlobalVoluntaryDataMixin],
+  props: {
+    form: {
+      type: Object,
+      default: () => ({})
+    },
+    disabledNameLink: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      types: [],
+      years: [],
+      levels: [],
+      universityNameTexts: [],
+      pageForm: {
+        pageSize: 10,
+        pageNum: 1
+      },
+      total: 0,
+      rows: []
+    }
+  },
+  computed: {
+    ...mapGetters(['isBind']),
+    columns() {
+      return [{
+        prop: 'universityName',
+        label: '院校名称',
+        slotBody: 'name'
+      }, {
+        prop: 'collegeCode',
+        label: '招生代码'
+      }, {
+        prop: 'marjorName',
+        label: '招生专业',
+        slotBody: 'temp',
+        width: '200'
+      }, {
+        prop: 'level',
+        label: '批次/段'
+      }, {
+        prop: 'course',
+        label: '选考科目',
+        hidden: !this.isNewGaokao
+      }, {
+        prop: 'type',
+        label: '科类',
+        hidden: this.isNewGaokao
+      }, {
+        prop: 'planCount',
+        label: '计划数'
+      }, {
+        prop: 'xuezhi',
+        label: '学制'
+      }, {
+        prop: 'xuefei',
+        label: '学费'
+      }, {
+        prop: 'planType',
+        label: '计划类型'
+      }]
+    }
+  },
+  watch: {
+    'form.year': function() {
+      this.form.type = ''
+      this.form.level = ''
+      this.ensureVoluntaryData({ year: this.form.year })
+      this.getMajorTypes()
+      this.getMajorLevels()
+    },
+    'form.type': function() {
+      this.form.universityNameText = ''
+      this.getUniversityNameTexts()
+    },
+    'form.level': function() {
+      this.form.universityNameText = ''
+      this.getUniversityNameTexts()
+    },
+    'form.universityCode': function() {
+      this.form.universityNameText = ''
+      this.getUniversityNameTexts()
+    },
+    'form.universityNameText': function(val) {
+      this.rows = []
+      this.total = 0
+      this.pageForm.pageNum = 1
+      if (val) this.getList()
+    }
+  },
+  created() {
+    this.getMajorYears()
+  },
+  methods: {
+    checkFormFields(props) {
+      return props.every(prop => !!this.form[prop])
+    },
+    toDetail(item) {
+      if (this.disabledNameLink) return
+      this.transferTo('/career/plan/UniversityDetail', { code: item.universityCode })
+    },
+    getMajorYears() {
+      recruitPlanYears().then(res => {
+        this.form.year = res.rows[0]
+        this.years = res.rows
+      })
+    },
+    getMajorTypes() {
+      recruitPlanTypes({ year: this.form.year }).then(res => {
+        this.form.type = res.rows[0]
+        this.types = res.rows
+      })
+    },
+    getMajorLevels() {
+      recruitPlanLevels({ year: this.form.year }).then(res => {
+        this.form.level = res.rows[0]
+        this.levels = res.rows
+      })
+    },
+    getUniversityNameTexts() {
+      if (!this.checkFormFields(['year', 'type', 'level'])) return
+      if (!this.checkFormFields(['universityCode'])) {
+        this.$alert('请先选择院校').then(() => this.$emit('choose'))
+        return
+      }
+      getRecruitPlanUniversityNameText({
+        universityCode: this.form.universityCode,
+        year: this.form.year,
+        type: this.form.type,
+        level: this.form.level
+      }).then(res => {
+        this.universityNameTexts = res.data
+        this.form.universityNameText = res.data.first()
+      })
+    },
+    getList() {
+      recruitPlan({ ...this.form, ...this.pageForm }).then(res => {
+        this.rows = res.rows
+        this.total = res.total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.recruit-plan-content {
+  .picker-group {
+    .el-select + .el-select {
+      margin-left: 20px;
+    }
+  }
+}
+</style>

src/views/career/plan/compoents/OpenCollege.vue → src/views/career/plan/components/OpenCollege.vue

@@ -1,23 +1,23 @@
 <template>
   <div v-loading="loading">
-    <filter-form :filter="filter_form"></filter-form>
-    <mx-search-group justify="end"  v-model="collegeName" @search="clickSuffix">
-      <p>共 <span class="f-primary">{{total}}</span> 条</p>
+    <filter-form :filter="filter_form" />
+    <mx-search-group v-model="collegeName" justify="end" @search="clickSuffix">
+      <p>共 <span class="f-primary">{{ total }}</span> 条</p>
     </mx-search-group>
     <el-row class="mt10 ">
       <div v-if="total > 0">
         <div class="list-wrap pl30">
-          <div class="list-item fx-row mb30" v-for="item in collegeList">
-            <div class="img" >
+          <div v-for="(item, index) in collegeList" :key="index" class="list-item fx-row mb30">
+            <div class="img">
               <img style="width: 100%;height: 100%" :src="item.university.logo" alt="">
             </div>
             <div class="info ml20">
-              <div class="college_name pointer f-333 f20 mb5" @click="toDetail(item)">{{item.university.name}}</div>
-              <div class="tags" v-if="item.university.features">
-                <span class="mr5 el-tag el-tag--info el-tag--plain" v-for="feature in item.university.features.split(',')">{{ feature }}</span>
+              <div class="college_name pointer f-333 f20 mb5" @click="toDetail(item)">{{ item.university.name }}</div>
+              <div v-if="item.university.features" class="tags">
+                <span v-for="feature in item.university.features.split(',')" :key="feature" class="mr5 el-tag el-tag--info el-tag--plain">{{ feature }}</span>
               </div>
               <div class="college-desc mt5 f14 f-666">
-                <p>{{`${item.university.location} ${item.university.cityName} ${item.university.type} / ${item.university.natureTypeCN} / ${item.university.managerType} `}}</p>
+                <p>{{ `${item.university.location} ${item.university.cityName} ${item.university.type} / ${item.university.natureTypeCN} / ${item.university.managerType} ` }}</p>
               </div>
             </div>
             <div class="heat f12 f-666">
@@ -34,69 +34,73 @@
             </div>
           </div>
         </div>
-        <pagination class="mt10" :total="total" :autoScroll="false" @pagination="getUniversityByCode"
-                    :page.sync="pageForm.pageNum"
-                    :limit.sync="pageForm.pageSize"
-        ></pagination>
+        <pagination
+          class="mt10"
+          :total="total"
+          :auto-scroll="false"
+          :page.sync="pageForm.pageNum"
+          :limit.sync="pageForm.pageSize"
+          @pagination="getUniversityByCode"
+        />
       </div>
-      <evaluation-empty v-else shadow title="暂无数据"></evaluation-empty>
+      <evaluation-empty v-else title="暂无数据" />
     </el-row>
   </div>
 </template>
 
 <script>
-import FilterForm from '@/views/career/components/FilterForm';
+import FilterForm from '@/views/career/components/FilterForm'
 import { getUniversityByCode } from '@/api/webApi/career-course'
 import MxSearchGroup from '@/components/MxSearch/mx-search-group'
 import transferMixin from '@/components/mx-transfer-mixin'
 export default {
-  mixins:[transferMixin],
-  components: { MxSearchGroup,FilterForm },
-  props:{
-    code:{
-      type:String,
-      default:'',
-      require:true
+  components: { MxSearchGroup, FilterForm },
+  mixins: [transferMixin],
+  props: {
+    code: {
+      type: String,
+      default: '',
+      require: true
     }
   },
   data() {
     return {
-      filter_form:{
-        location:'',
-        natureTypeCN:'',
-        type:'',
-        level:'',
-        features:'',
-        name:''
+      filter_form: {
+        location: '',
+        natureTypeCN: '',
+        type: '',
+        level: '',
+        features: '',
+        name: ''
       },
-      loading:false,
-      collegeName:'',
-      pageForm:{
-        pageSize:10,
-        pageNum:1,
+      loading: false,
+      collegeName: '',
+      pageForm: {
+        pageSize: 10,
+        pageNum: 1
       },
-      total:0,
-      collegeList:[],
+      total: 0,
+      collegeList: []
     }
   },
   watch: {
-    filter_form:{
+    filter_form: {
       immediate: true,
-      deep:true,
+      deep: true,
       handler(val) {
         this.getUniversityByCode()
       }
-    },
+    }
   },
   methods: {
     clickSuffix() {
       this.filter_form.name = this.collegeName
     },
     toDetail(item) {
-      this.transferTo('/career/plan/UniversityDetail',{code:item.university.code})
+      this.transferTo('/career/plan/UniversityDetail', { code: item.university.code })
     },
     getUniversityByCode() {
-      getUniversityByCode({...this.filter_form,code:this.code,...this.pageForm}).then(res =>{
+      getUniversityByCode({ ...this.filter_form, code: this.code, ...this.pageForm }).then(res => {
         console.log(res)
         this.total = res.total
         this.collegeList = res.rows

src/views/career/plan/components/RankUniversity.vue

@@ -0,0 +1,246 @@
+<template>
+  <div v-loading="loading">
+    <div class="filter">
+      <el-row class="radioInput">
+        <div>
+          <span class="radiaTitle">排名类型:</span>
+        </div>
+        <el-radio-group v-model="filter_form.type">
+          <el-radio-button
+            v-for="item in filter_list.types"
+            :key="item"
+            :label="item"
+            style="margin-bottom:10px"
+          />
+        </el-radio-group>
+      </el-row>
+      <el-row class="radioInput">
+        <div>
+          <span class="radiaTitle">排名年份:</span>
+        </div>
+        <el-radio-group v-model="filter_form.year">
+          <el-radio-button
+            v-for="item in filter_list.years"
+            :key="item"
+            :label="item"
+            style="margin-bottom:10px"
+          />
+        </el-radio-group>
+      </el-row>
+      <mx-search-group v-model="collegeName" justify="end" @search="clickSuffix">
+        <p>共 <span class="f-primary">{{ pageForm.total }}</span> 条</p>
+      </mx-search-group>
+    </div>
+    <el-row class="mt10 ">
+      <div v-if="pageForm.total > 0">
+        <div class="list-wrap pl30">
+          <div v-for="(item, idx) in collegeList" :key="idx" class="list-item fx-row mb30">
+            <div class="index">{{ item.ranking }}</div>
+            <div class="img pointer" @click="toDetail(item)">
+              <img style="width: 100%;height: 100%" :src="item.universities.logo" alt="">
+            </div>
+            <div class="info ml20">
+              <div class="college_name pointer f-333 f20 mb5" @click="toDetail(item)">{{ item.collegeName }}</div>
+              <div v-if="item.universities.features" class="tags">
+                <span
+                  v-for="feature in item.universities.features.split(',')"
+                  :key="feature"
+                  class="mr5 el-tag el-tag--info el-tag--plain"
+                >{{ feature }}</span>
+              </div>
+              <div class="college-desc mt5 f14 f-666">
+                <p>{{
+                  `${item.universities.location} ${item.universities.cityName} ${item.universities.type} / ${item.universities.natureTypeCN} / ${item.universities.managerType} `
+                }}</p>
+              </div>
+            </div>
+            <div class="heat f12 f-666">
+              <p>综合指数</p>
+              <p class="mt3">{{ item.universities.comScore }}</p>
+            </div>
+            <div class="heat f12  f-666">
+              <p>热度</p>
+              <p class="mt3">{{ (item.universities.hits / 10000).toFixed(1) }}万</p>
+            </div>
+          </div>
+        </div>
+        <pagination
+          class="mt10"
+          :total="pageForm.total"
+          :auto-scroll="false"
+          :page.sync="pageForm.pageNum"
+          :limit.sync="pageForm.pageSize"
+          @pagination="onChangePage"
+        />
+      </div>
+
+      <evaluation-empty v-else title="暂无数据" />
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { rankingFilter, universitiesRanking } from '@/api/webApi/career-course'
+import MxSearchGroup from '@/components/MxSearch/mx-search-group'
+import transferMixin from '@/components/mx-transfer-mixin'
+
+export default {
+  components: { MxSearchGroup },
+  mixins: [transferMixin],
+  data() {
+    return {
+      filter_form: {
+        type: '',
+        year: '',
+        collegeName: ''
+      },
+      loading: false,
+      pageForm: {
+        pageSize: 10,
+        pageNum: 1,
+        total: 0
+      },
+      collegeName: '',
+      filter_list: {},
+      collegeList: []
+    }
+  },
+  watch: {
+    filter_form: {
+      immediate: false,
+      deep: true,
+      handler(val) {
+        this.getUniversitiesRanking()
+      }
+    }
+  },
+  created() {
+    this.getRankingFilter()
+  },
+  methods: {
+    clickSuffix() {
+      this.filter_form.collegeName = this.collegeName
+    },
+    getRankingFilter() {
+      rankingFilter().then(res => {
+        this.filter_list = res.data
+        this.filter_form.type = res.data.types[0]
+        this.filter_form.year = res.data.years[0]
+      })
+    },
+    getUniversitiesRanking() {
+      this.loading = true
+      universitiesRanking({
+        ...this.filter_form, pageNum: this.pageForm.pageNum,
+        pageSize: this.pageForm.pageSize
+      }).then(res => {
+        this.collegeList = res.rows
+        this.pageForm.total = res.total
+      }).finally(_ => {
+        this.loading = false
+      })
+    },
+    toDetail(item) {
+      this.transferTo('/career/plan/UniversityDetail', { code: item.collegeCode })
+    },
+    onChangePage(page) {
+      this.pageForm.pageSize = page.limit
+      this.pageForm.pageNum = page.page
+      this.getUniversitiesRanking()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heat {
+  width: 200px;
+  height: 72px;
+  padding-top: 22px;
+  color: #666;
+}
+
+.info {
+  width: 400px;
+}
+
+.index {
+  width: 50px;
+  flex-shrink: 0;
+  text-align: center;
+  align-self: center;
+}
+
+.img {
+  flex-shrink: 0;
+  width: 72px;
+  height: 72px;
+  align-self: center;
+}
+
+.tags {
+  .el-tag {
+    height: 16px;
+    line-height: 16px;
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
+.radioInput ::v-deep {
+  display: flex;
+
+  .el-radio-button .el-radio-button__inner {
+    border-radius: 4px !important;
+    border: none;
+    padding: 5px 10px !important;
+    font-weight: 400;
+    font-family: PingFangSC-Regular, PingFang SC;
+  }
+
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    box-shadow: none;
+  }
+
+  .radiaTitle {
+    display: inline-block;
+    width: 80px;
+    font-size: 14px;
+    text-align: right;
+    margin-top: 2px;
+    margin-right: 10px;
+  }
+}
+
+.radioInput ::v-deep {
+  display: flex;
+
+  .el-radio-button .el-radio-button__inner {
+    border-radius: 4px !important;
+    border: none;
+    padding: 5px 10px !important;
+    font-weight: 400;
+    font-family: PingFangSC-Regular, PingFang SC;
+  }
+
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    box-shadow: none;
+  }
+
+  .radiaTitle {
+    display: inline-block;
+    width: 80px;
+    font-size: 14px;
+    text-align: right;
+    margin-top: 2px;
+    margin-right: 10px;
+  }
+}
+
+.radioInput ::v-deep {
+  background-color: #ffffff;
+  font-size: 14px;
+  padding: 5px;
+}
+
+</style>

src/views/career/plan/components/UniversityDetail/UniversityIcons.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="f14 f-666 text-center fx-row fx-bet-cen">
+    <div v-for="(item, index) in iconList" :key="index" class="fx-1">
+      <div v-if="Array.isArray(item.value)">
+        <img width="50px" :src="item.img" :alt="item.desc">
+        <el-popover placement="bottom" trigger="hover">
+          <div>
+            <p v-for="(i, idx) in item.value" :key="idx">
+              {{ i.type }} {{ i.number }}个
+            </p>
+          </div>
+          <p slot="reference" class="mt10">
+            {{ formatStatNumber(item) }}
+            <i class="el-icon-question" />
+          </p>
+        </el-popover>
+      </div>
+      <div v-else>
+        <img width="50px" :src="item.img" :alt="item.desc">
+        <p class="mt10">{{ item.value }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UniversityIcons',
+  props: {
+    baseInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    iconFormat() {
+      const baseInfo = this.baseInfo || {}
+      return [
+        {
+          img: require('@/assets/images/career/year.png'),
+          value: `${baseInfo.createdYear}年`,
+          desc: '创办时间'
+        },
+        {
+          img: require('@/assets/images/career/type.png'),
+          value: baseInfo.natureTypeCN,
+          desc: '办学类型'
+        },
+        {
+          img: require('@/assets/images/career/xingzhi.png'),
+          value: baseInfo.type,
+          desc: '院校类型'
+        },
+        {
+          img: require('@/assets/images/career/bumen.png'),
+          value: baseInfo.managerType,
+          desc: '所属部门'
+        },
+        {
+          img: require('@/assets/images/career/xueli.png'),
+          value: baseInfo.level,
+          desc: '学历层次'
+        },
+        {
+          img: require('@/assets/images/career/location.png'),
+          value: `${baseInfo.location} ${baseInfo.cityName}`,
+          desc: '所处地'
+        },
+        {
+          img: require('@/assets/images/career/shuoshi.png'),
+          value: baseInfo.pointsOfShuo,
+          desc: '硕士点',
+          type: 'arr'
+        },
+        {
+          img: require('@/assets/images/career/boshi.png'),
+          value: baseInfo.pointsOfBo,
+          desc: '博士点',
+          type: 'arr'
+        }
+      ]
+    },
+    iconList() {
+      // 过滤无效数据的标签
+      return this.iconFormat.filter(item => Array.isArray(item.value) ? item.value.length : item.value)
+    }
+  },
+  methods: {
+    formatStatNumber(item) {
+      return `${item.value[0]?.number || ''} / ${item.value[1]?.number || ''} `
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/career/plan/compoents/UniversityStyle.vue → src/views/career/plan/components/UniversityDetail/UniversityStyle.vue

@@ -1,43 +1,21 @@
 <template>
-  <div class="univerty" v-loading="loading">
-    <!-- VR -->
-    <!--    <div class="image-item">-->
-    <!--      <div class="cover-image vr" >-->
-    <!--          <div class="colleges-imgs-mask">-->
-    <!--            <i class="iconfont icon-vr" style="font-size: 28px"></i>-->
-    <!--          </div>-->
-    <!--      </div>-->
-    <!--      <p class="mt15 text-overflow-ellipsis f14 lh20">VR校园</p>-->
-    <!--    </div>-->
-    <!--    &lt;!&ndash; 视频 &ndash;&gt;-->
-    <!--    <div class="image-item">-->
-    <!--      <div class="cover-image video" >-->
-    <!--        <div class="colleges-imgs-mask">-->
-    <!--          <i class="iconfont icon-bofang" style="font-size: 28px"></i>-->
-    <!--        </div>-->
-    <!--      </div>-->
-    <!--      <p class="mt15 text-overflow-ellipsis f14 lh20">清华大学</p>-->
-    <!--    </div>-->
-    <!--     图片列表-->
-    <div class="image-wrap" v-if="senceList.length">
-      <div class="image-item" v-for="item in senceList">
+  <div v-loading="loading" class="univerty">
+    <div v-if="senceList.length" class="image-wrap">
+      <div v-for="(item, index) in senceList" :key="index" class="image-item">
         <div v-if="item.type == 1" class="cover-image vr" @click="toVR(item.url)">
-          <el-image class="cover-image" fit="fill" :src="item.coverUrl"  ></el-image>
-          <p class="mt10 text-overflow-ellipsis f14 lh20">VR校园</p>
+          <el-image class="cover-image" fit="fill" :src="item.coverUrl" />
+          <p class="mt10 text-overflow-ellipsis pf bold f14 lh20">VR校园</p>
           <div class="colleges-imgs-mask">
-            <i class="iconfont icon-vr" style="font-size: 28px"></i>
+            <i class="iconfont icon-vr" style="font-size: 28px" />
           </div>
         </div>
         <div v-if="item.type == 3">
-          <el-image class="cover-image" fit="fill" :src="item.url" :preview-src-list="srcList"></el-image>
-          <p class="mt10 text-overflow-ellipsis f14 lh20">{{ item.description }}</p>
+          <el-image class="cover-image" fit="fill" :src="item.url" :preview-src-list="srcList" />
+          <p class="mt10 text-overflow-ellipsis pf bold f14 lh20">{{ item.description }}</p>
         </div>
-
       </div>
     </div>
-
-    <evaluation-empty class="mt20" v-else shadow title="暂无数据"></evaluation-empty>
-
+    <evaluation-empty v-else class="mt20" title="暂无数据" />
   </div>
 </template>
 
@@ -52,9 +30,6 @@ export default {
       default: ''
     }
   },
-  created() {
-    this.getUniversitiesStyle()
-  },
   data() {
     return {
       senceList: [],
@@ -65,12 +40,15 @@ export default {
     srcList() {
       if (!this.senceList.length) return []
       return this.senceList.filter(item => {
-          return item.type == 3
+        return item.type == 3
       }).map(item => {
         return item.url
       })
     }
   },
+  created() {
+    this.getUniversitiesStyle()
+  },
   methods: {
     getUniversitiesStyle() {
       this.loading = true
@@ -83,7 +61,7 @@ export default {
         })
     },
     toVR(url) {
-      window.open(url,"_blank");
+      window.open(url, '_blank')
     }
   }
 }
@@ -118,10 +96,12 @@ export default {
   }
 
   .vr {
+    //noinspection CssUnknownTarget
     background-image: url("http://toc.cn-bj.ufileos.com/media/files/20210414/9d02bb82.png");
   }
 
   .video {
+    //noinspection CssUnknownTarget
     background-image: url("http://img1.youzy.cn/content/media/thumbs/p00176063.jpeg");
   }
 
@@ -140,7 +120,12 @@ export default {
   }
 
   &:hover {
-    color: #42b983;
+    color: var(--themeColor);
   }
 }
 </style>
+<style>
+.el-image-viewer__close {
+  top: 90px;
+}
+</style>

src/views/career/plan/compoents/major-detail-style.scss → src/views/career/plan/components/major-detail-style.scss

@@ -1,4 +1,3 @@
-
 .professDetail {
 
   .header-content {
@@ -6,7 +5,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(66, 185, 131, 0.1);
+    background: var(--themeColor);
   }
 
   .custom-tree-node {
@@ -29,23 +28,23 @@
       line-height: 40px;
 
       &:hover {
-        color: #47C6A2;
+        color: var(--themeColor);
       }
 
       &.bg-primary {
-        background: #47C6A2;
+        background: var(--themeColor);
         color: white;
       }
     }
   }
 
   .bg-primary {
-    background: #47C6A2 !important;
+    background: var(--themeColor) !important;
     color: white;
   }
 
   .format-tit {
-    border-left: 4px solid #47C6A2;
+    border-left: 4px solid var(--themeColor);
     padding-left: 10px;
     margin-bottom: 20px;
     font-size: 20px;
@@ -63,7 +62,7 @@
   }
 
   .line {
-    background: #47C6A2;
+    background: var(--themeColor);
     height: 1px;
   }
 
@@ -75,7 +74,7 @@
 
   ::v-deep .el-tree-node.is-current > .el-tree-node__content {
     background: rgba(22, 119, 255, 0.1);
-    color: #47C6A2;
+    color: var(--themeColor);
 
     ::v-deep .is-leaf {
       color: rgba(0, 0, 0, 0);

src/views/career/plan/compoents/major-introduce-info.vue → src/views/career/plan/components/major-introduce-info.vue

@@ -2,48 +2,48 @@
   <div>
     <div class="info-wrap mb10">
       <div class="info-item">
-        <el-image :src="require('@/assets/images/career/school_icon.png')"/>
+        <el-image :src="require('@/assets/images/career/school_icon.png')" fit="contain" />
         <div>
-          <p class="f18">{{ majorDetail.eduLevel == 'ben' ? '本科' : '专科' }}</p>
-          <p class="f14 f-999">学历层次</p>
+          <div class="f18">{{ majorDetail.eduLevel == 'ben' ? '本科' : '专科' }}</div>
+          <div class="f14 f-999">学历层次</div>
         </div>
       </div>
       <div class="info-item">
-        <el-image :src="require('@/assets/images/career/level_icon.png')"/>
+        <el-image :src="require('@/assets/images/career/level_icon.png')" fit="contain" />
         <div>
-          <p class="f18">{{ majorDetail.learnYearZh }}</p>
-          <p class="f14 f-999">修业年限</p>
+          <div class="f18">{{ majorDetail.learnYearZh }}</div>
+          <div class="f14 f-999">修业年限</div>
         </div>
       </div>
-      <div class="info-item" v-if="majorDetail.degree">
-        <el-image :src="require('@/assets/images/career/pre_icon.png')"/>
+      <div v-if="majorDetail.degree" class="info-item">
+        <el-image :src="require('@/assets/images/career/pre_icon.png')" fit="contain" />
         <div>
-          <p class="f18">{{ majorDetail.degree }}</p>
-          <p class="f14 f-999">授予学位</p>
+          <div class="f18">{{ majorDetail.degree }}</div>
+          <div class="f14 f-999">授予学位</div>
         </div>
       </div>
       <div class="info-item">
-        <el-image :src="require('@/assets/images/career/year_icon.png')"/>
+        <el-image :src="require('@/assets/images/career/year_icon.png')" fit="contain" />
         <div>
-          <p class="f18">{{ `${majorDetail.maleRatio}:${majorDetail.femaleRatio}` }}</p>
-          <p class="f14 f-999">男女比例</p>
+          <div class="f18">{{ `${majorDetail.maleRatio}:${majorDetail.femaleRatio}` }}</div>
+          <div class="f14 f-999">男女比例</div>
         </div>
       </div>
     </div>
-    <div class="desc-item" v-for="display in displayContents" :key="display.prop">
+    <div v-for="display in displayContents" :key="display.prop" class="desc-item">
       <div v-if="display.content">
         <p class="format-tit">{{ display.title }}</p>
-        <div class="f-666 f14" v-html="display.content"></div>
+        <div class="f-666 f14" v-html="display.content" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import config from '@/common/mx-config'
+import config from '@/common/MxConfig'
 
 export default {
-  name: 'major-introduce-info',
+  name: 'MajorIntroduceInfo',
   props: ['majorDetail'],
   data() {
     return {

src/views/career/plan/compoents/major-introduce-job.vue → src/views/career/plan/components/major-introduce-job.vue

@@ -1,24 +1,25 @@
 <template>
   <div>
     <div v-if="prospects">
-      <div class="desc-item" v-if="prospects.jobDirection">
+      <div v-if="prospects.jobDirection" class="desc-item">
         <p class="format-tit">就业方向</p>
-        <div class="f-666 f14" v-html="prospects.jobDirection"></div>
+        <div class="f-666 f14" v-html="prospects.jobDirection" />
       </div>
-      <div class="desc-item" v-if="reverseSalary.length">
+      <div v-if="reverseSalary.length" class="desc-item">
         <p class="format-tit">平均薪酬(毕业年限) <span
-          class="f-333 f14 ml20">{{
-            `平均薪资:${reverseSalary.length ? reverseSalary[0].value || '-' : '-'}`
-          }}</span>
+          class="f-333 f14 ml20"
+        >{{
+          `平均薪资:${reverseSalary.length ? reverseSalary[0].value || '-' : '-'}`
+        }}</span>
         </p>
         <div class="f-666 f14">
           <el-row :gutter="10">
             <el-col :span="12">
-              <mx-chart :options="chartSalary" height="240px"></mx-chart>
+              <mx-chart :options="chartSalary" height="240px" />
             </el-col>
             <el-col style="height: 100%" :span="12">
               <el-row :gutter="40" type="flex" style="flex-wrap: wrap">
-                <el-col :span="12" class="f16" v-for="(item,index) in  reverseSalary">
+                <el-col v-for="(item,index) in reverseSalary" :key="index" :span="12" class="f16">
                   <el-row class="format-job-wrap">
                     <el-col :span="3" class="f18 text-center f-666">{{ index + 1 }}</el-col>
                     <el-col :span="15" class="f-333">{{ item.name }}</el-col>
@@ -31,16 +32,16 @@
         </div>
       </div>
       <el-row :gutter="10" type="flex">
-        <el-col :span="8" v-if="prospects.vocationalDistribution.length">
+        <el-col v-if="prospects.vocationalDistribution.length" :span="8">
           <div class="desc-item">
             <p class="format-tit">主要职业分布</p>
             <div class="f-666 f14">
-              <mx-chart :options="occupation" height="200px"></mx-chart>
+              <mx-chart :options="occupation" height="200px" />
               <el-collapse accordion>
-                <el-collapse-item v-for="desc in prospects.vocationalDistribution">
+                <el-collapse-item v-for="desc in prospects.vocationalDistribution" :key="desc.name">
                   <template slot="title">
                     <div style="display: flex;justify-content: space-between;width: 100%;">
-                      <span style="color: #42b983">{{ desc.name }}</span>
+                      <span class="f-active">{{ desc.name }}</span>
                       <span class="f-red">{{ desc.value }}%</span>
                     </div>
                   </template>
@@ -50,13 +51,13 @@
             </div>
           </div>
         </el-col>
-        <el-col :span="8" v-if="prospects.industryDistribution.length">
+        <el-col v-if="prospects.industryDistribution.length" :span="8">
           <div class="desc-item">
             <p class="format-tit">主要行业分布</p>
             <div class="f-666 f14">
-              <mx-chart :options="industry" height="200px"></mx-chart>
+              <mx-chart :options="industry" height="200px" />
               <el-row>
-                <el-col :span="24" class="f16" v-for="(item,index) in  prospects.industryDistribution">
+                <el-col v-for="(item,index) in prospects.industryDistribution" :key="index" :span="24" class="f16">
                   <el-row class="format-job-wrap">
                     <el-col :span="3" class="f18 text-center f-666">{{ index + 1 }}</el-col>
                     <el-col :title="item.name" :span="18" class="f-333  text-ellipsis">{{ item.name }}
@@ -68,13 +69,13 @@
             </div>
           </div>
         </el-col>
-        <el-col :span="8" v-if="prospects.jobRegionDistribution.length">
+        <el-col v-if="prospects.jobRegionDistribution.length" :span="8">
           <div class="desc-item">
             <p class="format-tit">主要就业地区分布</p>
             <div class="f-666 f14">
-              <mx-chart :options="jobAddress" height="200px"></mx-chart>
+              <mx-chart :options="jobAddress" height="200px" />
               <el-row>
-                <el-col :span="24" class="f16" v-for="(item,index) in  prospects.jobRegionDistribution">
+                <el-col v-for="(item,index) in prospects.jobRegionDistribution" :key="index" :span="24" class="f16">
                   <el-row class="format-job-wrap">
                     <el-col :span="3" class="f18 text-center f-666">{{ index + 1 }}</el-col>
                     <el-col :span="18" class="f-333 text-ellipsis">{{ item.name }}</el-col>
@@ -86,9 +87,9 @@
           </div>
         </el-col>
       </el-row>
-      <el-row :gutter="10" class="f-12 f-666" v-if="prospects.description.length">
-        <p><i class="el-icon mr5 f-16 el-icon-warning" style="color: #42b983"> </i>数据说明</p>
-        <p v-for="(desc,index) in prospects.description">
+      <el-row v-if="prospects.description.length" :gutter="10" class="f-12 f-666">
+        <p><i class="el-icon mr5 f-16 el-icon-warning f-active" />数据说明</p>
+        <p v-for="(desc,index) in prospects.description" :key="index">
           {{ index + 1 }}、 {{ desc }}
         </p>
       </el-row>
@@ -100,23 +101,25 @@
 </template>
 
 <script>
+import config from '@/common/MxConfig'
 import MxChart from '@/components/MxChart/index'
+
 export default {
-  name: 'major-introduce-job',
+  name: 'MajorIntroduceJob',
   components: { MxChart },
   props: ['prospects'],
   computed: {
     isEmpty() {
-      return !this.prospects.jobDirection
-        && !this.reverseSalary.length
-        && !this.prospects.description.length
-        && !this.prospects.vocationalDistribution.length
-        && !this.prospects.industryDistribution.length
-        && !this.prospects.jobRegionDistribution.length
+      return !this.prospects.jobDirection &&
+        !this.reverseSalary.length &&
+        !this.prospects.description.length &&
+        !this.prospects.vocationalDistribution.length &&
+        !this.prospects.industryDistribution.length &&
+        !this.prospects.jobRegionDistribution.length
     },
     // 平均薪资趋势
     reverseSalary() {
-      if (!this.prospects.hasOwnProperty('averageSalary')) return []
+      if (!this.prospects['averageSalary']) return []
       const averageSalary = this.deepClone(this.prospects.averageSalary)
       return averageSalary.reverse().splice(0, 10)
     },
@@ -227,7 +230,7 @@ export default {
         series: [
           {
             type: 'line',
-            color: '#47C6A2',
+            color: config.color.primary,
             stack: 'Total',
             label: {
               show: true,
@@ -241,7 +244,7 @@ export default {
       }
       return options
     }
-  },
+  }
 }
 </script>
 

src/views/career/plan/detail.vue

@@ -1,5 +1,5 @@
-<template >
-  <div class="video_detail_contianer">
+<template>
+  <div class="video_detail_container">
     <el-container>
       <el-aside width="284px">
         <div class="aside_header">
@@ -7,266 +7,108 @@
           <span>章节目录</span>
         </div>
         <div class="aside_content">
-          <el-tree ref="treeBox" :data="contentData" :props="defaultProps" :highlight-current="true" :default-expanded-keys="expandId" :default-checked-keys="childrenId" node-key="id" @node-click="treeNodeClick"></el-tree>
+          <el-tree
+            ref="treeBox"
+            :data="contentData"
+            :props="defaultProps"
+            :highlight-current="true"
+            :default-expanded-keys="expandId"
+            :default-checked-keys="childrenId"
+            node-key="id"
+            @node-click="treeNodeClick"
+          />
         </div>
       </el-aside>
       <el-main>
-        <evaluation-title :title="`${routeParams.name}`" navBackButton />
-        <div class="video_wrap">
-          <div class="videoplay">
-            <div class="video">
-              <mx-video :aliIdType="aliIdType" :src="videoId"></mx-video>
+        <index-card :title="routeParams.name">
+          <el-button slot="more" v-has-history size="small" round @click="$router.back()">返回</el-button>
+          <div class="video_wrap">
+            <div class="videoplay">
+              <div class="video">
+                <mx-video :ali-id-type="aliIdType" :src="videoId" />
+              </div>
             </div>
-          </div>
-          <div class="text">
-            <span :class="{ info_active: infoActive == 1 }" @click="infoActive = 1">课程概要</span>
-          </div>
-        </div>
-        <!-- 视频 信息 -->
-        <div class="video_info">
-          <!-- 课程概要 -->
-          <div class="summary" v-show="infoActive == 1">
-            <div class="summary_tit">
-              {{ videoInfo.title }}
+            <div class="text">
+              <span :class="{ info_active: infoActive == 1 }" @click="infoActive = 1">课程概要</span>
             </div>
-            <div class="vis_totle">
-              <img src="@/assets/images/icon_eye.png" alt="" />
-              <span>{{ routeParams.count }}人已观看</span>
+          </div>
+          <!-- 视频 信息 -->
+          <div class="video_info">
+            <!-- 课程概要 -->
+            <div v-show="infoActive == 1" class="summary">
+              <div class="summary_tit">
+                {{ videoInfo.title }}
+              </div>
+              <div class="vis_totle">
+                <img src="@/assets/images/icon_eye.png" alt="">
+                <span>{{ routeParams.count }}人已观看</span>
+              </div>
             </div>
           </div>
-        </div>
+        </index-card>
       </el-main>
     </el-container>
   </div>
 </template>
 
 <script>
-import { videoInfo, getVideoPlayAuth } from "@/api/webApi/webVideo";
-import aliplayer from "../../videocourse/components/aliplayer.vue";
 import transferMixin from '@/components/mx-transfer-mixin'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
 
 export default {
+  name: 'VideoPlayDetail',
+  components: { IndexCard },
   mixins: [transferMixin],
-  components: { aliplayer },
   data() {
     return {
       routeParams: {},
       infoActive: 1,
       contentData: [],
       defaultProps: {
-        children: "children",
-        label: "name",
+        children: 'children',
+        label: 'name'
       },
       expandId: [], // 默认展开的节点id
       childrenId: [], // 默认选中的节点id
-      checkNode: {}, //选中的节点
+      checkNode: {}, // 选中的节点
       videoInfo: {},
       aliIdType: '',
       videoId: ''
-    };
+    }
   },
   created() {
-    const hasPrevData = !!Object.keys(this.prevData).length
-    this.routeParams = hasPrevData ? this.prevData : this.$route.query;
+    this.initPage()
+  },
+  methods: {
+    initPage() {
+      const hasPrevData = !!Object.keys(this.prevData).length
+      this.routeParams = hasPrevData ? this.prevData : this.$route.query
 
-    // Mock树节点
-    this.contentData = [this.routeParams];
-    this.expandId = [this.routeParams.id];
-    this.childrenId = [this.routeParams.id];
+      // Mock树节点
+      this.contentData = [this.routeParams]
+      this.expandId = [this.routeParams.id]
+      this.childrenId = [this.routeParams.id]
 
-    this.aliIdType = this.routeParams.aliIdType;
-    this.videoId = this.routeParams.aliid;
+      this.aliIdType = this.routeParams.aliIdType
+      this.videoId = this.routeParams.aliid
 
-    this.$nextTick(()=> this.$refs.treeBox.setCurrentNode(this.routeParams))
-  },
-  methods: {
+      this.$nextTick(() => this.$refs.treeBox.setCurrentNode(this.routeParams))
+    },
+    //
     handle() {
       //
     },
     treeNodeClick(node) {
       if (node.children && node.children.length) {
-        return;
+        return
       }
-      this.checkNode = node;
-    },
-  },
-};
+      this.checkNode = node
+    }
+  }
+}
 </script>
 
-<style scoped>
-.video_detail_contianer {
-  padding: 20px;
-  min-height: 100vh;
-  background: #f7f7f7;
-}
-.el-main {
-  padding: 7px 8px;
-  background: #fff;
-}
-.aside_header {
-  background: white;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  padding: 24px 16px 0 16px;
-  margin-bottom: 16px;
-}
-.el-aside {
-  background: white;
-  padding: 0;
-  margin-bottom: 0;
-  margin-right: 16px;
-}
-.aside_header span {
-  margin-top: 5px;
-  width: 84px;
-  height: 22px;
-  font-size: 16px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #343434;
-  line-height: 22px;
-}
-.aside_header span:first-child {
-  width: 173px;
-  height: 27px;
-  background: linear-gradient(180deg, #ffffff 0%, #47c6a2 100%);
-  opacity: 0.5;
-}
-.video_wrap {
-  border-bottom: 10px solid #f7f7f7;
-}
-.video_wrap video {
-  width: 100%;
-  height: 566px;
-}
-.text {
-  padding-left: 32px;
-}
-.text span {
-  cursor: pointer;
-  width: 64px;
-  font-size: 16px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 600;
-  color: #343434;
-  margin-right: 16px;
-  position: relative;
-  padding: 32px 0 25px 0;
-  display: inline-block;
-}
-.video_info {
-  width: 100%;
-  height: 172px;
-  background: #ffffff;
-  border-radius: 4px;
-  padding-top: 28px;
-  padding-left: 32px;
-  font-size: 14px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #343434;
-}
-.info_active::after {
-  content: "";
-  width: 0px;
-  height: 0px;
-  border-width: 10px;
-  border-style: solid;
-  border-color: transparent transparent #47c6a2 transparent;
-  position: absolute;
-  bottom: -10px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.video_info {
-  border-top: 4px solid #47c6a2;
-  border-radius: 4px 4px 0px 0px;
-}
-.summary_tit {
-  margin-bottom: 16px;
-}
-.vis_totle {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.vis_totle img {
-  margin-right: 6px;
-}
-.introduce .introduce_tit {
-  height: 20px;
-  font-size: 14px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 600;
-  color: #343434;
-  line-height: 20px;
-  margin-bottom: 12px;
-}
-.introduce_con {
-  height: 66px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #727272;
-  line-height: 22px;
-}
-.teacher_info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.teacher_ach_info {
-  display: flex;
-  flex-wrap: wrap;
-}
-.teacher_ach_info .ach_item {
-  margin-bottom: 4px;
-  flex: 50%;
-  height: 20px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #797979;
-  line-height: 20px;
-  font-size: 14px;
-}
-.el-tree {
-  overflow: scroll;
-  height: 600px;
-  scroll-margin: 20px;
-  overflow-x: hidden;
-}
-::-webkit-scrollbar {
-  width: 4px;
-}
-::-webkit-scrollbar-thumb {
-  -webkit-box-shadow: inset 0 0 1px rgba(136, 136, 136, 0.3);
-  background-color: rgb(238, 241, 245);
-}
-</style>
-<style >
-.el-tree-node__content {
-  padding-top: 6px;
-  padding-bottom: 6px;
-  height: 32px;
-  font-size: 14px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #343434;
-  line-height: 20px;
-}
-.el-tree-node {
-  padding-left: 16px;
-}
-.el-tree-node__expand-icon.expanded {
-  content: "";
-}
-.el-tree-node__content > .el-tree-node__expand-icon {
-  padding: 6px;
-  /* position: absolute; */
-  right: 16px;
-}
-.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-  color: #47c6a2;
-}
+<style lang="scss" scoped>
+@import "video-play-detail";
+@import "video-play-deital-global";
 </style>

src/views/career/plan/enrollPlan.vue

@@ -1,69 +1,26 @@
 <template>
-  <div class="plan-container">
-    <div class="mt20">
-      <el-card class="box-card">
-        <mx-search-group class="mb10" hidden :span="6">
-          <div class="fx-row ai-cen pr10">
-            <span class="bold f14 mr10">院校名称：</span>
-            <el-button type="primary" plain @click="dialog.visible=true">{{ college.name || '添加院校' }}</el-button>
-          </div>
-          <el-divider direction="vertical" style="margin: 0 10px;" />
-          <el-col :span="4">
-            <el-select v-model="form.year" placeholder="年份">
-              <el-option
-                v-for="item in years"
-                :key="item"
-                :label="item"
-                :value="item"
-              ></el-option>
-            </el-select>
-          </el-col>
-          <el-col :span="4">
-            <el-select v-model="form.type" placeholder="科类">
-              <el-option
-                v-for="item in types"
-                :key="item"
-                :label="item"
-                :value="item"
-              ></el-option>
-            </el-select>
-          </el-col>
-          <el-button type="primary" class="search-btn" @click="search">{{ '查询' }}</el-button>
-        </mx-search-group>
-        <mx-table :prop-defines="propDefines" :rows="rows">
-          <template #name="{row}">
-            <span class="pointer" @click="toDetail(row)">{{ row.universityName }}</span>
-          </template>
-          <template #temp="{row}">
-            <p>{{ `[${row.marjorBelongs}]` }}{{ row.marjorName }}</p>
-            <p class="f-999 f12">{{ row.marjorDirection }}</p>
-          </template>
-        </mx-table>
-        <pagination class="mt10" :total="total" :autoScroll="false" @pagination="getList"
-                    :page.sync="pageForm.pageNum"
-                    :limit.sync="pageForm.pageSize"
-        ></pagination>
-      </el-card>
-    </div>
+  <div class="bg-page fx-column fx-cen-cen">
+    <index-card class="index-block">
+      <div slot="title" class="fx-row fx-end-cen">
+        <span class="pf bold f24 mr10">院校名称</span>
+        <el-button type="primary" round @click="dialog.visible=true">{{ college.name || '添加院校' }}</el-button>
+      </div>
+      <enroll-plan-content :form="form" @choose="dialog.visible=true" />
+    </index-card>
     <el-dialog :visible.sync="dialog.visible" width="80%">
-      <select-university @changeUniversity="changeUniversity"></select-university>
+      <select-university @changeUniversity="changeUniversity" />
     </el-dialog>
   </div>
 </template>
 <script>
 import SelectUniversity from '@/views/career/components/SelectUniversity'
-import MxSearchGroup from '@/components/MxSearch/mx-search-group'
-import MxSelect from '@/components/mx-select/mx-select'
-import {
-  recruitPlanYears,
-  recruitPlanTypes,
-  recruitPlan
-} from '@/api/webApi/shiftLine'
 import transferMixin from '@/components/mx-transfer-mixin'
+import IndexCard from '@/views/login/components/modules/shared/IndexCard'
+import EnrollPlanContent from '@/views/career/plan/components/EnrollPlanContent'
 
 export default {
+  components: { EnrollPlanContent, IndexCard, SelectUniversity },
   mixins: [transferMixin],
-  components: {SelectUniversity, MxSearchGroup, MxSelect},
   data() {
     return {
       dialog: {
@@ -74,95 +31,17 @@ export default {
       form: {
         year: '',
         type: '',
-        universityCode: ''
-      },
-      types: [],
-      years: [],
-      propDefines: {
-        universityName: {
-          label: '院校名称',
-          slot: 'name'
-        },
-        collegeCode: {
-          label: '院校招生代码'
-        },
-        marjorName: {
-          label: '招生专业',
-          slot: 'temp',
-          width: '200'
-        },
-        level: {
-          label: '批次/段'
-        },
-        course: {
-          label: '选考科目'
-        },
-        planCount: {
-          label: '计划数'
-        },
-        xuezhi: {
-          label: '学制'
-        },
-        xuefei: {
-          label: '学费'
-        },
-        planType: {
-          label: '计划类型'
-        },
-      },
-      pageForm: {
-        pageSize: 10,
-        pageNum: 1,
-      },
-      total: 0,
-      rows: [],
-    }
-  },
-  created() {
-    this.getMajorYears()
-  },
-  watch: {
-    'form.year': {
-      handler(val) {
-        this.getMajorLevels()
+        level: '',
+        universityCode: '',
+        universityNameText: ''
       }
     }
   },
   methods: {
-    toDetail(item) {
-      this.transferTo('/career/plan/UniversityDetail', {code: item.universityCode})
-    },
-    search() {
-      if (this.form.universityCode == '') {
-        this.$message.warning('请先选择院校')
-        return
-      }
-      this.getList()
-    },
     changeUniversity(data) {
-      console.log(data)
       this.dialog.visible = false
       this.college = data
       this.form.universityCode = data.code
-    },
-    getMajorYears() {
-      recruitPlanYears().then(res => {
-        this.form.year = res.rows[0]
-        this.years = res.rows
-      })
-    },
-    getMajorLevels() {
-      recruitPlanTypes({year: this.form.year}).then(res => {
-        this.form.type = res.rows[0]
-        this.types = res.rows
-      })
-    },
-    getList() {
-      recruitPlan({...this.form, ...this.pageForm}).then(res => {
-        console.log(res)
-        this.rows = res.rows
-        this.total = res.total
-      })
     }
   }
 }
@@ -177,11 +56,11 @@ export default {
     line-height: 40px;
 
     &:hover {
-      color: #47C6A2;
+      color: var(--themeColor);
     }
 
     &.bg-primary {
-      background: #47C6A2;
+      background: var(--themeColor);
       color: white;
       border: 0px;
     }

src/views/career/plan/index.vue

@@ -1,530 +1,15 @@
 <template>
-  <div>
-    <div class="career-container">
-      <div class="career-wrapper">
-        <div>
-          <div class="top-image" v-if="curType == 0">
-            <img src="@/assets/images/img_zhiyuan_banner.png" />
-          </div>
-          <course-tab-page v-if="curType == 7 || curType == 0" />
-        </div>
-        <div class="career-others">
-          <div class="career-others-left"></div>
-          <div class="career-others-right"></div>
-        </div>
-      </div>
-    </div>
-<!--    <div class="index_container">-->
-<!--      <div class="left_content">-->
-<!--        &lt;!&ndash; 测评 &ndash;&gt;-->
-<!--        <div class="ceping">-->
-<!--          <div>-->
-<!--            <div class="tit" style="color: #47c6a2">-->
-<!--              专业兴趣测评（HOLLAND）-->
-<!--            </div>-->
-<!--            <div class="desc">-->
-<!--              霍兰德职业兴趣测评（Self-Directed-->
-<!--              Search）是由美国职业指导专家霍兰德（John-->
-<!--              Holland）根据他本人大量的职业咨询经验及其职业类型理论编制的测评工具。霍兰德认为，个人职业兴趣特性与职业之间应有一种内在的对应关系。根据兴趣的不同，人格可分为研究型（I）、艺术型（A）、社会型（S）、企业型（E）、传统型（C）、现实型（R）六个维度，每个人的性格都是这六个维度的不同程度组合。-->
-<!--            </div>-->
-<!--            <div class="desc_bottom">-->
-<!--              职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。-->
-<!--            </div>-->
-<!--            <div>-->
-<!--              <el-button type="primary" round @click="goCareer('HOLLAND')"-->
-<!--                >进入评测</el-button-->
-<!--              >-->
-<!--              <el-button-->
-<!--                type="primary"-->
-<!--                plain-->
-<!--                round-->
-<!--                @click="goReportList('HOLLAND')"-->
-<!--                >查看记录</el-button-->
-<!--              >-->
-<!--            </div>-->
-<!--          </div>-->
-<!--          <div>-->
-<!--            <div class="tit" style="color: #1a74d3">-->
-<!--              专业兴趣测评（HOLLAND）-->
-<!--            </div>-->
-<!--            <div class="desc">-->
-<!--              MBTI已成为最权威的性格测评工具，它已经被翻译成近20种世界主要语言，每年使用者多达200多万，其中不乏世界500强的大型企业。MBTI是一种迫选型、自我报告式的性格测试，用以衡量和描述人们在获取信息、做出决策、对待生活等方面的心理活动规律和性格类型。它以瑞士心理学家Carl-->
-<!--              G.Jung（荣格）的性格理论为基础，由美国的心理学家Katherine Cook-->
-<!--              Briggs 和她的女儿Isabel Briggs Myers共同研究开发。-->
-<!--            </div>-->
-<!--            <div class="desc_bottom">-->
-<!--              职业性格测评，定位于高中生的职业性格特征，从与职业和专业选择密切相关的4类性格特征入手，全面深入地了解个人的职业性格优势和偏好，并提供应用测评结果指导生涯规划以及大学专业选择的建议。-->
-<!--            </div>-->
-<!--            <div>-->
-<!--              <el-button-->
-<!--                style="background: #1a74d3; color: white"-->
-<!--                round-->
-<!--                @click="goCareer('BMTI')"-->
-<!--                >进入评测</el-button-->
-<!--              >-->
-<!--              <el-button-->
-<!--                style="border: 1px solid #1a74d3; color: #1a74d3"-->
-<!--                @click="goReportList('MBTI')"-->
-<!--                plain-->
-<!--                round-->
-<!--                >查看记录</el-button-->
-<!--              >-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        &lt;!&ndash; 三大库 &ndash;&gt;-->
-<!--        <div class="three_library" style="margin-bottom: 40px">-->
-<!--          <div class="three_library_top">-->
-<!--            <img src="@/assets/images/career/icon_sandaku.png" alt="" />-->
-<!--            <span style="margin-left: 8px">三大库</span>-->
-<!--          </div>-->
-<!--          <div style="display: flex; justify-content: space-between">-->
-<!--            <img-->
-<!--              @click="toDetail('/career/plan/UniversitiesColleges')"-->
-<!--              src="@/assets/images/career/img_UNIVERSITIES.png"-->
-<!--              alt="院校库"-->
-<!--            />-->
-<!--            <img-->
-<!--              src="@/assets/images/career/img_major.png"-->
-<!--              @click="toDetail('/career/plan/ProfessLib')"-->
-<!--              alt="专业库"-->
-<!--            />-->
-<!--            <img-->
-<!--              src="@/assets/images/career/img_zhiyeku.png"-->
-<!--              @click="toDetail('/career/vocation/index')"-->
-<!--              alt="职业库"-->
-<!--            />-->
-<!--          </div>-->
-<!--          &lt;!&ndash;  选科查询  &ndash;&gt;-->
-<!--          <div style="margin-top: 22px; margin-bottom: 35px">-->
-<!--            <img-->
-<!--              @click="toDetail('/career/subject/index')"-->
-<!--              src="@/assets/images/career/xuanke.png"-->
-<!--              alt="选科查询"-->
-<!--            />-->
-<!--          </div>-->
-<!--          &lt;!&ndash;  模拟志愿 &ndash;&gt;-->
-<!--          <div style="display: flex; justify-content: space-between">-->
-<!--            <div style="margin-right: 16px; position: relative">-->
-<!--              <img-->
-<!--                src="@/assets/images/career/img_monizhiyuan.png"-->
-<!--                alt="模拟志愿"-->
-<!--              />-->
-<!--              <el-button-->
-<!--                type="primary"-->
-<!--                style="position: absolute; left: 35px; bottom: 20px"-->
-<!--                size="mini"-->
-<!--                round-->
-<!--                @click="toDetail('/career/SimulatedVolunteer')"-->
-<!--                >进入评测</el-button-->
-<!--              >-->
-<!--            </div>-->
-<!--            <div-->
-<!--              style="-->
-<!--                display: flex;-->
-<!--                justify-content: space-between;-->
-<!--                align-content: space-between;-->
-<!--                flex-wrap: wrap;-->
-<!--              "-->
-<!--            >-->
-<!--              <img-->
-<!--                @click="toDetail('/career/batch')"-->
-<!--                style="height: 135px"-->
-<!--                src="@/assets/images/career/img_picikongzhi.png"-->
-<!--                alt="批次控制线"-->
-<!--              />-->
-<!--              <img-->
-<!--                style="height: 135px"-->
-<!--                @click="toDetail('/career/yfyd')"-->
-<!--                src="@/assets/images/career/img_yifenyiduan.png"-->
-<!--                alt="一分一段"-->
-<!--              />-->
-<!--              <img-->
-<!--                style="height: 135px"-->
-<!--                src="@/assets/images/career/img_toudangxian.png"-->
-<!--                @click="toDetail('/career/ShiftLine')"-->
-<!--                alt="投档线"-->
-<!--              />-->
-<!--              <img-->
-<!--                style="height: 135px"-->
-<!--                src="@/assets/images/career/img_gaokaomingci.png"-->
-<!--                @click="toDetail('/career/gkmc/index')"-->
-<!--                alt="高考名词"-->
-<!--              />-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        &lt;!&ndash; tabs &ndash;&gt;-->
-<!--        <div>-->
-<!--          <div style="margin-bottom: 16px; display: flex; align-items: center">-->
-<!--            高考资讯-->
-<!--            <span style="color: #8a8a8a; font-size: 12px; margin: 0 8px"-->
-<!--              >最新、最全的高考资讯</span-->
-<!--            >-->
-<!--            &lt;!&ndash; <span class="more">更多>></span> &ndash;&gt;-->
-<!--          </div>-->
-<!--          <el-tabs v-model="activeName" @tab-click="handleClick">-->
-<!--            <el-tab-pane-->
-<!--              v-for="(item, index) in newsList"-->
-<!--              :key="index"-->
-<!--              :label="item.label"-->
-<!--              :name="item.label"-->
-<!--            >-->
-<!--              <div class="news">-->
-<!--                <a-->
-<!--                  class="news_item"-->
-<!--                  v-for="(item, index) in newsDataList"-->
-<!--                  :key="index"-->
-<!--                  @click="toNews(item.id,)"-->
-<!--                >-->
-<!--                  {{ item.createTime.split(" ")[0] }}{{ item.title }}-->
-<!--                </a>-->
-<!--              </div>-->
-<!--            </el-tab-pane>-->
-<!--          </el-tabs>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <div class="right_top">-->
-<!--        &lt;!&ndash; 热门院校榜单 &ndash;&gt;-->
-<!--        <div class="university_top">-->
-<!--          <div class="tit">-->
-<!--            <img src="@/assets/images/career/icon_hot.png" alt="热门院校榜单" />-->
-<!--            <span>热门院校榜单</span>-->
-<!--          </div>-->
-<!--          <div class="top_data">-->
-<!--            <div-->
-<!--              class="item"-->
-<!--              v-for="(item, index) in universitiesTopList"-->
-<!--              :key="item.id"-->
-<!--            >-->
-<!--              <div>-->
-<!--                <span class="index" :class="{ top_active: index < 3 }">{{-->
-<!--                  index + 1-->
-<!--                }}</span-->
-<!--                ><a @click="toUniversity(item.univerid)">{{ item.name }}</a>-->
-<!--              </div>-->
-
-<!--              <div class="count">-->
-<!--                <img-->
-<!--                  style="margin-right: 4px"-->
-<!--                  src="@/assets/images/career/icon_star.png"-->
-<!--                  alt=""-->
-<!--                />-->
-<!--                <span>{{ item.favorities }}人</span>-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        &lt;!&ndash; 热门专业榜单 &ndash;&gt;-->
-<!--        <div class="marjor_top">-->
-<!--          <div class="tit">-->
-<!--            <img-->
-<!--              src="@/assets/images/career/icon_hot2.png"-->
-<!--              alt="热门专业榜单"-->
-<!--            />-->
-<!--            <span>热门专业榜单</span>-->
-<!--          </div>-->
-<!--          <div class="top_data">-->
-<!--            <div-->
-<!--              class="item"-->
-<!--              v-for="(item, index) in marjorTopList"-->
-<!--              :key="item.id"-->
-<!--            >-->
-<!--              <div>-->
-<!--                <span class="index" :class="{ top_active: index < 3 }">{{-->
-<!--                  index + 1-->
-<!--                }}</span-->
-<!--                ><a @click="goMarjorDetail(item.id)">{{ item.name }}</a>-->
-<!--              </div>-->
-
-<!--              <div class="count">-->
-<!--                <img-->
-<!--                  style="margin-right: 4px"-->
-<!--                  src="@/assets/images/career/icon_star.png"-->
-<!--                  alt=""-->
-<!--                />-->
-<!--                <span>{{ item.favorities }}人</span>-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
+  <div class="bg-page fx-column fx-cen-cen">
+    <el-image :src="require('@/assets/images/img_zhiyuan_banner.png')" class="index-block" fit="cover" />
+    <course-tab-page class="bg-white index-block fx-column" />
   </div>
 </template>
 <script>
-import courseTabPage from "../components/courseTabPage.vue";
-import * as career from "@/api/webApi/career-news";
+import courseTabPage from '../components/courseTabPage.vue'
+
 export default {
-  components: { courseTabPage },
-  data() {
-    return {
-      curType: 0,
-      activeName: "",
-      newsList: [],
-      newsDataList: [],
-      universitiesTopList: [],
-      marjorTopList: [],
-    };
-  },
-  watch: {
-    $route: function (res) {
-      this.switchType(res.query);
-    },
-  },
-  created() {
-    this.getTypes();
-    career
-      .universitiesTop({
-        pageNum: 1,
-        pageSize: 10,
-      })
-      .then((res) => {
-        this.universitiesTopList = res.rows;
-        console.log(res);
-      });
-    career
-      .marjorsTop({
-        pageNum: 1,
-        pageSize: 10,
-      })
-      .then((res) => {
-        this.marjorTopList = res.rows;
-        console.log(res);
-      });
-  },
-  methods: {
-    goMarjorDetail(id) {
-      this.$router.push({
-        path: "/career/plan/ProfessLibDetail",
-        query: {
-          majorId: id,
-        },
-      });
-    },
-    toUniversity(id) {
-      this.$router.push({ name: "UniversityDetail", params: { id: id } });
-    },
-    toNews(id) {
-      this.$router.push({path:"/career/info/index",query:{name:this.activeName}});
-    },
-    handleClick(e) {
-      console.log(e.name);
-      this.getList();
-    },
-    getTypes() {
-      career.types().then((res) => {
-        this.activeName = res.rows[0].label;
-        this.newsList = res.rows;
-        this.getList();
-        console.log("career news res", res);
-      });
-    },
-    getList() {
-      career
-        .list({
-          pageNum: 1,
-          pageSize: 10,
-          tag: "hot",
-          type: this.activeName,
-        })
-        .then((res) => {
-          this.newsDataList = res.rows;
-          console.log(res);
-        });
-    },
-    toDetail(path) {
-      console.log(path);
-      this.$router.push(path);
-    },
-    goCareer(type) {
-      if (type === "HOLLAND") {
-        this.$router.push({
-          name: "CareerEvaDetail",
-          params: { type: "HOLLAND" },
-        });
-      } else if (type === "BMTI") {
-        this.$router.push({
-          name: "CareerEvaDetail",
-          params: { type: "BMTI" },
-        });
-      }
-    },
-    goReportList(type) {
-      if (type === "HOLLAND") {
-        this.$router.push({ name: "CareerHollandReportList" });
-      } else if (type === "MBTI") {
-        this.$router.push({ name: "CareerMbtiReportList" });
-      }
-    },
-    switchType(data) {
-      this.curType = parseInt(data.id) || 0;
-      switch (this.curType) {
-        case 2:
-          break;
-        case 3:
-          break;
-        case 4:
-          break;
-        case 5:
-          break;
-        default:
-          break;
-      }
-    },
-  },
-};
+  components: { courseTabPage }
+}
 </script>
 <style lang="scss" scoped>
-#app .hideSidebarNone .main-container {
-  margin-left: 0px;
-  background: #f7f7f7 !important;
-}
-.career-container {
-  background-color: #ffffff;
-  padding: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.index_container {
-  padding: 20px;
-  display: flex;
-  justify-content: space-between;
-  background: #f7f7f7;
-}
-.index_container .left_content {
-  width: 884px;
-}
-.right_top {
-  flex: 1;
-  margin-left: 16px;
-  background: #f7f7f7;
-}
-.right_top .tit {
-  display: flex;
-  align-content: center;
-  font-size: 18px;
-  font-weight: 500;
-  color: #343434;
-  line-height: 25px;
-  padding-bottom: 16px;
-  border-bottom: 2px solid #6a6a6a;
-}
-.career-wrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.top-image {
-  height: 360px;
-  margin-bottom: 20px;
-  background: #ccc;
-}
-.top-image img {
-  width: 100%;
-  height: 100%;
-}
-.ceping {
-  display: flex;
-  margin-bottom: 35px;
-}
-.ceping > div {
-  margin-right: 16px;
-  background: #ffffff;
-  padding: 24px 20px 16px 30px;
-}
-.ceping > div:last-child {
-  margin-right: 0;
-}
-.ceping .tit {
-  font-size: 16px;
-  margin-bottom: 16px;
-}
-.ceping .desc {
-  font-size: 10px;
-  margin-bottom: 16px;
-  font-weight: 400;
-  color: #8b8b8b;
-  line-height: 14px;
-}
-.ceping .desc_bottom {
-  font-size: 10px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #343434;
-  line-height: 14px;
-  margin-bottom: 30px;
-}
-.three_library img {
-  cursor: pointer;
-}
-.three_library_top {
-  display: flex;
-  margin-bottom: 16px;
-  align-items: center;
-  color: #47c6a2;
-}
-.top_data {
-  padding: 32px 27px;
-  margin-bottom: 100px;
-}
-.item {
-  display: flex;
-  align-items: center;
-  color: #343434;
-  font-size: 14px;
-  justify-content: space-between;
-  margin-bottom: 24px;
-}
-.item:last-child {
-  margin-bottom: 0;
-}
-.item .index {
-  width: 15px;
-  display: inline-block;
-  margin-right: 16px;
-  height: 15px;
-  font-size: 10px;
-  color: #7b7b7b;
-  background: #d8d8d8;
-  border-radius: 50%;
-  line-height: 15px;
-  text-align: center;
-}
-.item .count {
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  font-weight: 400;
-  color: #8b8b8b;
-}
-.more {
-  background: #a6a6a6;
-  border-radius: 16px;
-  opacity: 0.16;
-  padding: 2px 14px;
-}
-.news {
-  display: flex;
-  flex-wrap: wrap;
-}
-.news .news_item {
-  flex: 0 0 50%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding-right: 50px;
-  margin-bottom: 24px;
-}
-.news .news_item:hover {
-  color: #47c6a2;
-}
-a:hover {
-  color: #47c6a2;
-}
-.item .top_active {
-  background: #1a74d3;
-  color: white;
-}
 </style>

src/views/career/plan/new-major-detail.vue

@@ -81,10 +81,10 @@
 import MxChart from '@/components/MxChart/index'
 import { getMajorCareerProspectsByCode, getMajorOverviewByCode } from '@/api/webApi/professlib'
 import MxMajorTreeTranslateMixin from '@/components/Cache/modules/mx-major-tree-translate-mixin'
-import OpenCollege from '@/views/career/plan/compoents/OpenCollege'
+import OpenCollege from '@/views/career/plan/components/OpenCollege'
 import { addConcernMajor, removeConcernedMajor } from '@/api/webApi/career-other'
-import MajorIntroduceInfo from '@/views/career/plan/compoents/major-introduce-info'
-import MajorIntroduceJob from '@/views/career/plan/compoents/major-introduce-job'
+import MajorIntroduceInfo from '@/views/career/plan/components/major-introduce-info'
+import MajorIntroduceJob from '@/views/career/plan/components/major-introduce-job'
 
 export default {
   name: 'ProfessLibDetails',