zhgdlarge/src/views/sevenLargeScreen/towerCraneMonitoring/leftBottom.vue

<template>
	<Card title="施工塔吊维保">
		<div class="leftBottom">
			<div class="time">
				<el-date-picker
					v-model="value1"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:size="size"
				/>
			</div>
			<div class="listDiv">
				<div class="list" v-for="item in 3">
					<div class="listLeft"><img src="@/assets/images/towerCraneMonitoring/dtImg.png" alt="" /></div>
					<div class="listRight">
						<div style="display: flex; justify-content: space-between; align-items: center">
							<p style="font-size: 14px; margin-top: 4%">设备名称</p>
							<div class="devStatus">
								<div v-if="devState === 0" style="font-size: 14px; color: #65d7f9">正常</div>
								<div v-else style="font-size: 14px; color: #ec6266">报警</div>
							</div>
						</div>
						<div style="margin-top: -6%; color: #a1accb">时间:2023-04-18-2023-04-24</div>
					</div>
				</div>
				<!-- <div class="list"></div>
				<div class="list"></div> -->
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Card from "@/components/card.vue";
const size = (ref < "default") | "large" | ("small" > "default");
const value1 = ref("");
let devState = ref(0 as any);
</script>
<style lang="scss" scoped>
.leftBottom {
	width: 100%;
	height: 100%;
	overflow: hidden;
	.time {
		position: absolute;
		z-index: 999;
		left: 15%;
		margin-top: 0.5%;
	}
	.listDiv {
		width: 89%;
		height: 74%;
		margin-top: 10%;
		margin-left: 6%;
		.list {
			width: 100%;
			height: 30%;
			background-color: orange;
			background: url("@/assets/images/towerCraneMonitoring/carContent.png") no-repeat;
			background-size: 100% 100%;
			margin-top: 2%;
			display: flex;
			position: relative;
			.listLeft {
				margin-left: 4%;
				img {
					height: 85%;
					width: 100%;
					margin-top: 11%;
				}
			}
			.listRight {
				color: #fff;
				margin-left: 3%;
				.devStatus {
					position: absolute;
					right: 5%;
					top: 15%;
				}
			}
		}
	}
}

::v-deep .el-input__wrapper {
	width: 50%;
	height: 0%;
	background: #0d2956;
}
::v-deep .el-range-separator {
	color: #ccc;
	font-size: 10px;
}
::v-deep .el-range-input {
	color: #ccc;
	font-size: 10px;
}
</style>