|
@@ -0,0 +1,116 @@
|
|
|
|
+<template>
|
|
|
|
+ 专业详情视频
|
|
|
|
+ <collectionComponent :collection="collection"></collectionComponent>
|
|
|
|
+ <br>
|
|
|
|
+ <div>
|
|
|
|
+ 专业代码:{{entity.code}},
|
|
|
|
+ 学历层次:
|
|
|
|
+ <dict-tag :options="educationlevel" :value="entity.bkzk"/>
|
|
|
|
+ ,休学年限{{entity.years}},{{entity.degree}}
|
|
|
|
+ </div>
|
|
|
|
+ <br>
|
|
|
|
+ 开设课程
|
|
|
|
+ <br>
|
|
|
|
+ <div>
|
|
|
|
+ {{entity.course}}
|
|
|
|
+ </div>
|
|
|
|
+ <br>
|
|
|
|
+ 相近专业
|
|
|
|
+ <br>
|
|
|
|
+ <div v-for="(item,index) in similar_list">
|
|
|
|
+ {{item.name}}
|
|
|
|
+ </div>
|
|
|
|
+ <br>
|
|
|
|
+
|
|
|
|
+ <el-card style="width:80%;">
|
|
|
|
+ <div @click="changeTab('zyjd')">专业解读</div>
|
|
|
|
+ <div @click="changeTab('ksyx')">开设院校</div>
|
|
|
|
+ <div @click="changeTab('xkpg')">学科评估</div>
|
|
|
|
+ <div @click="changeTab('jyqj')">就业前景</div>
|
|
|
|
+ <div @click="changeTab('zysp')">专业视频</div>
|
|
|
|
+ </el-card>
|
|
|
|
+
|
|
|
|
+ <div v-show="tabIndex == 'zyjd'" v-html="entity.describe"></div>
|
|
|
|
+ <div v-show="tabIndex == 'ksyx'">
|
|
|
|
+ <div v-for="(item,index) in kaishe_list">
|
|
|
|
+ {{entity.name}}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-show="tabIndex == 'xkpg'">
|
|
|
|
+ <div v-for="(item,index) in pinggu_list">
|
|
|
|
+ {{item.name}}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-show="tabIndex == 'jyqj'" v-html="entity.employment">
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ <div v-show="tabIndex == 'zysp'">
|
|
|
|
+ <div ref="videoContainer" class="video-container">
|
|
|
|
+ <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>
|
|
|
|
+
|
|
|
|
+</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'
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ const {proxy} = getCurrentInstance()
|
|
|
|
+ const {educationlevel} = proxy.useDict('educationlevel')
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ const router = useRouter()
|
|
|
|
+ const route = useRoute()
|
|
|
|
+ const tabIndex = ref("zyjd")
|
|
|
|
+ function changeTab(path) {
|
|
|
|
+ tabIndex.value = path
|
|
|
|
+ if(path == 'zysp'){
|
|
|
|
+ const player = videojs(playerId, {autoplay: true});
|
|
|
|
+ player.src(entity.value.path);
|
|
|
|
+ player.on("ended", () => {
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const param = route.query
|
|
|
|
+
|
|
|
|
+ const collection = ref({
|
|
|
|
+ contentType : 2,
|
|
|
|
+ contentId :param.id
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ const entity = ref({})
|
|
|
|
+ const kaishe_list = ref([])
|
|
|
|
+ const pinggu_list = ref([])
|
|
|
|
+ const similar_list = ref([])
|
|
|
|
+
|
|
|
|
+ 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
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ detail()
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped>
|
|
|
|
+
|
|
|
|
+</style>
|