zhgdlarge/src/views/commandScreen/commandCenter/leftBottom.vue

<template>
	<div class="leftBottom">
		<div class="header">
			<div class="hLeft">
				安全教育智能分析
			</div>
			<div class="hRight">
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
// ts
type Props = {
	statisticsCount?: any; // 传入人员数据
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	statisticsCount: {
		devcount: {}
	}
});
// 人员概况数据
const statisticsCount = ref({
	devcount: {}
} as any);

watch(
	() => props.statisticsCount,
	newVal => {
		// console.log(newVal, "newVal");
		if (newVal) {
			// props.xData = newVal;
			statisticsCount.value = newVal;
		}
	}
);
</script>

<style lang="scss" scoped>
.leftBottom {
	background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
	// background-color: darkred;
	background-size: 100% 100%;
	.header{
		// width: 100%;
		// height: 100%;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		padding: 20px 20px;
		// border-bottom: 1px solid #0644b7;
		border-bottom: 2px solid #0644b7;
		.hLeft{
			width: 50%;
			color: white;
		}
		.hRight{
			width: 50%;
		}
	}
}
</style>