<template>
  <!-- 预警回顾 -->
  <div class="WarningReview">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">预警回顾</div>
    </div>
  </div>
  <!-- 监测告警 -->
  <div class="MonitoringAlarms">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">监测告警</div>
    </div>
  </div>
  <!-- 警情动态 -->
  <div class="PoliceSituation">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">警情动态</div>
    </div>
  </div>
</template>
<script setup name="ZHPS">
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
</script>

<style lang="scss" scoped>
.WarningReview {
  width: 450px;
  height: 33%;
  //   background: rgb(204, 184, 184);
}
.MonitoringAlarms {
  width: 450px;
  height: 32%;
  //   background: rgb(204, 184, 184);
}
.PoliceSituation {
  width: 450px;
  height: 32%;
  //   background: rgb(204, 184, 184);
}
.ListBoxHeader {
  height: 44px;
  line-height: 50px;
  width: 98%;
  background: url('@/assets/newImgs/partBg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 7px 0px 0px 8px;
  .ListBoxHeader_font {
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-size: 23px;
    color: #ebfeff;
    padding-left: 34px;
  }
}
</style>