realtorEasier-webSite/mobile/src/pages/video/index.vue

<template>
  <div class="container">
    <div class="popup-player" v-if="showVideo">
      <div class="mask" @click="()=>{currenVideo='';showVideo=false}"></div>
      <video autoplay controls :src="currenVideo" class="video-fr"></video>
    </div>
    <mediaSwiper @handleVideo="itemHandle" class="media-con"/>

    <div class="setion">
      <p class="b-text2">{{langVideoCourse.name}}</p>
      <p class="b-text3">{{langVideoCourse.sub}}</p>
      <ul class="i-ul">
        <li @click="itemHandle(sub)" v-for="(sub,idx) in langVideoCourse.items" :key="idx">
          <img class="li-img" :src="`${$cdn}course/img/${sub.code}.jpg`" alt="">
          <img class="bofang" :src="`${$cdn}course/img/video_play@2x.png`" alt="">
          <h3 class="btom-text">{{sub.name}}</h3>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import mediaSwiper from '@/components/videoSwiper'

export default {
  components: {
    mediaSwiper
  },
  computed: {
    ...mapState({
      langVideoCourse: state => state.language.home.videoCourse.content[1],
      language: state => state.language.current
    })
  },
  data () {
    return {
      currenVideo: '',
      showVideo: false
    }
  },
  methods: {
    itemHandle (item) {
      this.showVideo = true

      this.currenVideo = `${this.$cdn}course/videos/${this.language === 'en' ? `en/${item.code}` : item.code}.mp4`
    },
    itemHandles (item) {
      console.log(item)
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  .media-con{
    width: 90%;
    margin: 20px auto;
  }
  .popup-player {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    .mask {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.9);
    }
    .video-fr {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .setion{
    width: 90%;
    margin: 20px auto;
    .b-text2,.b-text3{
      text-align: left;
      margin-left: 0;
      margin-right: 0;
    }
    .i-ul{
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      li{
        position: relative;
        max-width: 49%;

        min-height: 160px;
        margin-top: 20px;
        .btom-text{
          font-size: 14px;
          color: rgba(0, 0, 0, 0.7);
          line-height: 20px;
          font-weight: bold;
          margin-top: 10px;
        }
        .li-img{
          width: 100%;
          cursor: pointer;
          border-radius: 4px;
          overflow: hidden;
        }
        .bofang{
          width: 20px;
          height: 20px;
          position: absolute;
          left: 20px;
          top: 70px;
        }
        .li-p{
          font-size: 16px;
          color: #2d2d2d;
          margin-top: 10px;
        }
      }
    }
  }
}

</style>