JT-CIM/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: 600;">变电设施&nbsp;&nbsp;</span>
					<span style="font-size: 28rem;font-weight: 700;color: rgba(29,191,205,1);">26</span>
					<span style="font-weight: 600;">套</span>
					<div class="shape2">
						<span style="font-size: 20rem;font-weight: 600;">配电设施&nbsp;&nbsp;</span>
						<span style="font-size: 28rem;font-weight: 700;color: rgba(29,191,205,1);">37</span>
						<span style="font-weight: 600;">套</span>
					</div>
					<div class="shape3">
						<span style="font-size: 20rem;margin-left: 6rem;font-weight: 600;">高压线路&nbsp;&nbsp;</span>
						<span style="font-size: 28rem;font-weight: 700;color: rgba(29,191,205,1);">73</span>
						<span style="font-weight: 600;">km</span>
					</div>
					<div class="shape4">
						<span style="font-size: 20rem;margin-left: 18rem;font-weight: 600;">低压线路&nbsp;&nbsp;</span>
						<span style="font-size: 28rem;font-weight: 700;color: rgba(29,191,205,1);">120</span>
						<span style="font-weight: 600;">km</span>
					</div>
				</div>
			</div>
		</el-col> <el-col :span="11">
			<div style="margin-top: 60rem;"><img src="@/assets/images/jgqpdl.png"/></div>
			<div style="font-size: 19rem;font-weight: 600;margin-top: 5rem;">井灌区配电率</div>
		</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: 6rem;

			.shape2 {
				margin-top: 10rem;
			}

			.shape3 {
				margin-top: 10rem;
			}

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