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

<template>
  <transition name="popup-fade">
    <div v-if="visible" class="popup-overlay" @click.self="handleClose">
      <div class="personnel-detail">
        <div class="personnel-detail__header">
          <div class="header-icon-wrapper">
            <img src="../../assets/images/SketchPng08ea47fd72e32082154366a0cbcd9a701074a835d3bae2eb9237b81b2ae775a6.png" alt="personnel" 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="personnel-detail__content">
          <div class="detail-avatar">
            <img :src="personnelData.avatar || defaultAvatar" alt="avatar" class="avatar-image" />
          </div>

          <div class="detail-fields">
            <div class="field-item">
              <span class="field-label">姓名：</span>
              <span class="field-value">{{ personnelData.name }}</span>
            </div>
            <div class="field-item">
              <span class="field-label">部门：</span>
              <span class="field-value">{{ personnelData.department }}</span>
            </div>
            <div class="field-item">
              <span class="field-label">位置信息：</span>
              <span class="field-value">目前为止距离现场{{ personnelData.distance }}公里</span>
            </div>
            <div class="field-item">
              <span class="field-label">预计到达时间:</span>
              <span class="field-value">{{ personnelData.estimatedArrival }}分钟</span>
            </div>
          </div>

          <div class="detail-actions">
            <img src="../../assets/images/SketchPngaafb813d12b883ad9eb332715e44be92cde1b8fd644dfb243cc9d231bd9a5919.png" alt="phone" class="action-icon" />
            <img src="../../assets/images/SketchPnge75df04e5c9d375a034adab0d7f91794e060f3087e924befadf4f77cb037c696.png" alt="video" class="action-icon" />
            <ActionButton text="联动" type="primary" size="small" @click="handleLink" />
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { ref } from 'vue'
import ActionButton from '../shared/ActionButton.vue'
import defaultAvatar from '../../assets/images/SketchPng6522a2277272909c7e227dc0c60eb0981d985f91a9e517c798b873278899058b.png'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  personnelData: {
    type: Object,
    default: () => ({
      name: '张强',
      department: '安全生产部',
      distance: 0.6,
      estimatedArrival: 10,
      avatar: null
    })
  }
})

const emit = defineEmits(['close', 'link'])

const handleClose = () => {
  emit('close')
}

const handleLink = () => {
  emit('link', props.personnelData)
}
</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;
}

.personnel-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-avatar {
      display: flex;
      justify-content: center;
      margin-bottom: vh(20);

      .avatar-image {
        width: vw(80);
        height: vh(80);
        border-radius: 50%;
        border: vw(3) solid var(--primary-color);
        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;
      align-items: center;
      gap: vw(16);
      padding-top: vh(16);
      border-top: 1px solid var(--border-color);

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

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

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

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

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

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

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