<template>
	<div class="videoListBig">
		<div class="title"><i>监控设备列表</i></div>
		<div class="content">
			<div class="decivList">
				<div class="menuDev" v-for="item in VideoData.VideoList" :class="item.status == 0 ? 'online' : 'offline'">
					<div class="decName">
						<span v-show="item.status == 0"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
						<span v-show="item.status == 1"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
						<span> {{ item.videoName }}</span>
					</div>
					<div class="status">{{ item.status == 0 ? "在线" : "离线" }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

export default {
	setup() {
		let VideoData = reactive({
			VideoList: [
				{
					videoName: "东侧枪机",
					status: 0
				},
				{
					videoName: "南侧枪机",
					status: 1
				},
				{
					videoName: "西侧枪机",
					status: 0
				},
				{
					videoName: "北侧枪机",
					status: 0
				},
				{
					videoName: "北侧枪机",
					status: 0
				},
				{
					videoName: "北侧枪机",
					status: 0
				},
				{
					videoName: "北侧枪机",
					status: 1
				},
				{
					videoName: "北侧枪机",
					status: 0
				},
				{
					videoName: "北侧枪机",
					status: 0
				},
				{
					videoName: "北侧枪机",
					status: 0
				},
				{
					videoName: "北侧枪机",
					status: 0
				},
				{
					videoName: "北侧枪机",
					status: 0
				}
			]
		});
		return {
			VideoData
		};
	}
};
</script>

<style lang="scss" scoped>
.videoListBig {
	width: 100%;
	height: 100%;
	.title {
		height: 5%;
		line-height: 35px;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/titleImg.webp") no-repeat;
		background-size: 150% 100%;
		i {
			margin-left: 50px;
			font-family: OPPOSansH;
		}
	}
	.content {
		height: 95%;
		width: 100%;
		margin-top: 10px;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
		display: flex;
		font-size: calc(100vw * 14 / 1920);
	}
}
.decivList {
	width: 100%;
	height: 70%;
	.menuDev {
		height: 6%;
		background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
		display: flex;
		line-height: 35px;
		font-size: calc(100vw * 14 / 1920);
		margin: 2% 3%;
		cursor: pointer;
		.decName {
			width: 30%;
			span {
				margin-left: 10%;
			}
		}
		.status {
			margin-left: 56%;
		}
	}
	.menuDev:hover {
		height: 6%;
		background: url("@/assets/images/dustNoise/devImg.png") no-repeat;
		background-size: 100% 100%;
	}
}
.online {
	.status {
		color: #65d7f9;
	}
}
.offline {
	.status {
		color: #ec6266;
	}
}
</style>
