feat:地图修改样式

张含笑

2025-06-13 f46302b20191c720c8ff9467fdfcf62f87c24b7b

 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;
         }