<template>
  <div class="msg-box-container">
    <div class="msg-txt">时间：2025-01-04</div>
    <div class="msg-txt">告警来源：贵安新区2区</div>
    <div class="msg-txt">描述：火灾隐患</div>
    <div class="msg-txt msg-state">
      <span>
        <span>处置状态：</span>
        <span class="msg-txt-yellow">未处理</span>
      </span>
      <span class="to-see">查看详情{{ '>>' }}</span>
    </div>
    <!-- 背景图 -->
    <img class="map-msg-back-img" :src="getImgUrl('preview/map-msg-back.png')" alt="">
    <el-icon class="map-msg-close-icon">
      <Close />
    </el-icon>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import { getImgUrl } from "@/utils/tools.js"



</script>

<style lang="scss" scoped>
.msg-box-container {
  position: absolute;
  left: 50%;
  top: 20%;
  width: 263px;
  height: 128px;
  padding-top: 15px;
  padding-left: 33px;

  .msg-txt {
    width: 210px;
    height: 19px;
    padding-left: 10px;
    line-height: 20px;
  }

  .msg-txt+.msg-txt {
    margin-top: 7px;
  }

  .msg-state {
    display: flex;
    justify-content: space-between;

    .msg-txt-yellow {
      color: #F4C200;
    }

    .to-see {
      color: #F4C200;
    }
  }

  .map-msg-back-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .map-msg-close-icon {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 1;
    color: #F4C200;
    font-size: 9px;
    cursor: pointer;
    &:hover {
      transition: scalce(1.5);
      color: red;
    }
  }
}
</style>
