|
|
@@ -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>
|
|
|
+
|
shilipojs