93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
<script>
|
|
import Footer from './components/Footer.vue';
|
|
import Menu from './components/Menu.vue';
|
|
|
|
const pagesWithCarousel = [
|
|
'home', 'social', 'about', 'products'
|
|
];
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
stickyClass: ''
|
|
}
|
|
},
|
|
components: { Footer, Menu },
|
|
created() {
|
|
window.addEventListener('scroll', this.handleScroll);
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener('scroll', this.handleScroll);
|
|
},
|
|
beforeRouteEnter() {
|
|
this.stickyClass = '';
|
|
},
|
|
methods: {
|
|
handleScroll() {
|
|
console.log('this.$route.name :>> ', this.$route.name);
|
|
if (!pagesWithCarousel.includes(this.$route.name)) {
|
|
this.stickyClass = 'has-sticky has-sticky-1'
|
|
return;
|
|
}
|
|
|
|
if (window.scrollY > 0 && window.scrollY <= 574) {
|
|
this.stickyClass = 'has-sticky has-sticky-0';
|
|
} else if(window.scrollY > 574) {
|
|
this.stickyClass = 'has-sticky has-sticky-1';
|
|
} else {
|
|
this.stickyClass = '';
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="main-container" :class="stickyClass">
|
|
<Menu />
|
|
<div class="content-wrapper">
|
|
<RouterView />
|
|
</div>
|
|
<Footer></Footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.content-wrapper {
|
|
padding-top: 130px;
|
|
background-color: #000;
|
|
}
|
|
.content {
|
|
background-color: #000;
|
|
color: #fff;
|
|
padding: 0 72px 72px;
|
|
|
|
h2 {
|
|
font-size: 36px;
|
|
font-weight: 500;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
padding: 52px 0;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
line-height: 70px;
|
|
text-align: center;
|
|
padding: 72px 264px;
|
|
}
|
|
|
|
p {
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
line-height: 40px;
|
|
text-align: justify;
|
|
|
|
&.centered {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|