zhgdlarge/src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue

<template>
	<div class="topCenterBox">
		<div class="title"><i>配电箱实时数据</i></div>

		<div class="content">
			<div class="selectRight">
				<el-select v-model="value" class="m-2" placeholder="Select" size="small">
					<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div class="imgBg">
				<div class="gifImg">
					<img src="@/assets/images/distributionMonitoring/centerImg2.webp" alt="" />
				</div>
				<div class="menListWd menu">
					<span class="text">环境温度</span>
					<p class="textColor2">26℃</p>
				</div>
				<div class="menListXl menu">
					<span class="text">A箱电压</span>
					<p class="textColor1">220V</p>
				</div>
				<div class="menListDl menu">
					<span class="text">A箱线缆温度</span>
					<p class="textColor2">26℃</p>
				</div>
				<div class="menListLdl menu">
					<span class="text">A箱电流</span>
					<p class="textColor3">2kA</p>
				</div>
				<div class="menListBdl menu">
					<span class="text">漏电流</span>
					<p class="textColor3">2mA</p>
				</div>
				<div class="menListBxl menu">
					<span class="text">B箱电流</span>
					<p class="textColor3">26kA</p>
				</div>
				<div class="menListBwd menu">
					<span class="text">B箱线缆温度</span>
					<p class="textColor2">26℃</p>
				</div>
				<div class="menListBdy menu">
					<span class="text">B箱电压</span>
					<p class="textColor1">220V</p>
				</div>
				<!-- <div class="menListDy menu"><span>A箱电压</span><span class="textColor">220V</span></div>
				<div class="menListXl menu"><span>A箱线缆温度</span><span class="textColor">26℃</span></div>
				<div class="menListDl menu"><span>A箱电流</span><span class="textColor">2kA</span></div>
				<div class="menListLdl menu"><span>漏电流</span><span class="textColor">2mA</span></div>
				<div class="menListBdl menu"><span>B箱电流</span><span class="textColor">26kA</span></div>
				<div class="menListBxl menu"><span>B箱线缆温度</span><span class="textColor">26℃</span></div>
				<div class="menListBdy menu"><span>B箱电压</span><span class="textColor">220V</span></div> -->
			</div>
		</div>
	</div>
</template>

<script>
import { ref } from "vue";

export default {
	setup() {
		const value = ref("电箱1");
		const noiseList = [
			{
				value: 0,
				label: "电箱2"
			}
		];
		return {
			value,
			noiseList
		};
	}
};
</script>

<style lang="scss" scoped>
.topCenterBox {
	width: 100%;
	height: 100%;
	.title {
		height: 8%;
		line-height: 33px;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/titleBig.webp") no-repeat;
		background-size: 100% 100%;
		i {
			margin-left: 50px;
			font-family: OPPOSansH;
		}
	}
	.content {
		height: 90%;
		width: 100%;
		margin-top: 10px;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		position: relative;
		.selectRight {
			position: absolute;
			left: 85%;
			width: 13%;
			top: 4%;
			z-index: 9;
		}
		.imgBg {
			width: 53%;
			height: 100%;
			position: absolute;
			background: url("@/assets/images/distributionMonitoring/centerImg1.png") no-repeat;
			background-size: 100% 100%;
			margin-left: 20%;
			.gifImg {
				position: absolute;
				left: 38%;
				top: 35%;
				img {
					width: 50%;
				}
			}
			.menu {
				width: 20%;
				height: 20%;
				color: #fff;
				background: url("@/assets/images/distributionMonitoring/pdxCenter.webp") no-repeat;
				background-size: 100% 100%;
				text-align: center;
				position: absolute;
				line-height: 25px;

				span {
					font-size: calc(100vw * 12 / 1920);
					margin-top: 20%;
					display: block;
				}
				p {
					font-size: calc(100vw * 22 / 1920);
					font-family: DINBold;
					margin-top: -2%;
				}
				.textColor1 {
					background-image: linear-gradient(to right, rgba(101, 215, 249, 1), rgba(255, 255, 255, 1));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.textColor2 {
					background-image: linear-gradient(to right, rgba(238, 210, 120, 1), rgba(255, 251, 224, 1));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.textColor3 {
					background-image: linear-gradient(to right, rgba(166, 229, 125, 1), rgba(255, 255, 255, 1));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			.menListWd {
				left: 40%;
			}
			.menListXl {
				top: 8%;
			}
			.menListDl {
				top: 35%;
				left: -12%;
			}
			.menListLdl {
				left: -1%;
				top: 72%;
			}
			.menListBdl {
				top: 79%;
				left: 40%;
			}
			.menListBxl {
				left: 81%;
				top: 72%;
			}
			.menListBwd {
				left: 93%;
				top: 40%;
			}
			.menListBdy {
				left: 85%;
				top: 12%;
			}
		}
	}
}
::v-deep .el-input__wrapper {
	background: #112d59;
}
::v-deep .el-input__inner {
	color: #fff;
}
::v-deep .el-select .el-input .el-select__caret {
	color: #fff;
}
</style>