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

<template>
  <div class="career-example-page"  v-loading="pageLoading">
    <head-component :headinfo=headinfo></head-component>
    <div class="page-content">
      <div class="content-left">
        <p>{{exampleInfo.shortIntroduce}}</p>
        <p>{{exampleInfo.name}}：{{exampleInfo.type}}</p>
        <div class="left-main">
<!--          <div class="img-box">-->
<!--&lt;!&ndash;            <img src="@/assets/images/wakeup/float-box.png" />&ndash;&gt;-->
<!--&lt;!&ndash;            <img :src= "`${baseUrl}`+ exampleInfo.picPath" />&ndash;&gt;-->
<!--          </div>-->
          <div class="text-box" v-html="exampleInfo.introduce">
          </div>
        </div>
      </div>

      <div class="content-right">
          <div class="item-box" v-for="(item,index) in exampleData" @click="showInfo(item)">
            <img :src= "`${baseUrl}`+ item.picPath" />
            <div>{{item.name}}</div>
            <p >{{item.type}}</p>
            <p >{{item.shortIntroduce}}</p>
          </div>
      </div>
      <!--      <div class="content-box">-->
<!--      </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, exampleList} from "@/api/xjc-integratedmachine/wakeup/index.js";
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'


const router = useRouter()

const headinfo = ref({})
const exampleData = ref({})
const baseUrl = ref('https://www.shengyazhidao.com')
const centerDialogVisible = ref(false)
const videoPlayer = ref(null);
const videoPath = ref(null);
const videoName = ref(null);
let pageLoading = ref(false)
let exampleInfo = ref({

})
// 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(() => {
  getExampleList();
  setHeadinfo();

})
//请求页面数据
function getExampleList() {
  pageLoading = true;
  exampleList().then(res => {
    // console
    if(res.exampleList.length > 0){
      exampleInfo = res.exampleList[0];
    }
    exampleData.value = res.exampleList;
    pageLoading = false;
  }).catch((err)=>{
    console.log("error")
    pageLoading = false;
  })
}
function playVideo(filmPath,name) {
  centerDialogVisible.value = true;
  videoPath.value = filmPath
  videoName.value = name
}
function dialogBeforeClose(){
  videoPath.value = null;
}


function showInfo(val){
  exampleInfo.value = val;
}

</script>


<style scoped lang="scss">
p{
  margin: 0;
  padding: 0;
}
.career-example-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;
    display: flex;
    justify-content: space-around;
    .content-left{
      width: 1290px;
      height: 919px;
      background: #FFFFFF;
      border-radius: 35px 35px 35px 35px;
      p:nth-child(1){
        font-weight: bold;
        font-size: 32px;
        color: #333333;
        line-height: 52px;
        margin-top: 28px;
        background: #EAFAFF;
        margin-left: 52px;
      }
      p:nth-child(2){
        font-weight: bold;
        font-size: 32px;
        color: #333333;
        //background: #EAFAFF;
        line-height: 52px;
        margin-left: 52px;
      }
      .left-main{
        display: flex;
        justify-content: space-around;
        .img-box{
          width: 361px;
          height: 459px;
          //border: 1px solid;
          margin-top: 26px;
          margin-left: 26px;
          img{
            width: 361px;
            height: 459px;
          }
        }
        .text-box{
          width: 1290px;
          height: 777px;
          font-weight: 400;
          font-size: 30px;
          color: #333333;
          line-height: 52px;
          //border: 1px solid;
          text-indent: 2em;
          overflow: auto;
          padding-right: 52px;
          padding-left: 52px;
        }
      }
    }
    .content-right{
      width: 521px;
      height: 910px;
      background: #FFFFFF;
      border-radius: 35px 35px 35px 35px;
      overflow: auto;
      .item-box{
        width: 470px;
        height: 370px;
        //border: 1px solid;
        background: #F8F8F8;
        margin: 17px auto;
        border-radius: 35px 35px 35px 35px;
        img{
          width: 115px;
          height: 115px;
          border-radius: 50%;
          //border: 1px solid;
          margin-left: 192px;
          margin-top: 28px;
        }
        p
        {
          font-weight: bold;
          font-size: 32px;
          color: #333333;
          line-height: 52px;
          padding-left: 10px;
          //background: #EAFAFF;
        }
        div{
          font-weight: bold;
          font-size: 32px;
          color: #333333;
          line-height: 52px;
          text-align: center;
        }
        //p:nth-child(1){
        //  text-align:center;
        //}
      }
      .item-box:hover{
        background: #EAFAFF;
      }

    }
  }
}
//{
//  background: #EAFAFF;
//}


</style>