|
|
@@ -1,30 +1,230 @@
|
|
|
<template>
|
|
|
- 学科与未来专业
|
|
|
+ <div class="major_and_future">
|
|
|
+ <head-component :headinfo=headinfo></head-component>
|
|
|
+ <div class="page-content">
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="box-main">
|
|
|
+ <div class="box-item" v-for="(item,index) in cinemaData">
|
|
|
+ <div class="video-left" @click="playVideo(item.filmPath,item.name)">
|
|
|
+ <img :src= "`${baseUrl}`+ item.picPath" />
|
|
|
+ <img class="pause" src="@/assets/images/wakeup/pause.png" />
|
|
|
+ </div>
|
|
|
+ <div class="video-right">
|
|
|
+ <p class="title">{{item.name}}</p>
|
|
|
+ <div class="text-box">
|
|
|
+ <p class="text" v-html="item.introduce">
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="content-bottom">-->
|
|
|
+ <!-- <div class="draw draggable-ball" @mousedown="startDrag" :style="{ left: position.x + 'px', top: position.y + 'px' }">-->
|
|
|
+ <!-- <img src="@/assets/images/wakeup/float-box.png" />-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="ai-rabit">-->
|
|
|
+ <!-- <div class="ai-rabit-text">-->
|
|
|
+ <!-- 你好，同学欢迎进入生涯学习系统-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <img src="@/assets/images/wakeup/ai-rabit.png" />-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ </div>
|
|
|
|
|
|
- <div>
|
|
|
- 英语
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- 语文
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- 物理
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- 生物
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- 化学
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- 政治
|
|
|
+ <el-dialog
|
|
|
+ v-model="centerDialogVisible"
|
|
|
+ destroy-on-close
|
|
|
+ :title="videoName"
|
|
|
+ width="1832px"
|
|
|
+ height="915px"
|
|
|
+ center
|
|
|
+ @before-close="dialogBeforeClose"
|
|
|
+ align-center
|
|
|
+ >
|
|
|
+ <div class="video-content">
|
|
|
+ <video ref="videoPlayer" video preload="auto" autoplay muted controls width="1798" height="900" >
|
|
|
+ <source :src="`${videoPath}`" type="video/ogg">
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+ import { reactive, onMounted } from 'vue';
|
|
|
+ import {cinemaList} from "@/api/xjc-integratedmachine/wakeup/index.js";
|
|
|
+ import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
|
|
|
+
|
|
|
+
|
|
|
+ const router = useRouter()
|
|
|
+
|
|
|
+ const headinfo = ref({})
|
|
|
+ const cinemaData = ref([
|
|
|
+ {
|
|
|
+ name: '英语',
|
|
|
+ filePath: 'http://unimajorvedio.shengyazhidao.com/course/英语学科与未来专业职业.mp4'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '历史',
|
|
|
+ filePath: 'http://unimajorvedio.shengyazhidao.com/course/历史学科与未来专业职业.mp4'
|
|
|
+ },
|
|
|
+ ])
|
|
|
+ const baseUrl = ref('https://www.shengyazhidao.com')
|
|
|
+ const centerDialogVisible = ref(false)
|
|
|
+ const videoPlayer = ref(null);
|
|
|
+ const videoPath = ref(null);
|
|
|
+ const videoName = ref(null);
|
|
|
+ // const isDragging = ref(false)
|
|
|
+ const offset = ref({ x: 0, y: 0 })
|
|
|
+ const startX = ref(0)
|
|
|
+ const startY = ref(0)
|
|
|
+
|
|
|
+ function setHeadinfo(){
|
|
|
+ headinfo.value = {
|
|
|
+ title: '生涯影院',
|
|
|
+ user: {
|
|
|
+ avatar: '头像路径',
|
|
|
+ nickName: '张三'
|
|
|
+ },
|
|
|
+ backUrl : '/xjc-integratedmachine/wakeup/index'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function jumpTo(path) {
|
|
|
+ router.push({
|
|
|
+ path: path,
|
|
|
+ query: {name: 123}
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function playVideo(filmPath,name) {
|
|
|
+ console.log("filmPath",filmPath)
|
|
|
+
|
|
|
+ centerDialogVisible.value = true;
|
|
|
+ console.log("filmPath",filmPath)
|
|
|
+ videoPath.value = filmPath
|
|
|
+ videoName.value = name
|
|
|
+ }
|
|
|
+ function dialogBeforeClose(){
|
|
|
+ videoPath.value = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ setHeadinfo();
|
|
|
+ })
|
|
|
+
|
|
|
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ p{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .major_and_future{
|
|
|
+ background: url('@/assets/images/decision/common/background.png') no-repeat;
|
|
|
+ background-size: 1920px 1080px;
|
|
|
+ z-index:10;
|
|
|
+ width: 100%;
|
|
|
+ height: 1080px;
|
|
|
+ .page-content{
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 123px;
|
|
|
+ bottom: 0;
|
|
|
+ .content-box{
|
|
|
+ width: 1832px;
|
|
|
+ height:910px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ background: rgba(255,255,255,0.2);
|
|
|
+ border-radius: 35px 35px 35px 35px;
|
|
|
+ margin: 0 auto;
|
|
|
+ .box-main{
|
|
|
+ width: 1810px;
|
|
|
+ height:850px;
|
|
|
+ overflow:auto;
|
|
|
+ margin-left: 26px;
|
|
|
+ scrollbar-color: #D9D9D9 #9feafa0f;
|
|
|
+ scrollbar-width: thin;
|
|
|
+ .box-item{
|
|
|
+ margin-top: 29px;
|
|
|
+ width: 1786px;
|
|
|
+ height: 487px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 35px 35px 35px 35px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .video-left{
|
|
|
+ width: 300px;
|
|
|
+ height: 418px;
|
|
|
+ //border: 1px solid;
|
|
|
+ margin-top: 25px;
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ width: 300px;
|
|
|
+ height: 418px;
|
|
|
+ }
|
|
|
+ .pause{
|
|
|
+ width:146px;
|
|
|
+ height:146px;
|
|
|
+ position: absolute;
|
|
|
+ top: 131px;
|
|
|
+ left: 72px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .video-right{
|
|
|
+ width: 1395px;
|
|
|
+ height: 314px;
|
|
|
+ .text-box{
|
|
|
+ overflow:auto;
|
|
|
+ scrollbar-color: #D9D9D9 #9feafa0f;
|
|
|
+ scrollbar-width: thin;
|
|
|
+ height: 314px;
|
|
|
+ //border: 1px solid;
|
|
|
+ .text{
|
|
|
+ text-indent: 2em;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 42px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 52px;
|
|
|
+ margin-top: 38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-item{
|
|
|
+ scrollbar-color: #9be9fa #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .video-content{
|
|
|
+ width: 1798px;
|
|
|
+ height: 915px;
|
|
|
+ //border: 1px solid;
|
|
|
+ //background: pink;
|
|
|
+ z-index:10;
|
|
|
+ }
|
|
|
+ ::v-deep .el-dialog__header{
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ ::v-deep .el-dialog__title{
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
</style>
|
|
|
+
|
hizhangling