<template>
|
<div class="first-video-container">
|
<div class="top-color" />
|
<div class="bottom-color" />
|
<div class="video-content">
|
<video class="video-bg" ref="vid" src="/first-video.mov" loop="loop" preload="load" controls="controls" playsinline="">
|
</video>
|
</div>
|
<div class="overlay-info" @click="pauseVideo($event)">
|
<div class="header">
|
<div class="navbar">
|
<span class="navbar__item" :class="{'active': navbarActive===0}" @click="navbarActive=0">强军思想</span>
|
<span class="navbar__item" :class="{'active': navbarActive===1}" @click="navbarActive=1">军委机关</span>
|
<span class="navbar__item" :class="{'active': navbarActive===2}" @click="navbarActive=2">中心概览</span>
|
<span class="navbar__item" :class="{'active': navbarActive===3}" @click="navbarActive=3">影视部</span>
|
<span class="navbar__item" :class="{'active': navbarActive===4}" @click="navbarActive=4">文艺部</span>
|
<span class="navbar__item" :class="{'active': navbarActive===5}" @click="navbarActive=5">军乐团</span>
|
<span class="navbar__item" :class="{'active': navbarActive===6}" @click="navbarActive=6">文艺咨询</span>
|
<span class="navbar__item" :class="{'active': navbarActive===7}" @click="navbarActive=7">官兵信箱</span>
|
</div>
|
<div class="search">
|
<div class="search-space">
|
<input type="text">
|
<svg-icon icon-class="search" />
|
</div>
|
</div>
|
<div class="login-or-register-action">
|
<span class="login-action">登录</span>
|
<span>/</span>
|
<span class="register-action">注册</span>
|
</div>
|
</div>
|
<div class="navicon">
|
<ul>
|
<li class="sidebar__item"><img src="@/assets/home/first_video/hsdyy.png" alt="红色电影院"></li>
|
<li class="sidebar__item"><img src="@/assets/home/first_video/wydwt.png" alt="文艺大舞台"></li>
|
<li class="sidebar__item"><img src="@/assets/home/first_video/qjyyt.png" alt="强军音乐厅"></li>
|
<li class="sidebar__item"><img src="@/assets/home/first_video/jzzyk.png" alt="剧作资源库"></li>
|
<li class="sidebar__item"><img src="@/assets/home/first_video/jlshy.png" alt="军旅书画院"></li>
|
<li class="sidebar__item"><img src="@/assets/home/first_video/wyyzb.png" alt="文艺云直播"></li>
|
<li class="sidebar__item"><img src="@/assets/home/first_video/wyykt.png" alt="文艺云课堂"></li>
|
<li class="sidebar__item"><img src="@/assets/home/first_video/szhsg.png" alt="数字化史官"></li>
|
<li class="sidebar__item"><img src="@/assets/home/first_video/xxfww.png" alt="信息服务网"></li>
|
</ul>
|
</div>
|
<div class="logo">
|
<img class="logo-img" src="@/assets/home/first_video/logo.png">
|
<img class="logo-text" src="@/assets/home/first_video/logo_text.png">
|
</div>
|
<div class="pull-down" @click="toHome">
|
<span>》</span>
|
</div>
|
<img v-if="!playing" class="player-btn" src="@/assets/home/first_video/player.png" @click="playVideo">
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
// 首屏开启视频页面
|
name: 'FirstVideo',
|
data() {
|
return {
|
navbarActive: 0, // 0, 1, 2, 3, 4, 5, 6, 7
|
playing: false
|
}
|
},
|
methods: {
|
toHome() {
|
this.$emit('hideVideo', true)
|
},
|
playVideo() {
|
// 如果视频播放就暂停,如果是暂停就播放
|
if (this.$refs.vid.paused) {
|
this.$refs.vid.play();
|
} else {
|
this.$refs.vid.pause();
|
}
|
this.playing = true
|
},
|
pauseVideo(event) {
|
if (event.target.className === 'overlay-info') {
|
this.$refs.vid.pause();
|
this.playing = false
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "~@/styles/variables.scss";
|
.first-video-container {
|
// 背景图片
|
position: relative;
|
height: 100%;
|
width: 100%;
|
min-width: $appWidth;
|
min-height: 681px;
|
background-image: url("../../../assets/home/first_video/first-video-bg.png");
|
background-size: 100% 100%;
|
overflow: hidden;
|
.top-color {
|
position: absolute;
|
background-image: url(../../../assets/home/first_video/top-color.png);
|
background-size: 100% 100%;
|
z-index: 3;
|
top: 0;
|
width: 100%;
|
height: 286px;
|
// background-image: linear-gradient(to bottom, rgba(186,52,47,1) , rgba(255,255,255,0));
|
}
|
|
.bottom-color {
|
position: absolute;
|
z-index: 3;
|
bottom: 0;
|
width: 100%;
|
height: 90px;
|
background-image: url(../../../assets/home/first_video/bottom-color.png);
|
background-size: 100% 100%;
|
background-position: -5px;
|
}
|
|
.video-content {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
z-index: 2;
|
.video-bg {
|
width: 100%;
|
height: 100%;
|
transition: .35s;
|
object-fit: cover;
|
}
|
}
|
|
// 图标上面的导航，logo 等信息
|
.overlay-info {
|
position: absolute;
|
z-index: 4;
|
width: 100%;
|
height: 100%;
|
// 头部导航
|
.header {
|
position: absolute;
|
top: 0;
|
height: 215px;
|
width: 100%;
|
// background-image: linear-gradient(to bottom, rgba(202,34,38,1) , rgba(255,255,255,0));
|
color: #000;
|
z-index: 2;
|
color: #FFE0B8;
|
text-align: center;
|
font-size: 14px;
|
.navbar {
|
display: inline-block;
|
margin-top: 22.5px;
|
margin-left: 194px;
|
.navbar__item {
|
display: inline-block;
|
position: relative;
|
cursor: pointer;
|
margin-left: 40px;
|
&:first-child {
|
margin-left: 0;
|
}
|
&.active {
|
font-weight: 500;
|
&::after {
|
content: '';
|
width: 100%;
|
height: 1px;
|
background: #FFE0B8;
|
position: absolute;
|
left: 0;
|
bottom: -5px;
|
}
|
}
|
}
|
}
|
.search {
|
display: inline-block;
|
width: 80px;
|
height: 15px;
|
border-radius: 10px;
|
border: solid 1px #FFE0B8;
|
margin-left: 24px;
|
vertical-align: -3px;
|
input {
|
border: none;
|
outline: none;
|
background: transparent;
|
width: 60px;
|
height: 13px;
|
vertical-align: 2.5px;
|
color: #FFE0B8;
|
}
|
svg {
|
width: 8px;
|
height: 13px;
|
vertical-align: 0.5px;
|
}
|
}
|
.login-or-register-action {
|
display: inline-block;
|
width: 80px;
|
margin-left: 10px;
|
.login-action {
|
margin-right: 5px;
|
}
|
.register-action {
|
margin-left: 5px;
|
}
|
}
|
}
|
|
// 坐标图标导航
|
.navicon {
|
position: absolute;
|
z-index: 2;
|
left: 0;
|
width: 75px;
|
height: 460px;
|
text-align: center;
|
// 左边导航
|
top: 85px;
|
&:after {
|
clear: both;
|
}
|
ul {
|
position: absolute;
|
left: -55px;
|
padding: 5px 0;
|
display: block;
|
width: 55px;
|
height: 460px;
|
background: #FFFFFF;
|
opacity: 0.9;
|
margin: 0;
|
display: block;
|
transition: left 0.5s;
|
-webkit-transition: left 0.5s;
|
li {
|
list-style-type: none;
|
display: inline-block;
|
cursor: pointer;
|
width: 32px;
|
height: 32px;
|
margin: 0 auto;
|
margin-top: 13px;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
&:hover ul {
|
display: block;
|
left: 0;
|
}
|
}
|
|
// 中间 logo 与大文字
|
.logo {
|
position: absolute;
|
text-align: center;
|
width: 100%;
|
left: 0;
|
top: 100px;
|
margin: -12px auto;
|
display: inline-block;
|
height: 126px;
|
text-align: center;
|
.logo-img {
|
width: 135px;
|
height: 126px;
|
}
|
.logo-text {
|
width: 627px;
|
height: 106px;
|
margin-left: 38px;
|
margin-bottom: 10px;
|
}
|
}
|
// 下拉图标
|
.pull-down {
|
position: absolute;
|
cursor: pointer;
|
bottom: 30px;
|
width: 90px;
|
left: calc(50% - 5px);
|
span {
|
display: inline-block;
|
transform: rotate(90deg);
|
color: #fff;
|
text-shadow: 0px 3px 13px rgba(117, 12, 13, 0.29);
|
font-size: 86px;
|
}
|
}
|
|
// 点击播放的按钮
|
.player-btn {
|
position: absolute;
|
cursor: pointer;
|
z-index: 5;
|
top: 43%;
|
left: 50%;
|
}
|
}
|
}
|
</style>
|
