经开分局优化

linwe

2025-11-28 bc84029a7e70dcff40e393a9c09b434592d4b1dc

 src/components/map/components/mapSearchPopup.vue

@@ -9,94 +9,107 @@
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div>
        <div v-if="mapSearchPopup" class="popup-dom" id="mapSearchPopup">
            <div style="transform: translate(-50%, 0);">
                <!-- 样式自己修改 -->
                <div class="content" :class="{ 'scale-dom': scaleDomFlag }">
                    {{ mapSearchPopupData.name }}
                </div>
                <div class="bottom-arrow"></div>
            </div>
  <div>
    <div v-if="mapSearchPopup" class="popup-dom" id="mapSearchPopup">
      <div style="transform: translate(-50%, 0);">
        <!-- 样式自己修改 -->
        <div class="content" :class="{ 'scale-dom': scaleDomFlag }">
          <div class="url-code" v-if="mapSearchPopupData.showImg">
            <el-image style="width: 100px; height: 100px" :src="mapSearchPopupData.url"
              :preview-src-list="[mapSearchPopupData.url]">
            </el-image>
          </div>
          {{ mapSearchPopupData.name }}
        </div>
        <div class="bottom-arrow"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'mapSearchPopup',
  name: 'mapSearchPopup',

    inject: ["getWidth", 'userInfo'],
  inject: ["getWidth", 'userInfo'],

    data () {
        return {
            scaleDomFlag: false
        }
    },

    computed: {
        ...mapGetters([
            'mapSearchPopup',
            'mapSearchPopupData'
        ])
    },

    mounted () {
        if (this.getWidth() > 7000) {
            this.scaleDomFlag = true
        } else {
            this.scaleDomFlag = false
        }

    },

    methods: {

  data () {
    return {
      scaleDomFlag: false
    }
  },

  computed: {
    ...mapGetters([
      'mapSearchPopup',
      'mapSearchPopupData'
    ])
  },

  mounted () {
    if (this.getWidth() > 7000) {
      this.scaleDomFlag = true
    } else {
      this.scaleDomFlag = false
    }

  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
.popup-dom {
    position: fixed;
    top: -16px;
    left: 0;
    z-index: 1 !important;
  position: fixed;
  top: -16px;
  left: 0;
  z-index: 1 !important;

    &>.popup-box {
        position: relative;
  &>.popup-box {
    position: relative;
  }

  .bottom-arrow {
    position: absolute;
    left: 50%;
    bottom: 0px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: $bg-color;
    transform: translate(-50%, 100%);
  }

  .scale-dom {
    transform: scale(3);
    transform-origin: left;
  }

  .content {
    padding: 0.5vh;
    width: 220px;
    background: $bg-color;
    border-radius: 4px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .url-code {
      ::v-deep(img) {
        width: 64px;
        height: 64px;
        vertical-align: middle;
      }
    }

    .bottom-arrow {
        position: absolute;
        left: 50%;
        bottom: 0px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: $bg-color;
        transform: translate(-50%, 100%);
    }

    .scale-dom {
        transform: scale(3);
        transform-origin: left;
    }

    .content {
        padding: 0.5vh;
        width: 220px;
        background: $bg-color;
        border-radius: 4px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;


    }
  }

}
</style>