JT-CIM-ZHNY/src/views/Table/components/spdgc.vue

<script setup>

</script>

<template>
	<el-row> <el-col :span="13">
			<div class="main">
				<div class="shape">
					<span style="font-size: 20rem;font-weight: 300;color: rgb(200, 250, 255);">变电设施&nbsp;&nbsp;</span>
					<span style="font-size: 28rem;font-weight: 400;color: rgb(200, 250, 255);;">26</span>
					<span style="font-weight: 300;color: rgb(200, 250, 255);">套</span>
					<div class="shape2">
						<span style="font-size: 20rem;font-weight: 300;color: rgb(200, 250, 255);">配电设施&nbsp;&nbsp;</span>
						<span style="font-size: 28rem;font-weight: 400;color: rgb(200, 250, 255);">37</span>
						<span style="font-weight: 300;color: rgb(200, 250, 255);">套</span>
					</div>
					<div class="shape3">
						<span style="font-size: 20rem;margin-left: 6rem;font-weight: 300;color: rgb(200, 250, 255);">高压线路&nbsp;&nbsp;</span>
						<span style="font-size: 28rem;font-weight: 400;color: rgb(200, 250, 255);">73</span>
						<span style="font-weight: 300;color: rgb(200, 250, 255);">km</span>
					</div>
					<div class="shape4">
						<span style="font-size: 20rem;margin-left: 18rem;font-weight: 300;color: rgb(200, 250, 255);">低压线路&nbsp;&nbsp;</span>
						<span style="font-size: 28rem;font-weight: 400;color: rgb(200, 250, 255);">120</span>
						<span style="font-weight: 300;color: rgb(200, 250, 255);">km</span>
					</div>
				</div>
			</div>
		</el-col> <el-col :span="11">
		    <el-row><el-col :span='24' style="margin-top: 38rem;font-size: 25rem;font-weight: 400;color: rgb(200, 250, 255);">100%</el-col></el-row>
			<el-row><el-col :span='24' style="margin-top: -26rem;"><img src="@/assets/images/tongda.png"/></el-col></el-row>
			<el-row><el-col :span='24' style="margin-top: -13rem;font-size: 20rem;font-weight: 300;color: rgb(200, 250, 255);">井灌区配电率</el-col></el-row>
		</el-col> </el-row>
	
</template>

<script>
	let jt3d = undefined;
	export default {
		data() {
			return {
				// viewersName: '', //视角标签名称
				// ImgurlList: [], //截图地址列表
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 97%;
		display: flex;
		flex: 2;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		// color: rgba(29,191,205,1);
		margin-left: 10rem;
		margin-top: 25rem;

		.shape {
			margin-top: -10rem;

			.shape2 {
				margin-top: 10rem;
			}

			.shape3 {
				margin-top: 10rem;
			}

			.shape4 {
				margin-top: 10rem;
			}
		}
	}
</style>