dreamworks-mobile/src/pages/Company.vue

<template>
  <div class="company_container">
    <SubNavigation title="公司简介" />
    <AboutUs :theme="true" />
    <div class="video_wrap">
      <div class="video_container">
        <video
          @click="stopVideo"
          ref="video"
          :controls="!maskShow"
          style="width: 100%; height: 100%; object-fit: fill"
          controlslist="nodownload"
          :loop="true"
        >
          <source :src="Movie" />
        </video>
        <div class="mask" @click="playVideo" v-if="maskShow">
          <div class="btn"></div>
        </div>
      </div>
    </div>
    <DesignConcept :theme="true" />
    <Cooperation :theme="true" />
    <QRCode :theme="true" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AboutUs from 'cpns/AboutUs'
import Movie from '@/static/video/a.mp4'
import DesignConcept from 'cpns/DesignConcept'
import Cooperation from 'cpns/Cooperation'
import QRCode from 'cpns/QRCode'
import SubNavigation from 'cpns/SubNavigation'
import A1 from '@/static/img/about/01.png'
import A2 from '@/static/img/about/02.png'
import A3 from '@/static/img/about/03.png'
import A4 from '@/static/img/about/04.png'
import Post from '@/static/img/about/video.png'
import Play from '@/static/img/about/videos.png'
const video = ref(null)
const maskShow = ref(true)
const playVideo = () => {
  video?.value.play()
  maskShow.value = false
}
const stopVideo = () => {
  video?.value.pause()
  maskShow.value = true
}
</script>

<style lang="scss" scoped>
.company_container {
  padding-top: $sub-header-height;
  background: #fff;
  .video_wrap {
    padding: 29px 7px 0 7px;
    .video_container {
      position: relative;
      border-radius: 3px;
      overflow: hidden;
      .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(11, 17, 62, 0.39);
        display: flex;
        align-items: center;
        justify-content: center;
        .btn {
          width: 31px;
          height: 31px;
          background: #fff;
        }
      }
    }
  }
}
</style>