xjc-vue/src/views/xjc-integratedmachine/wakeup/career_cinema/index.vue

<template>
  <div class="wake-up-page">
    <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>

    <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({})
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}
  })
}
onMounted(() => {
  getCinemaList();
  setHeadinfo();
})
//请求页面数据
function getCinemaList() {
  cinemaList().then(res => {
    console.log("res",res)
    cinemaData.value = res.cinemaList;
    console.log("cinemaData.value",cinemaData.value)
  }).catch((err)=>{
     console.log("error")
  })

}
function playVideo(filmPath,name) {
  console.log("filmPath",filmPath)

  centerDialogVisible.value = true;
  console.log("filmPath",filmPath)
  videoPath.value = filmPath
  videoName.value = name
  // console.log("videoPlayer",videoPlayer.value.play);
  // if (videoPlayer.value) {
  //   videoPlayer.value.play(); // 暂停视频
  // }
}
function dialogBeforeClose(){
  videoPath.value = null;
}




</script>


<style scoped lang="scss">
p{
  margin: 0;
  padding: 0;
}
.wake-up-page{
  background: url('@/assets/images/login/login-home-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>