From a7e6761ba0cfccdf33ed552eb2d3b783c8e4ab4a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 16 Apr 2025 20:49:12 +0800
Subject: [PATCH] feat:事件弹窗显示调整
---
src/hooks/components/EventPopUpBox.vue | 226 +++++++++++++++++++++++++++++--------------------------
1 files changed, 119 insertions(+), 107 deletions(-)
diff --git a/src/hooks/components/EventPopUpBox.vue b/src/hooks/components/EventPopUpBox.vue
index dd87e8d..967893d 100644
--- a/src/hooks/components/EventPopUpBox.vue
+++ b/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>
--
Gitblit v1.9.3