<template>
	<div>
		<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
			<div class="flex justify-center text-black" style="height: calc(100vh - 157px);">
				<el-image style="height: 100%;" :src="boilerImg"></el-image>
				<el-card style="margin-top: 7%;max-height: 180px;">
					<template #header>
						<span class="text-bold text-bGray">锅炉</span>
					</template>
					<div class="text-sm text-bGray">
						<div>锅炉燃油温度：<span class="text-purple text-bold text-xxl margin-left">463.1</span> ℃</div>
						<div class="margin-tb-sm">锅炉燃油压力：<span class="text-purple text-bold text-xxl margin-left">121.2</span> Mpa</div>
						<div>锅炉蒸汽压力：<span class="text-purple text-bold text-xxl margin-left">23.01</span> Mpa</div>
					</div>
				</el-card>
			</div>
			<!-- <div class="titleSty text-xl text-center">锅炉结构图</div> -->
		</el-card>
	</div>
</template>

<script setup>
	import { reactive } from "vue";
	import boilerImg from "@/assets/images/boiler.png";
	const { proxy } = getCurrentInstance();
	const data = reactive({
		
	});
	const {  } = toRefs(data);
</script>


<style scoped lang="scss">
	.box-card{
		border-radius: 16px;
		box-shadow: 0 0 4px 1px #ccc;
	}
</style>