front/src/views/career/vocation/old-detail.vue

<template>
  <div id="jobDetail" ref="jobDetail" style="padding:24px 8%;background-color:#f7f7f7;" v-loading="loading">
    <el-card style="color: #5E5E5E;" ref="navBar">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/career/vocation/index'}">职业库</el-breadcrumb-item>
        <el-breadcrumb-item>职业详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <div  style="background-color: #F0F3FC;margin-top:10px;" class="header">
      <div class="left" :style="{'backgroundColor':theme,'text-align':'center'}">
        <div>
        <h1 style="margin: 0;font-size: 40px;color:#525252;">{{jobDetails.name}}</h1>
        </div>
      </div>
      <div class="right" style="padding:30px;">
        <div v-html="jobDetails.zysm" class="headerText"></div>
      </div>
    </div>
    <div style="margin-top: 20px;background-color: #ffffff" v-for="(item,index) in contentArr">
      <div style="display: flex;justify-content: space-between;padding:30px 10px 0 10px;">
        <span :style="{'color':theme}" style="background-color:#F0F3FC;font-size:16px;font-weight:bold;padding:12px 100px 10px 50px;display:inline-block;clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);">{{getDeatailCon(index,'title')}}</span>
        <span :style="{'color':theme}" style="font-size:36px;color:#FCE1B0;">{{getDeatailCon(index,'title02')}}</span>
      </div>
      <div style="padding:30px" v-html="getDeatailCon(index,item)"></div>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex';
  import {getJobDetail} from '@/api/webApi/vocation'
    export default {
        name: "Detail",
      data(){
          return {
            loading:false,
            jobId:'',
            jobDetails:{},
            contentArr:['zydy','rwzz','zsbj','zyjn','cyzg','cygj','fzqj'],
            title1:['职业定义','任务职责','知识背景','职业技能','从业资格','常用工具','发展前景'],
            title2:['PROFESSIONAL DETAILS','COLLEGES AND UNIVERSITIES','CHARACTERISTICS','CHARACTERISTICS','CHARACTERISTICS','CHARACTERISTICS']
          }
      },
      computed:{
        ...mapState({theme: state => state.settings.theme}),
        getDeatailCon(){
        return function (id,type){
            if(type==='title'){
              return this.title1[id]
            }
            if(type==='title02'){
              return this.title2[id]
            }
          const flag=this.contentArr.some(item=>{
            return item===type
          })
          if(flag){
            return this.jobDetails[type]
          }
        }
        }
      },
      watch:{
        theme:{
          immediate:true,
          handler(val){
            this.$nextTick(()=>{
              this.$refs.jobDetail.style.setProperty('--themeColor', val)
            })
          }
        },
          '$route':{
            immediate:true,
            handler(val){
              this.jobId=val.query.id;
              if(val.query.id){
                this.getJobDetail();
              }
            }
          }
      },
      methods:{
          getJobDetail(){
            this.loading=true
            const params={
              jobId:this.jobId
            };
            getJobDetail(params).then(res=>{
              this.jobDetails=res.data
              this.loading=false;
            })
          }
      }
    }
</script>
<style scoped lang="scss">
  #jobDetail{
    font-family: PingFangSC-Semibold, PingFang SC;
    .header{
      .headerText{
        p{
          background-color: #1ab394 !important;
        }
      }
    }
  }
</style>
<style lang="scss">
  #jobDetail {
    .header {
      .left{
        display: table-cell;
        width:25%;
        vertical-align: middle;
      }
      .right{
        display: table-cell;
      }
      .headerText {
       p {
          span{
            background-color: transparent !important;
          }
          background-color: transparent !important;
        }
      }

    }
  }
</style>