123 lines
2.5 KiB
Vue
123 lines
2.5 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: '',
|
|
deviceClass: this.$isMobile() ? 'mobile' : 'desktop',
|
|
width: window.innerWidth
|
|
}
|
|
},
|
|
components: { Footer, Menu },
|
|
created() {
|
|
window.addEventListener('scroll', this.handleScroll);
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener('scroll', this.handleScroll);
|
|
},
|
|
beforeRouteEnter() {
|
|
this.stickyClass = '';
|
|
},
|
|
methods: {
|
|
handleScroll() {
|
|
const limit = 430;
|
|
if (!pagesWithCarousel.includes(this.$route.name)) {
|
|
this.stickyClass = 'has-sticky has-sticky-1'
|
|
return;
|
|
}
|
|
|
|
if (window.scrollY > 0 && window.scrollY <= limit) {
|
|
this.stickyClass = 'has-sticky has-sticky-0';
|
|
} else if(window.scrollY > limit) {
|
|
this.stickyClass = 'has-sticky has-sticky-1';
|
|
} else {
|
|
this.stickyClass = '';
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="width">{{ width }}px {{ deviceClass }}</div>
|
|
<Menu :class="`${stickyClass}`" />
|
|
<div class="main-container" :class="`${stickyClass} ${deviceClass}`">
|
|
<div class="content-wrapper">
|
|
<RouterView />
|
|
</div>
|
|
<Footer></Footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.width {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: white;
|
|
color: #121212;
|
|
width: 150px;
|
|
height: 30px;
|
|
z-index: 200550;
|
|
border-bottom-right-radius: 10px;
|
|
padding: 4px;
|
|
opacity: 0.5;
|
|
}
|
|
.content-wrapper {
|
|
padding-top: 91px;
|
|
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: 20px;
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
line-height: 42px;
|
|
text-align: center;
|
|
padding: 72px 264px;
|
|
}
|
|
|
|
p {
|
|
font-weight: 300;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
text-align: justify;
|
|
|
|
&.centered {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
.content-wrapper {
|
|
padding-top: 50px;
|
|
}
|
|
.content {
|
|
padding: 0 16px 72px;
|
|
|
|
h4 {
|
|
padding: 72px 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|