<template>
	<div>
		<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
			<div style="height: calc(100vh - 189px);position: relative;" class="text-center text-black">
				<div style="position: absolute;left: 0;top: 34%;width: 100%;z-index: 111;">
					<div>组合锅炉燃油温度：<span class="flex-sub text-purple text-bold text-xxl">463.1</span> ℃</div>
				</div>
				<el-image style="height: 100%;" :src="boilerImg"></el-image>
				<div style="position: absolute;left: 0;bottom: 17%;width: 100%;">
					<div class="margin-bottom-sm">锅炉燃油压力：<span class="flex-sub text-purple text-bold text-xxl">121.2</span> Mpa</div>
					<div>组合锅炉蒸汽压力：<span class="flex-sub text-purple text-bold text-xxl">23.01</span> Mpa</div>
				</div>
			</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>