<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>
