|
@@ -1,4 +1,9 @@ |
|
|
<template> |
|
|
<template> |
|
|
|
|
|
<!-- transform: 'scale(0.18182, 0.25)', --> |
|
|
|
|
|
<!-- :style="{ |
|
|
|
|
|
transform: 'scale(0.72727, 1)', |
|
|
|
|
|
transformOrigin: 'top left', |
|
|
|
|
|
}" --> |
|
|
<div class="home-view" :style="styles"> |
|
|
<div class="home-view" :style="styles"> |
|
|
<LeftSide /> |
|
|
<LeftSide /> |
|
|
<section class="center"> |
|
|
<section class="center"> |
|
@@ -28,21 +33,21 @@ export default { |
|
|
styles() { |
|
|
styles() { |
|
|
let v = (this.value / 100).toFixed(2); |
|
|
let v = (this.value / 100).toFixed(2); |
|
|
return { |
|
|
return { |
|
|
transform: `scale(${v})`, |
|
|
|
|
|
|
|
|
transform: `scale(${v * 24 / 33}, ${v})`, |
|
|
transformOrigin: "top left", |
|
|
transformOrigin: "top left", |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
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) |
|
|
|
|
|
|
|
|
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 => { |
|
|
// this.$watch('value', val => { |
|
|
// ranger.value = val |
|
|
// ranger.value = val |
|
@@ -61,8 +66,8 @@ export default { |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
handleSlide(e) { |
|
|
handleSlide(e) { |
|
|
this.value = e.target.value |
|
|
|
|
|
window.scroll(0, 0) |
|
|
|
|
|
|
|
|
this.value = e.target.value; |
|
|
|
|
|
window.scroll(0, 0); |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}; |
|
|
}; |
|
|