FE_huoran_client/src/pages/overviewTrailer/index.vue

<template>
  <div class="wrap">
    <div class="single-banner single-banner-overview">
      <img class="banner-img"
           :src="modules[0].form.pic"
           alt="">
      <div class="texts">
        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
      </div>
    </div>

    <ul class="tabs wow fadeInLeft">
      <template v-for="(item, i) in tabs">
        <li :class="{active: item.id == active}"
            :key="i"
            @click="tabChange(item)">{{ item.columnName }}</li>
      </template>
    </ul>

    <div class="tab-content">
      <video v-if="modules[1].form.video"
             class="video"
             ref="video"
             autoplay
             controls
             loop>
        <source :src="modules[1].form.video"
                type="video/mp4">
        您的浏览器不支持 video 标签。
      </video>
      <div v-html="modules[1].form.des"></div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins/page'
import overview from '@/mixins/overview'
import WOW from 'wow.js'
export default {
  mixins: [mixins, overview],
  data () {
    return {

    }
  },
  mounted () {
    new WOW().init()
  },
  methods: {

  }
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.wrap {
    background: url(../../assets/images/survey1.png) (0 559px) / auto no-repeat,
        url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
}

.single-banner {
    .texts {
        top: auto !important;
        bottom: 2rem;
    }
}
.tab-content {
    width: 50rem;
    padding: 3.85rem 0;
    margin: 0 auto;
    span {
        font-size: 1.08rem;
    }
}
.video {
    width: 100%;
    margin-bottom: 2.75rem;
}
.text {
    font-size: 0.9rem;
    color: #020202;
    line-height: 1.6rem;
}

@media (max-width: 1200px) {
    .tab-content {
        width: 95%;
        margin: 0 auto;
        .video {
            max-height: 18rem;
        }
    }
}
</style>