generated from maochaoying/dreamworks-frontend-template
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.1 KiB
83 lines
2.1 KiB
<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>
|