|
|
@@ -1,14 +1,11 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="home-view" :style="styles"> |
|
|
|
<LeftSide /> |
|
|
|
<section class="center"> |
|
|
|
<BigHeader /> |
|
|
|
<Main /> |
|
|
|
</section> |
|
|
|
<RightSide /> |
|
|
|
</div> |
|
|
|
<Slider v-model="value" /> |
|
|
|
<div class="home-view" :style="styles"> |
|
|
|
<LeftSide /> |
|
|
|
<section class="center"> |
|
|
|
<BigHeader /> |
|
|
|
<Main /> |
|
|
|
</section> |
|
|
|
<RightSide /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
@@ -17,11 +14,10 @@ import BigHeader from "../components/layout/Header.vue"; |
|
|
|
import Main from "../components/layout/Main.vue"; |
|
|
|
import LeftSide from "./LeftSide.vue"; |
|
|
|
import RightSide from "./RightSide.vue"; |
|
|
|
import Slider from "../utils/slider.vue"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "HomeView", |
|
|
|
components: { BigHeader, Main, LeftSide, RightSide, Slider }, |
|
|
|
components: { BigHeader, Main, LeftSide, RightSide }, |
|
|
|
props: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
@@ -37,17 +33,47 @@ export default { |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
const slider = document.createElement('div') |
|
|
|
slider.id = 'slider' |
|
|
|
slider.classList.add('slider') |
|
|
|
const ranger = document.createElement('input') |
|
|
|
ranger.type = 'range' |
|
|
|
ranger.value = 100 |
|
|
|
ranger.addEventListener('input', this.handleSlide) |
|
|
|
slider.appendChild(ranger) |
|
|
|
document.body.appendChild(slider) |
|
|
|
|
|
|
|
// this.$watch('value', val => { |
|
|
|
// ranger.value = val |
|
|
|
// }) |
|
|
|
|
|
|
|
document.addEventListener("keydown", (e) => { |
|
|
|
if (e.shiftKey && e.key === "L") { |
|
|
|
document.getElementById("slider").classList.toggle("show"); |
|
|
|
} |
|
|
|
}); |
|
|
|
document.getElementById("slider").addEventListener("mouseleave", () => { |
|
|
|
setTimeout(() => { |
|
|
|
document.getElementById("slider").classList.remove("show"); |
|
|
|
}, 200); |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleSlide(e) { |
|
|
|
this.value = e.target.value |
|
|
|
window.scroll(0, 0) |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
<style lang="scss"> |
|
|
|
@import "../assets/styles/functions"; |
|
|
|
|
|
|
|
.home-view { |
|
|
|
height: 4320px; |
|
|
|
width: 21120px; |
|
|
|
// height: 300px; |
|
|
|
// width: 600px; |
|
|
|
overflow: hidden; |
|
|
|
background: url(../assets/bg.png) center/cover no-repeat, #e0e3f6; |
|
|
|
color: white; |
|
|
@@ -60,4 +86,34 @@ export default { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
.slider { |
|
|
|
height: 5vh; |
|
|
|
width: 20vw; |
|
|
|
border-radius: 88px; |
|
|
|
box-shadow: 0 0 68px 8px rgba($color: #000000, $alpha: 0.3); |
|
|
|
padding: 32px; |
|
|
|
display: grid; |
|
|
|
place-items: center; |
|
|
|
background: #fff; |
|
|
|
position: fixed; |
|
|
|
// bottom: 64px; |
|
|
|
bottom: 0; |
|
|
|
opacity: 0; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
transition: opacity 0.3s ease-out, bottom 0.3s ease-out; |
|
|
|
|
|
|
|
input { |
|
|
|
width: 100%; |
|
|
|
transform: translateY(-7px); |
|
|
|
color: #0b58ff; |
|
|
|
background: #fcc; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.slider.show { |
|
|
|
opacity: 1; |
|
|
|
bottom: 64px; |
|
|
|
} |
|
|
|
</style> |