guangdong_museum/web/src/components/huiyi/index.vue

<template>
  <div id="huiyi" class="huiyi" :style="{backgroundImage:`url(${require('@/assets/images/project/cards-bg.png')})`}">

    <div class="single-active" v-if="active">
        <img :src="require(`@/assets/images/project/${active.img}`)" alt="">
        <span :style="{backgroundImage:`url(${require('@/assets/images/project/select.png')})`}">{{active.name}}</span>
        <div class="tips">请待视频播放完毕再操作</div>
    </div>
    <ul v-else>
      <li @click="changeVideo(item)" :class="{active:item.id==active.id}" v-for="(item,i) in people" :key="i">
        <img :src="require(`@/assets/images/project/${item.img}`)" alt="">
        <span :style="{backgroundImage:item.id==active.id?`url(${require('@/assets/images/project/select.png')})`:'none'}">{{item.name}}</span>
      </li>
    </ul>
    <img v-if="showBg" class="bg" @click="hideBg" :src="require('@/assets/images/project/index-bg.png')" alt="">
  </div>
</template>

<script>
export default {
  data(){
    return {
      active:'',
      showBg:true,
      people:[{
        name:'陈独秀',
        id:'chen',
        img:'cdx.jpg',
        src:'chen.mp4'
      },{
        name:'李大钊',
        id:'li',
        img:'ldz.jpg',
        src:'li.mp4'
      },{
        name:'毛泽东',
        id:'mao',
        img:'mzd.jpg',
        src:'mao.mp4'
      }]
    }
  },
  mounted(){
    window.player.on("videoEnded", ()=> {
        this.showBg = true
        this.active = ''
    })
  },
  methods:{
    hideBg(){
      this.showBg = false
    },
    changeVideo(item){
      console.log(item);
      this.active = item
      window.switchVideoSrc(require(`@/assets/videos/${item.src}`))
    }
  }
}
</script>

<style lang="less" scoped>
.huiyi{
  color:#000;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  text-align: center;
  background-size: 100% 100%;
  position: relative;
  pointer-events: auto;
  .bg{
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
  }
  >ul{
    display: flex;
    justify-content: space-between;
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    >li{
      cursor: pointer;
      &:not(:last-of-type){
        margin-right: 40px;
      }
      >img{
        width: 100%;
      }
      >span{
        font-size: 38px;
        padding: 0 60px 20px;
        background: none;
      }
    }
    .active{
      >img{
        border: 16px solid #DFB057;
      }
      >span{
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #DFB057;
      }
    }
  }

  .single-active{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 24%;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    >img{
      width: 100%;
      margin-bottom: 20px;
    }
    >span{
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: #DFB057;
      font-size: 38px;
      padding: 0 60px 20px;
    }
    .tips{
      font-size: 20px;
      font-weight: bold;
      color: #DFB057;
      min-width: 300px;
      padding: 40px 0;
    }
  }
}
</style>