<template>
	<div>
		<div class="headtop mb10">
			<div class="headtoplef">
				<div class="headtoplefbtn" :class="props.states == 4 ? 'greencolor' : 'redcolor'">
					<span v-if="props.states == 1">Ⅰ&nbsp;级</span>
					<span v-if="props.states == 2">Ⅱ&nbsp;级</span>
					<span v-if="props.states == 3">Ⅲ&nbsp;级</span>
					<span v-if="props.states == 4">正&nbsp;常</span>
				</div>
				<div class="headtopleftxt">预警监测</div>
			</div>
			<div class="headtoprig">
				<div v-if="props.states == 3">
					<div class="coutexttitle">房地产市场风险事件应急响应(III级)</div>
					<div class="coutextitem">（1）房地产调控联席会议应当转为房地产风险应急联席会议，对风险事件进行研判，查找原因，明确责任，立足自身化解风险；</div>
					<div class="coutextitem">（2）市政府将房地产市场风险事件应急处置情况向潍坊市政府报备。</div>
				</div>
				<div v-if="props.states == 2">
					<div class="coutexttitle">房地产市场风险事件应急响应(II级)</div>
					<div class="coutextitem">（1）房地产调控联席会议应当转为房地产风险应急联席会议，对风险事件进行研判，查找原因，明确责任，立足自身化解风险；</div>
					<div class="coutextitem">（2）市政府将房地产市场风险事件应急处置情况向潍坊市政府报备。</div>
					<div class="coutextitem">（3）房地产风险应急联席会议将风险情况和应急处置方案专题向潍坊市房地产风险应急联席会议报告；</div>
					<div class="coutextitem">（4）市政府将房地产市场风险事件应急处置进展情况和处置结果上报省政府报备，并抄送省住建厅。</div>
				</div>
				<div v-if="props.states == 1">
					<div class="coutexttitle">房地产市场风险事件应急响应(I级)</div>
					<div class="coutextitem">（1）房地产调控联席会议应当转为房地产风险应急联席会议，对风险事件进行研判，查找原因，明确责任，立足自身化解风险；</div>
					<div class="coutextitem">（2）市政府将房地产市场风险事件应急处置情况向潍坊市政府报备。</div>
					<div class="coutextitem">（3）房地产风险应急联席会议将风险情况和应急处置方案专题向潍坊市房地产风险应急联席会议报告；</div>
					<div class="coutextitem">（4）市政府将房地产市场风险事件应急处置进展情况和处置结果上报省政府报备，并抄送省住建厅。</div>
					<div class="coutextitem">（5）请求潍坊市房地产风险应急联席会议给予政策指导，必要时成立工作组进驻我市给予指导和支持；</div>
					<div class="coutextitem">（6）对化解房地产市场风险需向国家、省级层面制定政策措施的，及时向国家、省有关部门请求支持。</div>
				</div>

			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive, defineProps } from "vue";

const props = defineProps({
	states: {
		type: String,
		default: "",
	},
});
</script>
<style lang="scss" scoped>
@keyframes breath {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.05);
	}
}

.headtop {
	padding: 20px;
	background-color: #ecf2fe;
	display: flex;
	align-items: center;

	.headtoprig {
		padding-left: 20px;

		.coutexttitle {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 10px;
			padding-left: 10px;
			border-left: 3px solid #3156fe;
		}

		.coutextitem {
			font-size: 15px;
			padding-bottom: 6px;
		}
	}

	.headtoplef {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 100px;

		.headtopleftxt {
			font-size: 20px;
			font-weight: bold;
			padding-top: 20px;
		}

		.greencolor {
			background-color: #22bd9d;
			box-shadow: #22bd9d 0 0 10px;
		}

		.redcolor {
			background-color: #ff5757;
			box-shadow: #ff5757 0 0 10px;
		}

		.headtoplefbtn {
			width: 200px;
			height: 60px;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30px;
			color: #fff;
			animation: breath 1s ease-in-out infinite alternate;

		}
	}
}
</style>