sl-sfy-safety/src/views/page-config/component/mapContainer/MapContainer.vue

<template>
  <div
    :style="{
      position: 'relative',
      width: `${mapWidth}px`,
      height: `${mapHeight}px`,
      background: `url(${getRealImgUrl()})`,
    }"
  >
    <Transformer v-for="item in showShops" :key="item.id" :shop="item" />
  </div>
</template>

<script setup lang="ts">
  import { storeToRefs } from 'pinia';
  import Transformer from './Transformer.vue';
  import useMapEditor from '../../stores/useMapEditor';
  import { useGlobSetting } from '@/hooks/setting';
  import urlJoin from 'url-join';

  const mapEditor = useMapEditor();
  const { mapWidth, mapHeight, bgImg, showShops } = storeToRefs(mapEditor);

  const globSetting = useGlobSetting();

  const getRealImgUrl = () => urlJoin(globSetting.imgUrl!, bgImg.value);
</script>

<style scoped></style>