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

<template>
  <div class="pro_details_video" v-loading="loading">
    <head-component :headinfo=headinfo ref="headinfoRef"></head-component>
    <div class="page-content">
      <div class="page-img-box">
        <div class="top-content">
          <div class="top-content-right">
            <div class="right-top">
              <p class="title">{{ entity.name }}</p>
              <div class="right-top-icon">
                <collectionComponent ref="collectionRef" :collection="collection_data"></collectionComponent>
              </div>
            </div>
            <div class="content-info">
              <p>专业代码:{{ entity.code }}</p>
              <p>
                学历层次:
                <dict-tag :options="educationlevel" :value="entity.bkzk"/>
              </p>
              <p>修学年限:{{ entity.years }}</p>
              <p>授予学位:{{ entity.degree }}</p>
            </div>
          </div>
          <div class="info-box">
            <p class="title">开设课程</p>
            <div class="info-text" v-html="entity.course">
            </div>
          </div>
          <div class="info-box">
            <p class="title">相近专业</p>
            <div class="info">
              <div class="info-item"  v-for="(item,index) in similar_list" @click="toDetail(item)">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <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>
          <div class="one-page" v-show="onePage">
            <p class="title">专业解读</p>
            <div class="info"  v-html="entity.describe"></div>
          </div>
          <div class="one-page" v-show="twoPage">
            <p class="title">开设院校</p>
            <div class="info"  v-for="(item,index) in kaishe_list">
              {{ item.name }}
            </div>
          </div>
          <div class="one-page" v-show="threePage">
            <p class="title">学科评估</p>
            <div class="info"   v-for="(item,index) in pinggu_list">
              {{ item.name }}
            </div>
          </div>
          <div class="one-page" v-show="fourPage">
            <p class="title">就业前景</p>
            <div class="info"   v-html="entity.employment">
            </div>
          </div>
          <div class="one-page" v-show="fivePage">
            <p class="title">专业视频</p>
            <div  ref="videoContainer" class="video-container"  v-if="entity.path">
              <video ref="videoPlayer" id="playerId" class="video-js vjs-default-skin" controls preload="auto"
                     :data-setup="{}">
                <!-- 可以在这里插入source标签以指定你的视频源 -->
                <source :src="entity.path" type="video/mp4">
              </video>
            </div>
          </div>
        </div>
        </div>
    </div>
    <el-dialog
        v-model="fivePage"
        @before-close="dialogBeforeClose"
        destroy-on-close
        title="专业视频"
        width="1832px"
        height="915px"
        center
        align-center
        v-if="entity.path"
    >
      <div class="video-content" >
        <video ref="videoPlayer" video preload="auto" autoplay muted controls width="1798" height="900">
          <source :src="entity.path" type="video/mp4">
        </video>
      </div>
    </el-dialog>
  </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 {provide, 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')


const router = useRouter()
const route = useRoute()
const tabIndex = ref("zyjd")
const headinfo = ref({})
const headinfoRef = ref(null);

const onePage = ref(true)
const twoPage = ref(false)
const threePage = ref(false)
const fourPage = ref(false)
const fivePage = ref(false)
const loading = 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:2
  }
}

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(id) {
  loading.value = true;
  specialtyDetail({
    id: id || param.id
  }).then(resp => {
    resp.entity.smoSpecialty = resp.smoSpecialty
    resp.entity.compare = resp.compare
    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
    loading.value = false
    setCollection_data()
    collectionRef.value.getIsContrast(entity.value)
    if (headinfoRef.value) {
      headinfoRef.value.getCompareSizeData(2); // 调用子组件的 sayHello 函数
    }
  })
setTimeout(() => {
    setCollection_data()
  }, 500);
}


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

  } else if (val === 2) {
    onePage.value = false;
    twoPage.value = true;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;

  } else if (val === 3) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = true;
    fourPage.value = false;
    fivePage.value = false;

  } else if (val === 4) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = true;
    fivePage.value = false;

  } else if (val === 5) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = true;
  } else if (val === 6) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
  } else if (val === 7) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
  } else if (val === 8) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
  }
}
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;
}
function toDetail(item){
  // router.push({
  //   path:'/xjc-integratedmachine/environment/pro_details_video',
  //   query : {
  //     id : item.id
  //   }
  // })
  detail(item.id)
}
const parentMethod = () => {
  console.log('父组件方法被调用');
  detail()
  if (headinfoRef.value) {
    headinfoRef.value.getCompareSizeData(1); // 调用子组件的 sayHello 函数
  }
};
provide('parentMethod', parentMethod);
</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;

    .top-content {
      width: 1832px;
      display: flex;
      flex-direction: column;
      .top-content-right {
        margin-left: 45px;
        width: 1782px;
        margin-left: 45px;

        .title {
          font-weight: bold;
          font-size: 36px;
          color: #1E410E;
          line-height: 24px;
        }

        .school-level-box {
          display: flex;
          justify-content: left;
          .school-level {
            margin-right: 20px;
            width: 174px;
            height: 54px;
            background: #B3FC7C;
            border-radius: 5px 5px 5px 5px;
            font-weight: bold;
            font-size: 20px;
            color: #000000;
            line-height: 54px;
            text-align: center;
          }
        }

        .text-box {
          width: 1124px;
          p {
            margin-right: 20px;
          }
        }

        .right-top {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .right-top-icon {
            width: 200px;
            height: 68px;
            display: flex;
            justify-content: space-between;
            margin-top: 24px;

            .item-img {
              display: flex;
              flex-direction: column;
              align-items: center;

              p {
                font-weight: 400;
                font-size: 20px;
                color: #515F6A;

              }

              img {
                width: 36px;
                height: 36px;
              }
            }
          }
        }

      }

      .content-info{
        display: flex;
        p{
          width: 200px;
          margin-right: 10px;
          display: flex;
          font-weight: 400;
          font-size: 20px;
          color: #333333;
        }
      }
      .info-box{
        margin-left: 33px;
        .title {
          height: 40px;
          border-left: 8px #8CE349 solid;
          margin-top: 33px;
          font-weight: 400;
          font-size: 28px;
          color: #333333;
          line-height: 40px;
          padding-left: 11px;
        }
        .info{
           margin-top: 19px;
           font-weight: 400;
           font-size: 20px;
           color: #333333;
           display: flex;
           //justify-content: space-around;
           flex-wrap: wrap;

          .info-item{
            width: 244px;
            height: 80px;
            margin-left: 10px;
            background: #FFFFFF;
            border-radius: 5px 5px 5px 5px;
            border: 1px solid #A2F57F;
            font-weight: 400;
            font-size: 30px;
            color: #000000;
            line-height:  80px;
            text-align: center;
            margin-top: 14px;
          }
        }
        .info-text{
          margin-top: 19px;
          font-weight: 400;
          font-size: 20px;
          color: #333333;
        }
      }

    }

  }


  .bottom-content {
    margin-top: 10px;
    height: 500px;
    .tab-box {
      display: flex;
      padding-right: 279px;
      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: 341px;
  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>