<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: '/index' }">首页</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>
