<template>
	<div class="centerTopContainer">
		<div class="topTitle">{{title}}统计</div>
		<div class="topPlate">
			<light-plate :lightNum="lightNum" />
		</div>
	</div>
</template>

<script>
	import LightPlate from '@/components/lightPlate'
	export default {
		components: {
			LightPlate,
		},
		props: {
			viewData: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		watch: {
			viewData: {
				handler(val) {
					this.title = val.name;
					console.log(val);
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				title: '',
				lightNum:263563,
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import '../../../assets/scss/index.scss';

	.centerTopContainer {
		width: 100%;
		text-align: center;

		.topTitle {
			font-size: 20px;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: rgba(255, 255, 255, 0.8);
			text-shadow: 0px 2px 7px 0px #0d65cd;
		}

		.topPlate {
			width: 73%;
			height: 69px;
			margin: 0 auto;
		}
	}
</style>
