<!-- 
    filename: index.vue
    author: liubin
    date: 2023-10-11 09:32:04
    description: 设备看板
-->

<template>
	<div ref="dataBoard" class="data-board">
		<el-button type="text" @click="goback" class="go-back--btn">返回</el-button>
	</div>
</template>

<script>
export default {
	name: 'DataBoard',
	components: {},
	props: {},
	data() {
		return {
			appMain: null, // dom
			parentStyle: {
				margin: '8px 14px 0px 16px',
				minHeight: 'calc(100vh - 120px - 8px)',
			}, // object
			mainFooter: null, // dom
		};
	},
	// mounted() {
	// 	this.$nextTick(() => {
	// 		this.modify();
	// 	});
	// },
	// activated() {
	// 	this.modify();
	// },
	// deactivated() {
	// 	this.recover();
	// },
	// beforeDestroy() {
	// 	this.recover();
	// },
	methods: {
		// modify() {
		// 	// 在这个页面临时修改下父类的margin，结束时需还原
		// 	this.appMain = document.querySelector('.app-main');
		// 	// this.appMain.style.minHeight = 'calc(100vh - 90px)';
		// 	this.appMain.style.margin = 0;
		// 	// 在这个页面临时删除 main-footer 元素，结束时需还原
		// 	// this.mainFooter = document.querySelector('.main-footer').cloneNode(true);
		// 	// document.querySelector('.main-footer').remove();
        //     this.$refs.dataBoard.classList.add('data-board');
		// },
		// recover() {
        //     this.$refs.dataBoard.classList.remove('data-board');
		// 	this.$nextTick(() => {
		// 		this.appMain.style.margin = this.parentStyle.margin;
		// 		// this.appMain.style.minHeight = this.parentStyle.minHeight;
		// 		// this.appMain.insertAdjacentElement('afterend', this.mainFooter);
		// 	});
		// },
		goback() {
			this.$router.go(-1);
		}
	},
};
</script>

<style scoped lang="scss">
.data-board {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../../../assets/images/DataBoard.png') 100% 100% / contain
		no-repeat;
}

.go-back--btn {
	position: fixed;
	top: 28px;
	left: 24px;
	color: #fff;
	font-size: 18px;
	letter-spacing: 6px;

	&:hover {
		text-decoration: underline;
	}

	&::after {
		content: "\2BAA";
		position: absolute;
		top: 6px;
		right: -26px;
		font-size: 24px;
	}
}
</style>
