From f46302b20191c720c8ff9467fdfcf62f87c24b7b Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 13 Jun 2025 15:56:59 +0800
Subject: [PATCH] feat:地图修改样式
---
src/hooks/components/EventPopUpBox.vue | 47 ++++++++++++++++++++++++-----------------------
1 files changed, 24 insertions(+), 23 deletions(-)
diff --git a/src/hooks/components/EventPopUpBox.vue b/src/hooks/components/EventPopUpBox.vue
index 36953d4..1ebcc68 100644
--- a/src/hooks/components/EventPopUpBox.vue
+++ b/src/hooks/components/EventPopUpBox.vue
@@ -1,8 +1,8 @@
<template>
<div class="mapPopUpBox">
<div class="title">
- <span>222</span>
-
+ <span>{{ info.event_name }}</span>
+<el-icon class="header-close" @click.stop="props.detailClick"><Warning /></el-icon>
<el-icon class="header-close" @click.stop="props.removeLabel">
<Close />
</el-icon>
@@ -11,8 +11,8 @@
<div class="medium">
<el-image
class="eventImage"
- :src="infoList?.smallUrl"
- :preview-src-list="[infoList?.smallUrl]"
+ :src="getSmallImg(infoList?.link)"
+ :preview-src-list="[getSmallImg(infoList?.link)]"
fit="cover"
preview-teleported
></el-image>
@@ -21,11 +21,16 @@
<div class="details">
<div class="label">时间：</div>
<div class="value point">
- 11
+ {{
+ infoList?.create_time?.slice(5, 16).replace('-', '/') ||
+ infoList?.createTime?.slice(5, 16).replace('-', '/')
+ }}
</div>
<div class="label">地点：</div>
<div class="value">
- 22
+ {{ _.round(infoList?.metadata?.shootPosition?.lng, 3) }}，{{
+ _.round(infoList?.metadata?.shootPosition?.lat, 3)
+ }}
</div>
</div>
</div>
@@ -33,12 +38,10 @@
</template>
<script setup>
import { ElImage, ElIcon } from 'element-plus'
-import { Close } from '@element-plus/icons-vue'
-// import { getEventDetails } from '@/api/home/aggregation'
+import { Close,Warning } from '@element-plus/icons-vue'
import _ from 'lodash'
-import { getSmallImg } from '@/utils/util'
-
-const props = defineProps(['data', 'removeLabel'])
+import { getShowImg, getSmallImg } from '@/utils/util';
+const props = defineProps(['data', 'removeLabel','detailClick'])
const loading = ref(true)
const info = ref({
@@ -50,20 +53,18 @@
create_time: '04/01 12:41',
})
const infoList = props.data
-
onMounted(async () => {})
-
-const disposeUrl = ({ url }) => {
- return getSmallImg(url)
-}
</script>
<style scoped lang="scss">
.mapPopUpBox {
width: 271px;
- height: 173px;
- background: url('@/assets/images/dataCenter/datamap/popUpBox.png') no-repeat center / 100% 100%;
- padding: 13px 15px;
+ height: 153px;
+ // background: url('@/assets/images/dataCenter/datamap/popUpBox.png') no-repeat center / 100% 100%;
+ border-radius: 20px;
+ background-color: #fff;
+
+ padding: 13px 13px 1px 13px;
pointer-events: all;
.title {
@@ -81,7 +82,7 @@
margin-bottom: 10px;
display: flex;
align-items: center;
- justify-content: space-between;
+ justify-content: end;
.header-close {
width: 20px;
@@ -89,7 +90,7 @@
line-height: 100%;
display: flex;
align-items: center;
- color: #9cd5ff;
+ color: black;
pointer-events: all;
cursor: pointer;
}
@@ -119,7 +120,7 @@
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
- color: #7babd7;
+ color: black;
line-height: 16px;
margin-bottom: 2px;
}
@@ -128,7 +129,7 @@
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
- color: #d8edff;
+ color: black;
line-height: 16px;
margin-bottom: 2px;
}
--
Gitblit v1.9.3