xjc-vue/src/views/xjc-integratedmachine/environment/university_talent_base.vue

<template>
  <div class="pro_details_video">
    <head-component :headinfo=headinfo></head-component>
    <div class="page-content">
      <div class="page-img-box">

        <div class="bottom-content">
          <div class="tab-box">
            <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
              卓越工程师
            </div>
            <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
              重点实验室
            </div>
            <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
              理科基地
            </div>
            <div :class="[fourPage?'item-box-active':'item-box']" @click="showPage(4)">
              文科基地
            </div>
            <div :class="[fivePage?'item-box-active':'item-box']" @click="showPage(5)">
              工科基地
            </div>
            <div :class="[sixPage?'item-box-active':'item-box']" @click="showPage(6)">
              珠峰计划
            </div>
          </div>
          <div class="one-page" v-show="onePage">
            <p class="title">卓越工程师</p>
            <div class="info"  v-html="data_list[0].content"></div>
          </div>
          <div class="one-page" v-show="twoPage">
            <p class="title">重点实验室</p>
            <div class="info"  v-html="data_list[1].content"></div>
          </div>
          <div class="one-page" v-show="threePage">
            <p class="title">理科基地</p>
            <div class="info"  v-html="data_list[2].content"></div>
          </div>
          <div class="one-page" v-show="fourPage">
            <p class="title">文科基地</p>
            <div class="info"  v-html="data_list[3].content"></div>
          </div>
          <div class="one-page" v-show="fivePage">
            <p class="title">工科基地</p>
            <div class="info"  v-html="data_list[4].content"></div>
          </div>
          <div class="one-page" v-show="fivePage">
            <p class="title">珠峰计划</p>
            <div class="info"  v-html="data_list[5].content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
import {specialtyDetail} from '@/api/xjc-integratedmachine/environment/specialty.js'
import {ref} from "vue";
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
import {handleThemeStyle} from "@/utils/theme.js";
import useSettingsStore from "@/store/modules/settings.js";

const {proxy} = getCurrentInstance()
const {educationlevel} = proxy.useDict('educationlevel')
import {talentbase} from '@/api/xjc-integratedmachine/environment/tscareer.js'

const router = useRouter()
const route = useRoute()
const tabIndex = ref("zyjd")
const headinfo = ref({})
const onePage = ref(true)
const twoPage = ref(false)
const threePage = ref(false)
const fourPage = ref(false)
const fivePage = ref(false)
const sixPage = ref(false)

function setHeadinfo(){
  headinfo.value = {
    title: '学职资讯',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
    homeUrl:'/xjc-integratedmachine/environment/index',
    contrast:true,
    contrastType:'major'
  }
}

onMounted(() => {
  setHeadinfo()

})

const param = route.query



const entity = ref({})
const kaishe_list = ref([])
const pinggu_list = ref([])
const similar_list = ref([])
const collectionRef = ref(null)
const collection_data = ref({})
function setCollection_data(){
  collection_data.value = {
    contentType: 2,
    contentId: param.id,
    contentVal: entity.value,
    source:'pro_details_video'
  }
  console.log("entity.value",entity.value)
}
function detail() {
  specialtyDetail({
    id: param.id
  }).then(resp => {
    entity.value = resp.entity
    kaishe_list.value = resp.kaishe_list
    pinggu_list.value = resp.pinggu_list
    similar_list.value = resp.similar_list
    entity.value.kaishe_list = kaishe_list
  })
  setTimeout(() => {
    setCollection_data();
    collectionRef.value.isContrast(entity.value);
    collectionRef.value.getSource('pro_details_video');
  }, 500);
}


const showPage = (val) => {
  if (val === 1) {
    onePage.value = true;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = false;

  } else if (val === 2) {
    onePage.value = false;
    twoPage.value = true;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = false;
  } else if (val === 3) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = true;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = false;
  } else if (val === 4) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = true;
    fivePage.value = false;
    sixPage.value = false;
  } else if (val === 5) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = true;
  }
}
detail()
function dialogBeforeClose() {
  onePage.value = true;
  twoPage.value = false;
  threePage.value = false;
  fourPage.value = false;
  fivePage.value = false;
  sixPage.value = false
  senvenPage.value = false
  eightPage.value = false;
}



const tab = ref("zygcs")

function changeTab(path) {
  tab.value = path
}
const data_list = ref([])
function base() {
  talentbase({}).then(resp =>{
    data_list.value = resp.talentbase
  })
}
base();
</script>

<style scoped lang="scss">
p, div {
  margin: 0;
  padding: 0;
}

.pro_details_video {
  background: url('@/assets/images/environment/university-detail.png') no-repeat;
  background-size: 1920px 1080px;
  z-index: 10;
  width: 100%;
  height: 1080px;

  .page-content {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 0;
    display: flex;
    justify-content: center;
  }

  .page-img-box {
    width: 1832px;
    height: 922px;
    margin-top: 13px;
    //background: rgba(255, 255, 255, 0.4);
    border-radius: 35px 35px 35px 35px;
    display: flex;
    flex-direction: column;


  }


  .bottom-content {
    //margin-top: 10px;
    border: 1px solid;
    height: 922px;
    .tab-box {
      display: flex;
      padding-right: 279px;
      //height: 922px;
      img {
        width: 36px;
        height: 36px;
        margin-right: 12px;
      }
    }


    .item-box {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 202px;
      height: 65px;
      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
      border-radius: 5px 5px 0px 0px;
      font-weight: 400;
      font-size: 32px;
      color: #979797;

    }

    .item-box-active {
      text-align: center;
      color: #000000;
      background: #FFFFFF;
      font-weight: bold;
      font-size: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 202px;
      height: 65px;
      background: #FFFFFF;
      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
      border-radius: 5px 5px 0px 0px;

    }
  }

  //.editor-content div,
  //.editor-content span,
  //.editor-content p,
  //.editor-content h1,
  //.editor-content h2,
  //.editor-content h3,
  //.editor-content h4,
  //.editor-content h5,
  //.editor-content h6 {
  //  font-size: 26px !important;
  //  line-height: 37px !important;
  //}

  .editor-content div,
  .editor-content span,
  .editor-content p {
    text-indent: 2em !important;
    text-align: left !important;
  }
}

.one-page {
  width: 1832px;
  height: 836px;
  background: #FFFFFF;
  border-radius: 0px 0px 35px 35px;
  border: 1px solid #FFFFFF;
  overflow: auto;
  line-height: 32px;
  padding-top: 10px;
  .title {
    height: 40px;
    border-left: 8px #8CE349 solid;
    margin-left: 33px;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
    line-height: 40px;
    padding-left: 11px;
  }

  .info {
    text-indent: 2em;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
    line-height: 40px;
  }

  .select-div {
    width: 100%;
    height: 100px;
    font-weight: 400;
    font-size: 30px;
    color: #333333;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 21px;

    .select-box {
      width: 300px;
      height: 90px;
      border: 1px solid #CCCCCC;
      line-height: 90px;
      text-align: center;
      margin-left: 10px;
    }

    .click-search {
      width: 170px;
      height: 90px;
      background: linear-gradient(180deg, #73EE71 0%, #0ACB63 100%);
      border-radius: 5px;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      margin-left: 20px;
    }
  }

  ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
    height: 74px !important;
    font-size: 24px;
    color: #1E410E;
  }

  ::v-deep .el-table tr {
    height: 74px !important;
    font-size: 20px;
  }

  ::v-deep .el-dialog__title {
    font-size: 34px !important;
  }

  ::v-deep .el-dialog {
    margin-top: 0px !important;
  }

  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 30px !important;
  }

}
.dict-dialog{
  max-width: 570px;
  height: 800px;
  overflow: auto;
  .dict-box {
    font-size: 24px;
    line-height: 34px;
    color: #333333;
  }
}

</style>