dezhou-screen/src/views/HomeView.vue

<template>
	<!-- transform: 'scale(0.18182, 0.25)', -->
	<!-- :style="{
			transform: 'scale(0.72727, 1)',
			transformOrigin: 'top left',
		}" -->
	<div class="home-view" :style="styles">
		<div class="bg-layer"></div>
		<LeftSide />
		<section class="center">
			<div class="center-top">
				<div class="screen-container top-left"></div>
				<MainContent />
				<div class="screen-container top-right"></div>
			</div>
			<div class="center-bottom">
				<!-- 监控组 2 -->
				<MonitorGroup2 />

				<!-- 数据组 -->
				<DataGroup />
			</div>
		</section>
		<RightSide />
	</div>
</template>

<script>
// import BigHeader from "../components/layout/Header.vue";
// import Main from "../components/layout/Main.vue";
import LeftSide from "./LeftSide.vue";
import RightSide from "./RightSide.vue";
import MainContent from './MainContent.vue';
import MonitorGroup2 from "@/components/groups/monitor2.vue";
import DataGroup from "@/components/groups/data.vue";

export default {
	name: "HomeView",
	components: { LeftSide, RightSide, MainContent, MonitorGroup2, DataGroup },
	props: {},
	data() {
		return {
			value: 10,
		};
	},
	computed: {
		styles() {
			let v = (this.value / 100).toFixed(2);
			return {
				transform: `scale(${v * 24 * 10 / 33}, ${v * 10})`,
				transformOrigin: "top left",
			};
		},
	},
	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);

		// this.$watch('value', val => {
		// 	ranger.value = val
		// })

		document.addEventListener("keydown", (e) => {
			if (e.shiftKey && e.key === "L") {
				document.getElementById("slider").classList.toggle("show");
			}
		});
		document.getElementById("slider").addEventListener("mouseleave", () => {
			setTimeout(() => {
				document.getElementById("slider").classList.remove("show");
			}, 200);
		});
	},
	methods: {
		handleSlide(e) {
			this.value = e.target.value;
			window.scroll(0, 0);
		},
	},
};
</script>

<style lang="scss">
@import "../assets/styles/functions";

.home-view {
	height: 4320px;
	width: 21120px;
	overflow: hidden;
	// background: #C9CCE5;
	background: url(../assets/bg.png) center/cover no-repeat;
	color: white;
	display: flex;
	position: relative;
}

.bg-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	// background: #c9cce577;
	// background: url(../assets/bg.png) center/cover no-repeat;
}

.center {
	width: 13515px;
	height: 4320px;
	display: flex;
	flex-direction: column;
	// position: relative;
}

.center-top {
	height: 2168px;
	// background: #0b58ff33;
	display: flex;
}

.center-bottom {
	flex: 1;
	height: 1px;
	background: #ccc1;
	position: relative;
}

.slider {
	height: 5vh;
	width: 20vw;
	border-radius: 88px;
	box-shadow: 0 0 68px 8px rgba($color: #000000, $alpha: 0.3);
	padding: 32px;
	display: grid;
	place-items: center;
	background: #fff;
	position: fixed;
	// bottom: 64px;
	bottom: 0;
	opacity: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: opacity 0.3s ease-out, bottom 0.3s ease-out;

	input {
		width: 100%;
		transform: translateY(-7px);
		color: #0b58ff;
		background: #fcc;
	}
}

.slider.show {
	opacity: 1;
	bottom: 64px;
}

.screen-container {
	// background: #09df2233;
	display: inline-block;
	width: 3854px;
	height: 2168px;
}

// .main-container__content {
// 	flex: 1;
// 	background: #38012311;
// }

.top-left {}
</style>