<template>
<div class="cusWrap">
<div class="fullPage" ref="fullPage">
<div class="fullPageContainer" ref="fullPageContainer" @mousewheel="mouseWheelHandle" @DOMMouseScroll="mouseWheelHandle">
<div class="section section1">
<el-image style="width: 100%; height: 100vh" :src="require('@/assets/images/customizer/bg_定制师申请@2x.png')"></el-image>
<div class="down" @click="next()">
<el-image style="width: 32px; height: 32px" :src="require('@/assets/images/customizer/Group 18@2x.png')" ></el-image>
</div>
</div>
<div class="section section2">
<el-image style="width: 100%; height: 100vh" :src="require('@/assets/images/customizer/bg_qr@2x.png')"></el-image>
<div class="mask">
<v-Erwei></v-Erwei>
</div>
</div>
<div class="section section3" style="height: 222px;background: #ff0;" >
<!-- <div style="height: 200px;background: #ff0;"></div> -->
<v-footer class="section section3" ref="vf"></v-footer>
</div>
</div>
</div>
</div>
</template>
<script>
import vFooter from "./../../components/footer.vue";
import vErwei from "./erwei.vue";
export default {
components: {
vErwei,
vFooter
},
data() {
return {
fullpage: {
current: 1,
isScrolling: false,
deltaY: 0
}
};
},
mounted() {
console.log(0);
this.$parent.$refs.vheader.isFixed = true;
this.$parent.$refs.vfootexr.footerVis(true);
},
methods: {
next() {
let len = 3;
if (this.fullpage.current + 1 <= len) {
this.fullpage.current += 1;
this.move(this.fullpage.current);
}
},
pre() {
if (this.fullpage.current - 1 > 0) {
this.fullpage.current -= 1;
this.move(this.fullpage.current);
}
},
move(index) {
this.fullpage.isScrolling = true;
this.directToMove(index);
setTimeout(() => {
this.fullpage.isScrolling = false;
}, 1010);
},
directToMove(index) {
let height = this.$refs["fullPage"].clientHeight;
let scrollPage = this.$refs["fullPageContainer"];
// console.log(this.$refs["vf"]);
// let footheight = this.$refs["vf"].clientHeight;
// console.log(footheight);
let scrollHeight;
scrollHeight = -(index - 1) * height + "px";
if (index == 3) {
scrollHeight = -1 * height -222 + "px";
} else {
}
scrollPage.style.transform = `translateY(${scrollHeight})`;
// window.scrollTo({
// top: scrollHeight,
// behavior: "smooth"
// });
this.fullpage.current = index;
},
mouseWheelHandle(event) {
let evt = event || window.event;
if (evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.returnValue = false;
}
if (this.fullpage.isScrolling) {
return false;
}
let e = event.originalEvent || event;
this.fullpage.deltaY = e.deltaY || e.detail;
if (this.fullpage.deltaY > 0) {
// this.$parent.$refs.vfooter.footerVis(false);
this.next();
} else if (this.fullpage.deltaY < 0) {
// this.$parent.$refs.vfooter.footerVis(true);
this.pre();
}
}
}
};
</script>
<style lang="scss" scoped>
.cusWrap {
overflow: hidden;
// margin-bottom: 100vh;
.firstPic {
width: 100vw;
height: 100vh;
position: relative;
}
.fullPage {
height: 100vh;
overflow: hidden;
}
.fullPageContainer {
width: 100%;
height: 100%;
transition: all linear 0.5s;
}
.section {
width: 100%;
height: 100vh;
background-position: center center;
background-repeat: no-repeat;
}
.section1 {
.down {
position: absolute;
bottom: 60px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
.el-image {
-webkit-animation: move 1s ease-in-out infinite alternate;
animation: move 1s ease-in-out infinite alternate;
cursor: pointer;
}
}
}
.section1 .secction1-content {
color: #fff;
text-align: center;
position: absolute;
top: 40%;
right: 0;
left: 0;
}
.section2 {
position: relative;
.mask {
position: absolute;
width: 480px;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
height: 460px;
background: #fff;
}
}
}
@keyframes move {
0% {
transform: scale(0.8);
/*开始为原始大小*/
}
100% {
transform: scale(1.2);
/*放大1.1倍*/
}
}
@-webkit-keyframes move {
0% {
transform: scale(0.8);
/*开始为原始大小*/
}
100% {
transform: scale(1.2);
/*放大1.1倍*/
}
}
</style>
