qjkankan_v1.1.1/packages/qjkankan-editor/src/views/base/openingAnimationSettings.vue

<template>
  <div class="opening-animation-settings">
    <span class="title">{{$i18n.t(`edit_settings.opening_setting`)}}</span>
    <br>
    <div class="btns-and-video">
      <div class="btn-wrapper">
        <button v-for="item of openingTypeList" :key="item" class="opening-selection-btn"
          :class="{ 'active-opening-type': info.openingAnimationType === item }"
          @click="info.openingAnimationType = item">
          {{$i18n.t(`zh_key.${item}`)}}
        </button>
      </div>
      <div class="video-wrapper">
        <video ref="opvideo" :src="require(`@/assets/videos/${info.openingAnimationType || '小行星开场'}_x264.mp4`)" autoplay
          loop></video>
          <i v-if="bofanging" @click="bofang" class="iconfont iconshow_playback"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  components: {
  },
  data() {
    return {
      openingTypeList: [
        '小行星开场',
        '小行星巡游开场',
        '小行星缩放开场',
        '水平巡游开场',
        '水晶球开场',
      ],
      bofanging: true
    }
  },
  computed: {
    ...mapGetters({
      info: 'info'
    })
  },
  methods: {
    bofang(){
      this.$refs.opvideo.play()
    }
  },
  mounted() {
    if (!this.info.openingAnimationType) {
      this.$set(this.info, 'openingAnimationType', this.openingTypeList[0])
    }

    this.$nextTick(()=>{
      console.log(this.$refs.opvideo);

    this.$refs.opvideo && this.$refs.opvideo.addEventListener("playing", () => {
      if (this.bofanging) {
        this.bofanging = false;
      }

    });
  })

  },
}
</script>

<style lang="less" scoped>
.opening-animation-settings {
  padding: 24px 30px;
  background: #252526;
  height: 546px;

  .title {
    font-size: 18px;
    color: #FFFFFF;
  }

  .btns-and-video {
    margin-top: 16px;
    display: flex;
    align-items: flex-start;

    .btn-wrapper {
      .opening-selection-btn {
        width: 210px;
        height: 40px;
        background: #1A1B1D;
        border-radius: 2px;
        border: 1px solid #404040;
        margin-bottom: 16px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        display: block;

        &::after {
          content: '';
          height: 100%;
          vertical-align: middle;
          display: inline-block;
        }
      }

      .active-opening-type {
        color: #0076F6;
      }
    }

    .video-wrapper {
      width: 469px;
      height: 264px;
      margin-left: 20px;
      position: relative;
      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .iconfont{
        position: absolute;
        font-size: 36px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        cursor: pointer;
      }
    }
  }
}
</style>