zhgdlarge/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightBottom.vue

<template>
	<div class="leftTop">
		<Card title="安全质量隐患报告">
			<div class="box-content">
				<el-scrollbar class="list-box">
					<div v-for="(item, index) in list" class="listStyle" :key="item.id">
						<div>外墙、顶板、底板出现贯通性裂缝</div>
						<div>
							<span>整改结果：</span>
							<span>已逾期</span>
						</div>
						<div>
							<div>
								<span>整改结果：</span>
								<span>已逾期</span>
							</div>
							<div>
								<span>整改结果：</span>
								<span>已逾期</span>
							</div>
							<div>
								<span>整改结果：</span>
								<span>已逾期</span>
							</div>
						</div>
					</div>
				</el-scrollbar>
			</div>
		</Card>
	</div>
</template>

<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { getCurrentDayAirQualityApi } from "@/api/modules/projectOverview";
import { ref, onMounted, reactive } from "vue";
import * as echarts from "echarts";
import Card from "@/components/card.vue";
const store = GlobalStore();
const list = ref([
	{ waterMeterName: 123, waterTonnage: 456 },
	{ waterMeterName: 123, waterTonnage: 456 },
	{ waterMeterName: 123, waterTonnage: 456 },
	{ waterMeterName: 123, waterTonnage: 456 }
]) as any;
onMounted(async () => {});
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
	.box-content {
		width: 100%;
		height: 100%;
		padding-top: 1%;
		.list-box {
			height: 94%;
			padding: 5px 24px;
			.listStyle {
				display: flex;
				flex-direction: column;
				background: rgba(9, 30, 62, 0.5);
				box-shadow: 0px 3px 4px 0px rgba(17, 141, 255, 0.5), inset 0px 0px 10px 0px #118dff;
				border-radius: 0px 0px 0px 0px;
				border: 1px solid;
				opacity: 0.7;
				border-image: linear-gradient(359deg, rgba(17, 141, 255, 1), rgba(17, 141, 255, 0)) 1 1;
				padding: 9px 13px;
				margin-bottom: 10px;
				> div:nth-child(1) {
					font-family: ABeeZee, ABeeZee;
					font-weight: 400;
					font-size: 16px;
					color: #ffffff;
					line-height: 16px;
					font-style: normal;
					text-transform: none;
					margin-bottom: 5px;
				}
				> div:nth-child(2) {
					font-family: ABeeZee, ABeeZee;
					font-weight: 400;
					font-size: 13px;
					color: #ffffff;
					font-style: normal;
					text-transform: none;
					margin-bottom: 5px;
					> span:nth-child(2) {
						color: #01e1ff;
					}
				}
				> div:nth-child(3) {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 2px;
					> div:nth-child(1) {
						font-family: ABeeZee, ABeeZee;
						font-weight: 400;
						font-size: 13px;
						color: #ffffff;
						font-style: normal;
						text-transform: none;
						> span:nth-child(2) {
							color: #01e1ff;
						}
					}
					> div:not(:nth-child(1)) {
						font-family: ABeeZee, ABeeZee;
						font-weight: 400;
						font-size: 13px;
						color: #8893a1;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
		.not-data {
			top: 40%;
			width: 30%;
			left: 35%;
			position: absolute;
			text-align: center;
			img {
				width: 50%;
			}
			p {
				color: #fff;
				font-size: 14px;
			}
		}
	}
}

::v-deep .h-card .content {
	height: 80%;
}
</style>