69 lines
1.3 KiB
Vue
69 lines
1.3 KiB
Vue
<template>
|
|
<!-- 上下布局 -->
|
|
<div id="default-layout">
|
|
<Header></Header>
|
|
<div id="home-container">
|
|
<keep-alive>
|
|
<Nuxt v-if="$route.meta.keepAlive" />
|
|
</keep-alive>
|
|
<Nuxt v-if="!$route.meta.keepAlive" />
|
|
</div>
|
|
<Footer></Footer>
|
|
|
|
<el-backtop target="#default-layout" :visibility-height="500" class="custom-backtop">
|
|
<div class="backtop-content" @mousedown="handleMouseDown" @mouseup="handleMouseUp">
|
|
<img src="/logo/back-top.png" alt="" />
|
|
</div>
|
|
</el-backtop>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
methods: {
|
|
handleMouseDown() {
|
|
const backtopContent = document.querySelector('.backtop-content');
|
|
if (backtopContent) {
|
|
backtopContent.style.opacity = '0.8';
|
|
}
|
|
},
|
|
handleMouseUp() {
|
|
const backtopContent = document.querySelector('.backtop-content');
|
|
if (backtopContent) {
|
|
backtopContent.style.opacity = '1';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#default-layout {
|
|
position: relative;
|
|
@include flex-column;
|
|
overflow: auto;
|
|
}
|
|
|
|
.custom-backtop {
|
|
position: fixed;
|
|
right: 15% !important;
|
|
bottom: 30% !important;
|
|
z-index: 999;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.backtop-content {
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
#home-container {
|
|
width: 100%;
|
|
|
|
background-color: $background-color;
|
|
}
|
|
</style>
|