|
@@ -50,85 +50,87 @@
|
|
|
</header>
|
|
|
</div>
|
|
|
<div class="shua shua_js" v-if="!show_white && !flag"></div>
|
|
|
- <div class="one">
|
|
|
- <div class="videoContainer">
|
|
|
- <video id="back_video" :poster="pageData.url1_img" class="video fillWidth" :src="pageData.url1" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true" crossorigin="anoymous" v-if="pageData.type1=='video'">
|
|
|
- <!-- <source type="video/mp4" /> -->
|
|
|
- </video>
|
|
|
- <canvas id="cvback_video" style="display:none;"></canvas>
|
|
|
- <el-image :src="pageData.url1" class="video fillWidth" fit="cover" v-if="pageData.type1=='image'"></el-image>
|
|
|
- </div>
|
|
|
- <div class="subTitle">
|
|
|
- <div v-html="pageData.subtitle1"></div>
|
|
|
- </div>
|
|
|
- <div class="title">
|
|
|
- <div v-show="scroll_top == 0">
|
|
|
- <h1 style="color: #fff;">{{pageData.title}}</h1>
|
|
|
- <div class="line" style="background: rgba(255,255,255,.5)"></div>
|
|
|
- <div class="hflex jbetween" v-show="show_white">
|
|
|
- <div class="text point">{{pageData.home_time}}</div>
|
|
|
- <div class="hflex point" @click="scorll_down()">
|
|
|
- <img class="down" src="@/assets/images/common/fv-arrow-down.svg" alt="" />
|
|
|
- <div class="text">向下滑动</div>
|
|
|
+ <div ref="scrollview" @mousewheel="scrollChange" @DOMMouseScroll="scrollChange" >
|
|
|
+ <div class="one" >
|
|
|
+ <div class="videoContainer">
|
|
|
+ <video id="back_video" class="video fillWidth" :src="pageData.url11" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true" crossorigin="anoymous" v-if="!flag">
|
|
|
+ <!-- <source type="video/mp4" /> -->
|
|
|
+ </video>
|
|
|
+ <canvas id="cvback_video" style="display:none;"></canvas>
|
|
|
+ <el-image :src="pageData.url1" class="video fillWidth" v-if="flag && pageData.url1 !== undefined"></el-image>
|
|
|
+ </div>
|
|
|
+ <div class="subTitle">
|
|
|
+ <div v-html="pageData.subtitle1"></div>
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ <div v-show="scroll_top == 0">
|
|
|
+ <h1 style="color: #fff;">{{pageData.title}}</h1>
|
|
|
+ <div class="line" style="background: rgba(255,255,255,.5)"></div>
|
|
|
+ <div class="hflex jbetween" v-show="show_white">
|
|
|
+ <div class="text point">{{pageData.home_time}}</div>
|
|
|
+ <div class="hflex point" @click="scorll_down()">
|
|
|
+ <img class="down" src="@/assets/images/common/fv-arrow-down.svg" alt="" />
|
|
|
+ <div class="text">向下滑动</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="content" v-html="pageData.subtitle2"></div>
|
|
|
+ </div>
|
|
|
+ <div class="icon_down vflex acenter jbetween point" v-if="down_icon" @click="scorll_down2(-1)">
|
|
|
+ <img src="@/assets/images/common/icon-down-1.png" alt="" />
|
|
|
+ <img src="@/assets/images/common/icon-down-2.png" alt="" />
|
|
|
</div>
|
|
|
- <div class="content" v-html="pageData.subtitle2"></div>
|
|
|
- </div>
|
|
|
- <div class="icon_down vflex acenter jbetween point" v-show="scroll_top > 200 && scroll_top < 1500 && !flag" @click="scorll_down2(-1)">
|
|
|
- <img src="@/assets/images/common/icon-down-1.png" alt="" />
|
|
|
- <img src="@/assets/images/common/icon-down-2.png" alt="" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- <div class="fullPage"> -->
|
|
|
- <div class="two_once" id="scroll_once" ref="scrollview" @mousewheel="scrollChange" @DOMMouseScroll="scrollChange" v-if="!flag">
|
|
|
+ <!-- <div class="fullPage"> -->
|
|
|
+ <div class="two_once" id="scroll_once" v-if="!flag">
|
|
|
<div class="shua shua_js" v-if="fullpage.current == 1 && !flag"></div>
|
|
|
</div>
|
|
|
- <div class="fullPageContainer" ref="fullPageContainer" @mousewheel="mouseWheelHandle" @DOMMouseScroll="mouseWheelHandle">
|
|
|
- <div v-for="(item,index) in pageList" :key="index" class="two">
|
|
|
- <div class="video_bg" :id="'video' + index">
|
|
|
- <el-image :src="item.url" fit="cover" class="img" v-if="item.type2=='image'"></el-image>
|
|
|
+ </div>
|
|
|
+ <div class="fullPageContainer" ref="fullPageContainer" @mousewheel="mouseWheelHandle" @DOMMouseScroll="mouseWheelHandle">
|
|
|
+ <div v-for="(item,index) in pageList" :key="index" class="two">
|
|
|
+ <div class="video_bg" :id="'video' + index">
|
|
|
+ <el-image :src="item.url" fit="cover" class="img" v-if="flag && item.url !== undefined"></el-image>
|
|
|
|
|
|
- <div class="shua shua_js" v-if="fullpage.current - 2 == index && !flag"></div>
|
|
|
-
|
|
|
- <video :src="item.url" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true" preload="auto" crossorigin="anymous" v-if="item.type2=='video'"></video>
|
|
|
- <div class="content hflex jbetween">
|
|
|
- <div class="content_left">
|
|
|
- <div class="name" :style="!fullpage.isScrolling?'color: #fff':''">{{ item.title }}</div>
|
|
|
- <div class="wenan" v-html="item.content" :style="!fullpage.isScrolling?'color: #fff':''"></div>
|
|
|
- </div>
|
|
|
- <div class="content_right vflex acenter jend">
|
|
|
- <div class="vflex acenter">
|
|
|
- <div v-for="(items,indexs) in pageList.length" :key="indexs">
|
|
|
- <div class="circle point" :class="index == indexs?'circle_active':''" @click="jump(indexs)"></div>
|
|
|
- </div>
|
|
|
- <div class="icon_down2 point vflex acenter jbetween" @click="scorll_down2(index + 1)">
|
|
|
- <img src="@/assets/images/common/icon-down-1.png" alt="" />
|
|
|
- <img src="@/assets/images/common/icon-down-2.png" alt="" />
|
|
|
- </div>
|
|
|
+ <div class="shua shua_js" v-if="fullpage.current - 2 == index && !flag"></div>
|
|
|
+
|
|
|
+ <video :src="item.url1" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true" preload="auto" crossorigin="anymous" v-if="!flag"></video>
|
|
|
+ <div class="content hflex jbetween">
|
|
|
+ <div class="content_left">
|
|
|
+ <div class="name" :style="!fullpage.isScrolling?'color: #fff':''">{{ item.title }}</div>
|
|
|
+ <div class="wenan" v-html="item.content" :style="!fullpage.isScrolling?'color: #fff':''"></div>
|
|
|
+ </div>
|
|
|
+ <div class="content_right vflex acenter jend">
|
|
|
+ <div class="vflex acenter">
|
|
|
+ <div v-for="(items,indexs) in pageList.length" :key="indexs">
|
|
|
+ <div class="circle point" :class="index == indexs?'circle_active':''" @click="jump(indexs)"></div>
|
|
|
</div>
|
|
|
- <div class="right_index" :style="!fullpage.isScrolling?'color: #fff':''">
|
|
|
- <span class="indexs">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</span>
|
|
|
- <span>/{{ pageList.length < 10 ? '0' + pageList.length : pageList.length }}</span>
|
|
|
+ <div class="icon_down2 point vflex acenter jbetween" @click="scorll_down2(index + 1)">
|
|
|
+ <img src="@/assets/images/common/icon-down-1.png" alt="" />
|
|
|
+ <img src="@/assets/images/common/icon-down-2.png" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="right_index" :style="!fullpage.isScrolling?'color: #fff':''">
|
|
|
+ <span class="indexs">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</span>
|
|
|
+ <span>/{{ pageList.length < 10 ? '0' + pageList.length : pageList.length }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
<!-- </div> -->
|
|
|
<div class="three" @mousewheel="scrollChange2" @DOMMouseScroll="scrollChange2" ref="videos">
|
|
|
<div class="video_bg">
|
|
|
<div class="shua shua_js" v-if="fullpage.current - 2 == pageList.length && !flag"></div>
|
|
|
- <video id="videos" :src="pageData.url2" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true" preload="auto" crossorigin="anymous" v-if="pageData.type2 == 'video'"></video>
|
|
|
- <el-image id="videos" class="videos_img" :src="pageData.url2" fit="cover" v-if="pageData.type2 == 'image'"></el-image>
|
|
|
+ <video id="videos" :src="pageData.url22" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true" preload="auto" crossorigin="anymous" v-if="!flag"></video>
|
|
|
+ <el-image id="videos" class="videos_img" :src="pageData.url2" fit="cover" v-if="flag && pageData.url2 !== undefined"></el-image>
|
|
|
</div>
|
|
|
<div class="three_text" :style="!fullpage.isScrolling?'color: #fff':''" v-html="pageData.subtitle3"></div>
|
|
|
</div>
|
|
|
<div class="three">
|
|
|
<div class="video_bg">
|
|
|
- <video id="videos2" :src="pageData.url3" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true" preload="auto" crossorigin="anymous" v-if="pageData.type3 == 'video'"></video>
|
|
|
- <el-image class="videos_img" :src="pageData.url3" fit="cover" v-if="pageData.type3 == 'image'"></el-image>
|
|
|
+ <video id="videos2" :src="pageData.url33" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true" preload="auto" crossorigin="anymous" v-if="!flag"></video>
|
|
|
+ <el-image class="videos_img" :src="pageData.url3" fit="cover" v-if="flag && pageData.url3 !== undefined"></el-image>
|
|
|
</div>
|
|
|
</div>
|
|
|
<Footer :footer="footer"></Footer>
|
|
@@ -136,7 +138,7 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import Footer from '@/components/footer.vue'
|
|
|
-
|
|
|
+import { isElementNotInViewport } from "@/components/utils";
|
|
|
//页面引入swiper
|
|
|
var that = ''
|
|
|
export default {
|
|
@@ -167,13 +169,22 @@ export default {
|
|
|
flag: true,
|
|
|
dialogVisible: false,
|
|
|
autoplay: true,
|
|
|
- a: ''
|
|
|
+ a: '',
|
|
|
+ down_icon: false
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
that = this
|
|
|
+
|
|
|
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
|
|
|
+
|
|
|
that.flag = flag
|
|
|
+ if(that.flag === null) {
|
|
|
+
|
|
|
+ that.flag = false
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
// this.getVideoStyle()
|
|
|
// document.addEventListener("WeixinJSBridgeReady", function () {
|
|
|
// document.getElementById("back_video").play();
|
|
@@ -194,14 +205,13 @@ export default {
|
|
|
// firefox
|
|
|
document.documentElement.scrollTop = 0
|
|
|
window.scrollTo(0,0);
|
|
|
- console.log('页面刷新',document.documentElement.scrollTop);
|
|
|
|
|
|
that.scroll_top = 0
|
|
|
});
|
|
|
const scrollview = this.$refs['fullPageContainer']
|
|
|
- scrollview.addEventListener('scroll', this.scrollChange, true)
|
|
|
+ scrollview.addEventListener('scroll', this.mouseWheelHandle, true)
|
|
|
const scrollview2 = this.$refs['scrollview']
|
|
|
- scrollview2.addEventListener('scroll', this.mouseWheelHandle, true)
|
|
|
+ scrollview2.addEventListener('scroll', this.scrollChange, true)
|
|
|
const scrollview3 = this.$refs['videos']
|
|
|
scrollview3.addEventListener('scroll', this.scrollChange2, true)
|
|
|
}
|
|
@@ -330,6 +340,8 @@ export default {
|
|
|
}
|
|
|
if(that.windowWidth <= 750) {
|
|
|
that.flag = true
|
|
|
+ } else {
|
|
|
+ that.flag = false
|
|
|
}
|
|
|
}
|
|
|
window.onresize()
|
|
@@ -368,11 +380,17 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 监听页面滑动
|
|
|
- async handleScroll() {
|
|
|
+ handleScroll() {
|
|
|
that = this
|
|
|
+ that.windowHeight = document.documentElement.clientHeight
|
|
|
this.scroll_top = document.documentElement.scrollTop
|
|
|
- that.clientHeight = document.documentElement.clientHeight;
|
|
|
-
|
|
|
+ console.log(this.scroll_top,that.windowHeight);
|
|
|
+ // that.windowHeight = document.documentElement.clientHeight;
|
|
|
+ if(this.scroll_top > 200 && this.scroll_top < that.windowHeight && !that.flag) {
|
|
|
+ that.down_icon = true
|
|
|
+ } else {
|
|
|
+ that.down_icon = false
|
|
|
+ }
|
|
|
},
|
|
|
// 向下切换
|
|
|
next() {
|
|
@@ -444,7 +462,7 @@ export default {
|
|
|
return false
|
|
|
}
|
|
|
let e = event.originalEvent || event
|
|
|
- this.fullpage.deltaY = e.deltaY || e.toDetail
|
|
|
+ this.fullpage.deltaY = e.deltaY || e.detail
|
|
|
if(this.fullpage.deltaY > 0) {
|
|
|
this.next()
|
|
|
} else if(this.fullpage.deltaY < 0) {
|
|
@@ -453,7 +471,7 @@ export default {
|
|
|
},
|
|
|
|
|
|
scrollChange(event) {
|
|
|
- console.log('鼠标滑动');
|
|
|
+ // console.log('鼠标滑动');
|
|
|
let evt = event || window.event
|
|
|
if(evt.stopPropageation) {
|
|
|
evt.stopPropageation()
|
|
@@ -464,12 +482,12 @@ export default {
|
|
|
return false
|
|
|
}
|
|
|
let e = event.originalEvent || event
|
|
|
- this.fullpage.deltaY = e.deltaY || e.toDetail
|
|
|
+ this.fullpage.deltaY = e.deltaY || e.detail
|
|
|
const content = document.getElementById('video0');
|
|
|
const {top, bottom}=content.getBoundingClientRect();
|
|
|
-
|
|
|
+ console.log(top,bottom,that.windowHeight);
|
|
|
if(this.fullpage.deltaY > 0) {
|
|
|
- if(bottom > 0 && top < that.clientHeight + 50) {
|
|
|
+ if(bottom > 0 && top < that.windowHeight + 50) {
|
|
|
this.next()
|
|
|
} else {
|
|
|
document.documentElement.scrollTop += 50
|
|
@@ -490,7 +508,7 @@ export default {
|
|
|
return false
|
|
|
}
|
|
|
let e = event.originalEvent || event
|
|
|
- this.fullpage.deltaY = e.deltaY || e.toDetail
|
|
|
+ this.fullpage.deltaY = e.deltaY || e.detail
|
|
|
var test = this.scroll_top
|
|
|
const content = document.getElementById('video' + (that.pageList.length - 1));
|
|
|
const {top, bottom}=content.getBoundingClientRect();
|
|
@@ -500,7 +518,7 @@ export default {
|
|
|
// this.next()
|
|
|
document.documentElement.scrollTop += 50
|
|
|
} else if(this.fullpage.deltaY < 0) {
|
|
|
- if(-top < that.clientHeight + 50 && bottom >= 0) {
|
|
|
+ if(-top < that.windowHeight + 50 && bottom >= 0) {
|
|
|
this.pre()
|
|
|
} else {
|
|
|
document.documentElement.scrollTop -= 50
|
|
@@ -509,11 +527,12 @@ export default {
|
|
|
},
|
|
|
// 点击向下滑动
|
|
|
scorll_down() {
|
|
|
- // console.log(value)
|
|
|
+ var width = document.documentElement.clientHeight
|
|
|
+
|
|
|
if(that.flag) {
|
|
|
- document.documentElement.scrollTop = this.scroll_top + that.clientHeight / 8
|
|
|
+ document.documentElement.scrollTop = this.scroll_top + width / 8
|
|
|
} else {
|
|
|
- document.documentElement.scrollTop = this.scroll_top + that.clientHeight / 2
|
|
|
+ document.documentElement.scrollTop = this.scroll_top + width / 2
|
|
|
}
|
|
|
this.scroll_top = document.documentElement.scrollTop
|
|
|
},
|