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

<template>
	<div class="topRightBox">
		<div class="title"><i>报警列表</i></div>
		<div class="content">
			<div class="titleData">
				<div class="numPolice police">
					<div class="numText">总报警次数</div>
					<div class="num">307</div>
				</div>
				<div class="monthPolice police2">
					<div class="numText2">本月报警次数</div>
					<div class="num2">102</div>
				</div>
				<div class="dayPolice police">
					<div class="numText">今日报警次数</div>
					<div class="num">34</div>
				</div>
			</div>
			<div class="tableBox">
				<div class="tabList">
					<div class="tabOne">报警设备</div>
					<div class="tabTwo">报警时间</div>
					<div class="tabThree">报警类型</div>
				</div>
				<div class="listBox" ref="scrollRef">
					<div v-for="item in list" class="listStyle">
						<div class="dev" style="margin-left: 5%">{{ item.dev }}</div>
						<div class="time">{{ item.time }}</div>
						<div class="type" style="margin-right: 5%">{{ item.type }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { reactive, ref } from "vue";
import Card from "@/components/card.vue";
export default {
	components: {
		Card
	},
	setup() {
		const list = reactive([
			{
				dev: "配电箱1",
				time: "2023-01-01 12:00:00",
				type: "室内水浸"
			},
			{
				dev: "配电箱1",
				time: "2023-01-01 12:00:00",
				type: "室内水浸"
			},
			{
				dev: "配电箱1",
				time: "2023-01-01 12:00:00",
				type: "室内水浸"
			},
			{
				dev: "配电箱1",
				time: "2023-01-01 12:00:00",
				type: "室内水浸"
			},
			{
				dev: "配电箱1",
				time: "2023-01-01 12:00:00",
				type: "室内水浸"
			},
			{
				dev: "配电箱1",
				time: "2023-01-01 12:00:00",
				type: "室内水浸"
			},
			{
				dev: "配电箱1",
				time: "2023-01-01 12:00:00",
				type: "室内水浸"
			},
			{
				dev: "配电箱1",
				time: "2023-01-01 12:00:00",
				type: "室内水浸"
			}
		]);
		return {
			list
		};
	}
};
</script>

<style lang="scss" scoped>
.topRightBox {
	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/titleImg.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);
		.titleData {
			height: 35%;
			// background-color: orange;
			display: flex;
			.police {
				width: 28%;
				height: 90%;
				background: pink;
				margin: 3% 2% 0 4%;
				background: url("@/assets/images/distributionMonitoring/bjlbRight1.webp") no-repeat;
				background-size: 100% 100%;
				text-align: center;
				.numText {
					margin-top: 15%;
					font-size: calc(100vw * 16 / 1920);
					color: #65d7f9;
				}
				.num {
					font-size: calc(100vw * 24 / 1920);
					font-family: sadigitalNumber;
					font-weight: 700;
					margin-top: 10%;
					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;
				}
			}
			.police2 {
				width: 28%;
				height: 90%;
				background: pink;
				margin: 3% 2% 0 4%;
				background: url("@/assets/images/distributionMonitoring/bjlbRight2.webp") no-repeat;
				background-size: 100% 100%;
				text-align: center;
				.numText2 {
					margin-top: 15%;
					font-size: calc(100vw * 16 / 1920);
				}
				.num2 {
					font-size: calc(100vw * 24 / 1920);
					font-family: sadigitalNumber;
					font-weight: 700;
					margin-top: 10%;
					background-image: linear-gradient(to right, rgba(244, 208, 101, 1), rgba(218, 216, 180, 1));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}
		.tableBox {
			width: 100%;
			height: 60%;
			margin-top: 5%;
			.tabList {
				display: flex;
				width: 100%;
				height: 11%;
				background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
				background-size: 100% 100%;
				// position: absolute;
				left: 75.5%;
				top: 75%;
				color: #7b86a3;
				font-size: calc(100vw * 14 / 1920);
				line-height: 30px;
				justify-content: space-around;
			}
			.listBox {
				.listStyle {
					display: flex;
					justify-content: space-around;
					color: #fff;
					height: 12%;
					line-height: 25px;
					font-size: calc(100vw * 12 / 1920);
				}
				.listStyle:hover {
					background: #091f3f;
				}
			}
		}
	}
}
</style>