bxztApp/packages/screen/src/views/3DSituationalAwarenessRefactor/components/Popups/EmergencyCenterDetail.vue

<template>
  <transition name="popup-fade">
    <div v-if="visible" class="popup-overlay" @click.self="handleClose">
      <div class="center-detail">
        <div class="center-detail__header">
          <div class="header-icon-wrapper">
            <img src="../../assets/images/SketchPng08ea47fd72e32082154366a0cbcd9a701074a835d3bae2eb9237b81b2ae775a6.png" alt="center" class="header-icon" />
            <span class="header-title">应急中心</span>
          </div>
          <button class="close-btn" @click="handleClose">
            <img src="../../assets/images/SketchPng5318515e0c6f2242f4a741937e0c245f050ab76eeb57b8eb0deec58c4bac16e3.png" alt="close" />
          </button>
        </div>

        <div class="center-detail__content">
          <div class="detail-image">
            <img :src="centerData.image || defaultImage" alt="center" class="center-image" />
          </div>

          <div class="detail-fields">
            <div class="field-item">
              <span class="field-label">名称：</span>
              <span class="field-value">{{ centerData.name }}</span>
            </div>
            <div class="field-item">
              <span class="field-label">行政等级：</span>
              <span class="field-value">{{ centerData.adminLevel }}</span>
            </div>
            <div class="field-item">
              <span class="field-label">隶属单位：</span>
              <span class="field-value">{{ centerData.department }}</span>
            </div>
            <div class="field-item">
              <span class="field-label">位置信息：</span>
              <span class="field-value">目前为止距离现场{{ centerData.distance }}公里</span>
            </div>
          </div>

          <div class="detail-actions">
            <img src="../../assets/images/SketchPng0aad7b5790762c78e5bfd5443678b172b21f72db1be7dff3bad33b3d08ff9c52.png" alt="location" class="action-full-icon" />
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import defaultImage from '../../assets/images/SketchPng6522a2277272909c7e227dc0c60eb0981d985f91a9e517c798b873278899058b.png'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  centerData: {
    type: Object,
    default: () => ({
      name: '忠县应急中心',
      adminLevel: '国道',
      department: '交通公路部门',
      distance: 0.6,
      image: null
    })
  }
})

const emit = defineEmits(['close'])

const handleClose = () => {
  emit('close')
}
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;
@use '../../assets/styles/common.scss' as *;

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(vw(5));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.center-detail {
  width: vw(400);
  background: url(../../assets/images/popup-bg.png) no-repeat;
  background-size: 100% 100%;
  border-radius: vw(12);
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: 0 vw(10) vw(30) rgba(0, 0, 0, 0.5);

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: vh(16) vw(20);
    background: rgba(20, 53, 118, 0.8);
    border-bottom: 1px solid var(--border-color);

    .header-icon-wrapper {
      display: flex;
      align-items: center;
      gap: vw(12);

      .header-icon {
        width: vw(24);
        height: vh(24);
      }

      .header-title {
        color: var(--text-white);
        font-size: fs(18);
        font-family: SourceHanSansCN-Bold, sans-serif;
        font-weight: 700;
      }
    }

    .close-btn {
      width: vw(24);
      height: vh(24);
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: transform 0.3s;

      &:hover {
        transform: rotate(90deg);
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  &__content {
    padding: vh(24) vw(20);
    background: rgba(9, 22, 40, 0.95);

    .detail-image {
      width: 100%;
      height: vh(150);
      margin-bottom: vh(20);
      border-radius: vw(8);
      overflow: hidden;

      .center-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .detail-fields {
      display: flex;
      flex-direction: column;
      gap: vh(12);
      margin-bottom: vh(24);

      .field-item {
        display: flex;
        align-items: center;
        padding: vh(10) vw(12);
        background: rgba(20, 53, 118, 0.3);
        border-radius: vw(6);

        .field-label {
          color: var(--text-gray);
          font-size: fs(14);
          font-family: SourceHanSansCN-Regular, sans-serif;
          min-width: vw(100);
        }

        .field-value {
          color: var(--text-white);
          font-size: fs(14);
          font-family: SourceHanSansCN-Medium, sans-serif;
          font-weight: 500;
          flex: 1;
        }
      }
    }

    .detail-actions {
      display: flex;
      justify-content: center;
      padding-top: vh(16);
      border-top: 1px solid var(--border-color);

      .action-full-icon {
        width: vw(200);
        height: vh(40);
        cursor: pointer;
        transition: transform 0.3s;

        &:hover {
          transform: scale(1.05);
        }

        &:active {
          transform: scale(0.98);
        }
      }
    }
  }
}

// 动画效果
.popup-fade-enter-active,
.popup-fade-leave-active {
  transition: opacity 0.3s ease;

  .center-detail {
    transition: transform 0.3s ease;
  }
}

.popup-fade-enter-from,
.popup-fade-leave-to {
  opacity: 0;

  .center-detail {
    transform: scale(0.9);
  }
}
</style>