feat:事件弹窗显示调整

shuishen

2025-04-16 a7e6761ba0cfccdf33ed552eb2d3b783c8e4ab4a

feat:事件弹窗显示调整

 src/hooks/components/EventPopUpBox.vue

@@ -1,130 +1,142 @@
<template>
  <div class="mapPopUpBox">
    <div class="title">
      {{ info.event_name }}
      <el-icon class="header-close" @click="props.removeLabel">
        <Close />
      </el-icon>
    </div>
    <div class="content">
      <div class="medium">
        <img v-if="info.media_type === 'PHOTO_TYPE'" class="eventImage" :src="info.url" alt="Event Image" />
        <video v-else :src="info.url" autoplay muted playsinline preload="metadata" />
      </div>
    <div class="mapPopUpBox">
        <div class="title">
            <span>{{ info.event_name }}</span>

      <div class="details">
        <div class="label">位置：</div>
        <div class="value point">{{ _.round(info.longitude, 3) }}，{{ _.round(info.latitude, 3) }}</div>
        <div class="label">时间：</div>
        <div class="value">{{ info.create_time }}</div>
      </div>
    </div>
  </div>
            <el-icon class="header-close" @click="props.removeLabel">
                <Close />
            </el-icon>
        </div>
        <div class="content">
            <div class="medium">
                <el-image
                    v-if="info.media_type === 'PHOTO_TYPE'"
                    class="eventImage"
                    :src="info.url"
                    fit="cover"
                    :preview-src-list="[info.url]"
                    preview-teleported
                />

                <video v-else :src="info.url" autoplay muted playsinline preload="metadata" />
            </div>

            <div class="details">
                <div class="label">位置：</div>
                <div class="value point">{{ _.round(info.longitude, 3) }}，{{ _.round(info.latitude, 3) }}</div>
                <div class="label">时间：</div>
                <div class="value">{{ info.create_time }}</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ElImage } from 'element-plus'
// src="@/assets/images/home/useEventOperate/eventErr.png"
import { Close } from '@element-plus/icons-vue';
import { getEventDetails } from '@/api/home/aggregation';
import _ from 'lodash';
import { Close } from '@element-plus/icons-vue'
import { getEventDetails } from '@/api/home/aggregation'
import _ from 'lodash'

const props = defineProps(['data', 'removeLabel']);
const loading = ref(true);
const props = defineProps(['data', 'removeLabel'])
const loading = ref(true)

const info = ref({
  event_name: '',
  status: 1,
  url: '1',
  longitude: '',
  latitude: '',
  create_time: '04/01 12:41',
  media_type: 'PHOTO_TYPE',
});
    event_name: '',
    status: 1,
    url: '1',
    longitude: '',
    latitude: '',
    create_time: '04/01 12:41',
    media_type: 'PHOTO_TYPE',
})
onMounted(async () => {
  loading.value = true;
  const res = await getEventDetails({ id: props.data.eventId });
  info.value = res.data.data;
  loading.value = false;
});
    loading.value = true
    const res = await getEventDetails({ id: props.data.eventId })
    info.value = res.data.data

    info.value.url = import.meta.env.VITE_APP_AIRLINE_URL + info.value.url
    loading.value = false
})
</script>

<style scoped lang="scss">
.mapPopUpBox {
  width: 271px;
  height: 173px;
  background: url('@/assets/images/home/useEventOperate/popUpBox.png') no-repeat center / 100% 100%;
  padding: 13px 15px;
  pointer-events: all;
    width: 271px;
    height: 173px;
    background: url('@/assets/images/home/useEventOperate/popUpBox.png') no-repeat center / 100% 100%;
    padding: 13px 15px;
    pointer-events: all;

  .title {
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 16px;
    background: linear-gradient(180deg, #a8e5fb 0%, #e6f8ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 16px;
        background: linear-gradient(180deg, #a8e5fb 0%, #e6f8ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-background-clip: text;
        -moz-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

    .header-close {
      width: 20px;
      height: 100%;
      line-height: 100%;
      display: flex;
      align-items: center;
      color: #9cd5ff;
      pointer-events: all;
      cursor: pointer;
    }
  }
        .header-close {
            width: 20px;
            height: 100%;
            line-height: 100%;
            display: flex;
            align-items: center;
            color: #9cd5ff;
            pointer-events: all;
            cursor: pointer;
        }
    }

  .content {
    height: 102px;
    width: 240px;
    display: flex;
    align-items: center;
    .content {
        height: 102px;
        width: 240px;
        display: flex;
        align-items: center;

    .medium {
      height: 102px;
      width: 120px;
      margin-right: 10px;
        .medium {
            height: 102px;
            width: 120px;
            margin-right: 10px;

      > img,
      video {
        width: 100%;
        height: 100%;
      }
    }
            > img,
            video {
                width: 100%;
                height: 100%;
            }
        }

    .details {
      .label {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #7babd7;
        line-height: 16px;
        margin-bottom: 2px;
      }
        .details {
            .label {
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                font-size: 14px;
                color: #7babd7;
                line-height: 16px;
                margin-bottom: 2px;
            }

      .value {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #d8edff;
        line-height: 16px;
        margin-bottom: 2px;
      }
            .value {
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                font-size: 14px;
                color: #d8edff;
                line-height: 16px;
                margin-bottom: 2px;
            }

      .point {
        margin-bottom: 14px;
      }
    }
  }
            .point {
                margin-bottom: 14px;
            }
        }
    }
}
</style>