|
|
@@ -15,6 +15,13 @@
|
|
|
v-if="fixIcon.length > 0"
|
|
|
:style="{ height: isMobile ? '100%' : '80%' }"
|
|
|
>
|
|
|
+
|
|
|
+ <!-- 横屏后的遮罩层 -->
|
|
|
+ <div class="shade">
|
|
|
+ <img src="../assets/images/hengping.png" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
<div
|
|
|
v-if="!isMobile"
|
|
|
@click="slideto('slidePrev')"
|
|
|
@@ -23,6 +30,7 @@
|
|
|
<div
|
|
|
id="left"
|
|
|
v-if="isShow"
|
|
|
+ @click="videoPlay"
|
|
|
@mouseenter="move(0)"
|
|
|
@mouseleave="leave(0)"
|
|
|
>
|
|
|
@@ -68,6 +76,7 @@
|
|
|
<div
|
|
|
id="right"
|
|
|
v-if="isShow"
|
|
|
+ @click="videoPlay"
|
|
|
@mouseenter="move(1)"
|
|
|
@mouseleave="leave(1)"
|
|
|
>
|
|
|
@@ -99,6 +108,20 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+
|
|
|
+// 横屏时提示
|
|
|
+window.onorientationchange=function(){
|
|
|
+ let shade =document.querySelector('.shade')
|
|
|
+ if(window.orientation==90||window.orientation==-90){
|
|
|
+ // alert('横屏了');
|
|
|
+ shade.style.display='block'
|
|
|
+ }else{
|
|
|
+ // alert('没有横屏');
|
|
|
+ shade.style.display='none'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
|
|
import "swiper/css/swiper.css";
|
|
|
import browser from "@/utils/browser";
|
|
|
@@ -183,6 +206,14 @@ export default {
|
|
|
SwiperSlide,
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 控制中间的视频播放
|
|
|
+ videoPlay(){
|
|
|
+ setTimeout(()=>{
|
|
|
+ let nowVideo = document.querySelector('.swiper-slide-active video')
|
|
|
+ nowVideo.play()
|
|
|
+ // console.log(99999,nowVideo);
|
|
|
+ },100)
|
|
|
+ },
|
|
|
// 左右图标鼠标移入
|
|
|
move(val) {
|
|
|
if (val) this.right = false;
|
|
|
@@ -296,6 +327,15 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+.shade {
|
|
|
+ display: none;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
.audio {
|
|
|
position: fixed;
|
|
|
top: -100px;
|
|
|
@@ -439,7 +479,7 @@ export default {
|
|
|
|
|
|
@media screen and (max-width: 1000px) {
|
|
|
/deep/.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
|
|
|
- bottom: 220px;
|
|
|
+ bottom: 42%;
|
|
|
}
|
|
|
.home {
|
|
|
background-color: rgba(0, 34, 93, 0.9);
|
|
|
@@ -553,6 +593,7 @@ export default {
|
|
|
z-index: 999;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
#left img {
|
|
|
position: absolute;
|
|
|
left: -50%;
|