实时视频

<!-- 实时视频 -->
<template>
  <div class="onlineVideo-wrap" :class="{'hidden': hiddenMenu}">
    <div class="com-panel-title">
      <div class="panel-left">实时视频</div>
    </div>

    <div class="video-list">
      <span class="deg-1"></span>
      <span class="deg-2"></span>
      <span class="deg-3"></span>
      <span class="deg-4"></span>
      <div class="video-list-top">
        <div class="video-item full" v-if="bigVideo1 && bigVideo1.length">
          <img class="img" :src="require('@/assets/img/onlineVideo/video.jpg')" alt="">
          <span class="play" @click="showFullscreenVideo(bigVideo1[0])"></span>
        </div>
        <div class="video-item" v-for="(item,index) in videoSrc.slice(0,4)" :key="index" v-else>
          <img class="img" :src="require('@/assets/img/onlineVideo/video.jpg')" alt="">
          <span class="play" @click="showFullscreenVideo"></span>
        </div>
      </div>
      <div class="video-list-top">
        <div class="video-item full" v-if="bigVideo2 && bigVideo2.length">
          <img class="img" :src="require('@/assets/img/onlineVideo/video.jpg')" alt="">
          <span class="play" @click="showFullscreenVideo"></span>
        </div>
        <div class="video-item" v-for="(item,index) in videoSrc.slice(4,8)" :key="index" v-else>
          <img class="img" :src="require('@/assets/img/onlineVideo/video.jpg')" alt="">
          <span class="play" @click="showFullscreenVideo"></span>
        </div>
      </div>
    </div>

    <div class="video-toggle" @click="togglePanel"></div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
  name: "OnlineVideo",
  components: {}
})
export default class OnlineVideo extends Vue {
  private videoSrc: any = [
    {
      name: "视频1",
      src: "/"
    },
    {
      name: "视频2",
      src: "/"
    },
    {
      name: "视频3",
      src: "/"
    },
    {
      name: "视频4",
      src: "/"
    },
    {
      name: "视频5",
      src: "/"
    },
    {
      name: "视频6",
      src: "/"
    },
    {
      name: "视频7",
      src: "/"
    },
    {
      name: "视频8",
      src: "/"
    }
  ];
  private showSingle: any = true;
  get hiddenMenu() {
    return this.$store.state.baseModule.toggleRightPanel;
  }
  get bigVideo1() {
    return this.$store.state.baseModule.bigVideo1;
  }
  get bigVideo2() {
    return this.$store.state.baseModule.bigVideo2;
  }
  private showFullscreenVideo() {
    this.$store.commit(
      "baseModule/setFullscreenVideoSrc",
      "http://www.baidu.com"
    );
  }
  private togglePanel() {
    this.$store.commit("baseModule/setToggleRightPanel", !this.hiddenMenu);
  }
}
</script>
<style lang="less" scoped>
.onlineVideo-wrap {
  z-index: 2;
  position: absolute;
  right: 10px;
  top: 100px;
  width: 820px;
  height: 1080px;
  transition: 0.5s transform;
  transform: translateX(0);
  &.hidden {
    transform: translateX(102.5%);
    .video-toggle {
      &:before {
        transform: rotate(180deg);
      }
    }
  }
  .video-list {
    margin-top: 10px;
    height: calc(100% - 40px);
    padding: 5px;
    border: 1px solid #09a9af;
    position: relative;
    box-shadow: 0 0 15px rgba(72, 223, 229, 0.5),
      0 0 20px rgba(72, 223, 229, 0.8) inset;
    .deg-1,
    .deg-2,
    .deg-3,
    .deg-4 {
      position: absolute;
      z-index: 10;
      width: 6px;
      height: 6px;
      background: url("../../assets/img/home/bg_pop_deg_x.png") no-repeat;
    }
    .deg-1 {
      left: -2px;
      top: -2px;
    }
    .deg-2 {
      right: -2px;
      top: -2px;
      transform: rotate(90deg);
    }
    .deg-3 {
      left: -2px;
      bottom: -2px;
      transform: rotate(270deg);
    }
    .deg-4 {
      right: -2px;
      bottom: -2px;
      transform: rotate(180deg);
    }
    .video-list-top {
      width: 100%;
      height: 50%;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      .video-item {
        width: 50%;
        height: 50%;
        padding: 2px;
        position: relative;
        &.full {
          width: 100%;
          height: 100%;
        }
        .img {
          width: 100%;
          height: 100%;
        }
        .play {
          content: "";
          display: block;
          position: absolute;
          left: 50%;
          top: 50%;
          margin: -48px 0 0 -57px;
          width: 115px;
          height: 97px;
          background: url("../../assets/img/onlineVideo/play.png") no-repeat;
          cursor: pointer;
          transition: 0.5s opacity;
          opacity: 0.8;
          &:hover {
            opacity: 1;
          }
        }
      }
    }
  }
  .video-toggle {
    position: absolute;
    left: -152px;
    top: 50%;
    transform: translateY(-50%);
    width: 142px;
    height: 226px;
    background: url("../../assets/img/onlineVideo/bg_video_left.png") no-repeat;
    &:before {
      content: "";
      display: block;
      position: absolute;
      right: 15px;
      top: 50%;
      margin-top: -23px;
      width: 46px;
      height: 45px;
      background: url("../../assets/img/onlineVideo/bg_arrow_right.png")
        no-repeat;
      cursor: pointer;
      transform: rotate(0deg);
    }
  }
}
</style>