<template>
	<div class="safe-education">
		<div class="top">
			<div class="topLeft itembox">
				<div class="title-speed">建材生产与运输阶段碳排放</div>
				<div class="title-con">
					<TopLeft />
				</div>
			</div>
			<div class="topCenter itembox">
				<div class="title-speed">低碳技术应用碳减量</div>
				<div class="title-con">
					<TopCenter />
				</div>
			</div>
			<div class="topRight itembox">
				<div class="title-speed">施工阶段碳排放</div>
				<div class="title-con">
					<TopRight />
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="bottomLeft itembox">
				<div class="title-speed">原始数据动态监测</div>
				<div class="title-con">
					<BottomLeft />
				</div>
			</div>
			<div class="bottomRight itembox">
				<div class="title-speed">项目总体碳排放</div>
				<div class="title-con">
					<BottomRight />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import TopLeft from "./components/TopLeft.vue";
import TopCenter from "./components/TopCenter.vue";
import TopRight from "./components/TopRight.vue";
import BottomLeft from "./components/BottomLeft.vue";
import BottomRight from "./components/BottomRight.vue";
</script>

<style lang="scss" scoped>
.safe-education {
	width: 100%;
	height: 100%;

	.itembox {
		display: flex;
		flex-direction: column;

		.title-speed {
			height: 40px;
			line-height: 40px;
			padding-left: 35px;
			background: url("@/assets/images/titleBig.webp") no-repeat;
			background-size: 100% 100%;
			// margin-left: 50px;
			font-family: OPPOSansH;
			font-weight: 400;
			color: #ffffff;
			margin-bottom: 5px;
			font-size: 16px;
		}

		.title-con {
			width: 100%;
			flex: 1;
			background: url("@/assets/images/cardImg.png") no-repeat;
			background-size: 100% 100%;
			// background: skyblue;
		}
	}

	.top {
		width: 100%;
		height: 52%;
		display: flex;
		.topLeft {
			width: 33.5%;
			// background: skyblue;
			// background-color: orchid;
		}
		.topCenter {
			margin: 0% 1%;
			width: 33%;
		}
		.topRight {
			width: 33%;
		}
	}
	.bottom {
		width: 100%;
		height: 46%;
		margin-top: 1%;
		margin-bottom: 1%;
		display: flex;
		.bottomLeft {
			width: 49%;
			margin-right: 1%;
			:deep(.h-card) {
				.content {
					margin-top: 2% !important;
				}
			}
		}
		.bottomRight {
			width: 50%;
			:deep(.h-card) {
				.content {
					margin-top: 1% !important;
				}
			}
		}
	}
}
</style>
