dtScreen/src/components/ui/AlarmPopup.vue

<template>
  <div class="map-alarm-popup">
    <div class="popup-header">
      <div class="status-icon warning">
        <i class="el-icon-warning-outline"></i>
      </div>
      <span class="title-text">{{ title }}</span>
    </div>

    <div class="popup-content">
      <div class="info-row">
        <span class="label">路口：</span>
        <span class="value">{{ intersection }}</span>
      </div>
      <div class="info-row">
        <span class="label">发生时间：</span>
        <span class="value">{{ time }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AlarmPopup',
  props: {
    title: {
      type: String,
      default: '降级黄闪'
    },
    intersection: {
      type: String,
      default: '北京路与南京路'
    },
    time: {
      type: String,
      default: '2026.1.23.12:00'
    },
    // 可选：用于控制不同状态的颜色 (warning:黄, error:红, normal:绿)
    type: {
      type: String,
      default: 'warning'
    }
  }
};
</script>

<style scoped>
/* ================= 整体卡片样式 ================= */
.map-alarm-popup {
  width: max-content; /* 宽度根据内容自适应 */
  min-width: 240px;
  /* 完美的暗黑透明背景 + 毛玻璃，高度还原图片 */
  background: rgba(15, 20, 35, 0.85); 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1); /* 极细边缘光 */
  border-radius: 8px; /* 圆角 */
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  pointer-events: auto; /* 允许鼠标点击交互 */
}

/* ================= 头部标题区 ================= */
.popup-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

/* 状态图标容器 */
.status-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px;
  color: #fff;
  font-size: 14px;
}

/* 警告状态（黄色） */
.status-icon.warning {
  background-color: #e6a23c; 
  box-shadow: 0 0 8px rgba(230, 162, 60, 0.6);
}

/* 异常状态（红色，预留） */
.status-icon.error {
  background-color: #f56c6c;
  box-shadow: 0 0 8px rgba(245, 108, 108, 0.6);
}

.title-text {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 1px;
}

/* ================= 内容信息区 ================= */
.popup-content {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 行间距 */
}

.info-row {
  font-size: 14px;
  display: flex;
  align-items: center;
  white-space: nowrap; /* 防止文字换行 */
}

.label {
  color: #a0a5b0; /* 标签文字用灰白色区分层级 */
}

.value {
  color: #ffffff; /* 核心数据纯白高亮 */
}
</style>