新版专业库列表页

src/api/webApi/professlib.js

@@ -1,5 +1,16 @@
 import request from '@/utils/request'
 
+
+
+
+// 专业库-所有专业
+export function allMajor(params) {
+  return request({
+    url: '/front/major/getAllMajor',
+    method: 'get',
+    params:params
+  })
+}
 // 专业库-专业大类
 export function getProfesslibData(params) {
   return request({

src/router/index.js

@@ -636,7 +636,7 @@ export const constantRoutes = [{
       },
       {
         path: '/career/plan/ProfessLib',
-        component: (resolve) => require(['@/views/career/plan/ProfessLib'], resolve),
+        component: (resolve) => require(['@/views/career/plan/new-profess-lib'], resolve),
         name: 'ProfessLib',
         meta: {
           title: '专业库'

src/views/career/plan/new-profess-lib.vue

@@ -0,0 +1,202 @@
+<template>
+  <div id="vocation" ref="vocation">
+    <el-card style="height:158px;margin: 10px auto;">
+      <div :style="{'background-image':backimg}" class="back">
+        <p style="color:#A6A6A6;font-size:24px;font-weight:bold;">Professional library</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;" />
+      </div>
+    </el-card>
+    <el-card class="box-card" >
+      <div slot="header"  >
+        <span class="tabs-item" @click="type = '本科'" :class="{'bg-primary':type == '本科'}">本科</span>
+        <span class="tabs-item" @click="type = '专科'" :class="{'bg-primary':type == '专科'}">专科</span>
+        <p class="line"></p>
+        <div class="tags-wrap">
+          <a :href="`#${item.code}`" class="tag" v-for="item in levelOne">{{ item.name }}</a>
+        </div>
+      </div>
+      <div class="list-wrap">
+        <!--  一级 -->
+        <div class="levelOne" v-for="item in majorList" :id="item.code">
+          <!--   一级专业title-->
+          <p class="voca-title mt10 mb10 bold" >{{`${item.name} (${item.code}) `}}</p>
+          <div class="last-level" v-for="subLevel in item.children">
+            <!--  二级专业 -->
+            <p class="sub-title">{{`${subLevel.name} (${subLevel.code}) `}}</p>
+            <!--  三级专业 -->
+            <div class="last-children-wrap" v-if="subLevel.children.length > 0">
+              <span @click="goDetail(vocation.code)" class="last-children" v-for="vocation in subLevel.children">{{vocation.name}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex';
+import { allMajor } from '@/api/webApi/professlib';
+export default {
+  name: "index",
+  data(){
+    return {
+      backimg:'url('+require('@/assets/images/icon_pro.png')+')',
+      levelOne: [], // 专业大类
+      type: '本科',
+      majorList: []
+    }
+  },
+  computed:{
+    ...mapState({theme: state => state.settings.theme})
+  },
+  watch:{
+    theme:{
+      immediate:true,
+      handler(val){
+        this.$nextTick(()=>{
+          this.$refs.vocation.style.setProperty('--themeColor', val)
+        })
+      }
+    },
+    type: {
+      immediate:true,
+      handler(val){
+        console.log(val)
+        this.getAllMajor()
+      }
+    }
+  },
+  methods:{
+    goDetail(code){
+      this.$router.push({name:'jobDetail',query:{code:code}})
+    },
+    getAllMajor() {
+      allMajor({
+        type: this.type
+      }).then(res => {
+        console.log(res)
+        this.majorList = res.data
+        this.levelOne = res.data.map(item => {
+          return {
+            code: item.code,
+            name: item.name,
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+#vocation{
+  .levelOne{
+    padding-top:100px;
+    margin-top:-100px;
+  }
+  .layui-bg-orange{
+    background-color: var(--themeColor);
+    margin-left:0;
+  }
+  .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:#47C6A2;
+      }
+      &.bg-primary{
+        background: #47C6A2 ;
+        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: 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/vocation/new-index.vue

@@ -1,10 +1,12 @@
 <template>
-  <div id="vocation" ref="vocation" style="background-color:#f7f7f7;">
-    <div :style="{'background-image':backimg}" class="back">
-      <p style="color:#A6A6A6;font-size:24px;font-weight:bold;">CAREER POOL</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;" />
-    </div>
+  <div id="vocation" ref="vocation">
+    <el-card style="height:158px;margin: 10px auto;">
+      <div :style="{'background-image':backimg}" class="back">
+        <p style="color:#A6A6A6;font-size:24px;font-weight:bold;">CAREER POOL</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;" />
+      </div>
+    </el-card>
     <el-card class="box-card">
       <div slot="header" >
         <div class="title">职业列表</div>
@@ -15,9 +17,9 @@
       </div>
       <div class="list-wrap">
         <!--  一级 -->
-        <div class="levelOne" v-for="item in vocationList">
+        <div class="levelOne" v-for="item in vocationList" :id="item.code">
           <!--   一级职业title-->
-          <p class="voca-title mt10 mb10 bold" :id="item.code">{{item.name}}</p>
+          <p class="voca-title mt10 mb10 bold" >{{item.name}}</p>
           <div class="last-level" v-for="subLevel in item.children">
             <!--  二级职业 -->
             <p class="sub-title">{{subLevel.name}}</p>
@@ -83,6 +85,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 #vocation{
+  .levelOne{
+    padding-top:100px;
+    margin-top:-100px;
+  }
   .layui-bg-orange{
     background-color: var(--themeColor);
     margin-left:0;