内容修改

longyvfengyun

2023-07-06 a3c6e3a5177b15021dad5788688294b1d863717a

 src/components/MapPin.vue

@@ -1,5 +1,5 @@
<script setup>
import {computed, onMounted} from "vue";
import {computed} from "vue";

   const props = defineProps({
      visible: {
@@ -38,6 +38,7 @@
         type: Object,
         default() {
            return {
            num: 99,
               tmp: 0,
               hum: 0,
               diff: 0
@@ -46,16 +47,24 @@
      }
   });

const emits = defineEmits(["click"]);

const handleClick = ()=>{
   emits('click', props.info);
}

   const posStyle = computed(()=>{
      return {
         left: props.x*props.cWidth/props.dWidth+'px',
         top: props.y*props.cHeight/props.dHeight+'px'
      }
   });

</script>

<template>
   <div class="map-pin" :style="posStyle">
      <div class="map-pin-wrapper">
      <el-tooltip placement="top" :visible="visible">
         <template #content>
            <div class="home-info name">{{name}}</div>
@@ -63,20 +72,24 @@
            <div class="home-info">湿度：{{ info.hum }} %RH</div>
            <div class="home-info">压差：{{ info.diff }} Pa</div>
         </template>
         <div class="map-pin-content">
            <div class="map-pin-content" @click="handleClick">
               <div class="pin"></div>
               <div class="pulse"></div>
         </div>
      </el-tooltip>
   </div>
   </div>
</template>

<style lang="less" scoped>
@size: 24px;
.map-pin-wrapper {
   position: relative;
   z-index: 0;
}
.map-pin {
   position: absolute;
   cursor: pointer;
   z-index: 1;
   .map-pin-content {
      position: relative;
      top: -@size - @size*0.1;