40 lines
986 B
Vue
40 lines
986 B
Vue
<script setup>
|
||
import { RouterView } from "vue-router";
|
||
import { onMounted } from 'vue'
|
||
onMounted(() => {
|
||
|
||
})
|
||
onMounted(() => {
|
||
//首先我们获得视口高度并将其乘以1%以获得1vh单位的值
|
||
let vh = window.innerHeight * 0.01
|
||
// 然后，我们将——vh自定义属性中的值设置为文档的根
|
||
document.documentElement.style.setProperty('--vh', `${vh}px`)
|
||
|
||
// 我们监听resize事件 视图大小发生变化就重新计算1vh的值
|
||
window.addEventListener('resize', () => {
|
||
// 我们执行与前面相同的脚本
|
||
let vh = window.innerHeight * 0.01
|
||
console.log(vh);
|
||
document.documentElement.style.setProperty('--vh', `${vh}px`)
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<router-view></router-view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.logo {
|
||
height: 6em;
|
||
padding: 1.5em;
|
||
will-change: filter;
|
||
transition: filter 300ms;
|
||
}
|
||
.logo:hover {
|
||
filter: drop-shadow(0 0 2em #646cffaa);
|
||
}
|
||
.logo.vue:hover {
|
||
filter: drop-shadow(0 0 2em #42b883aa);
|
||
}
|
||
</style> |