energy_storage/web/src/components/Home/Map.vue

<template>
  <div class="map">
    <div>
      <div class="icon1" @click="showModal()"></div>
      <div class="icon"></div>
    </div>
    <div ref="mapContent"></div>
    <a-modal
      class="modal"
      ref="modal"
      v-model:open="showCtrModal"
      :destroy-on-close="true"
      :get-container="() => $refs.mapContent"
      :footer="null"
      :title="testVal.name"
      :mask="true"
    >
      <template #closeIcon>
        <i
          class="iconfont icon-guanbi"
          style="font-size:20px; cursor: pointer; color: #fff; "
        />
      </template>
      <div class="modal-content">
        <div class="home-modal">
          <Modal></Modal>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { getReq, postReq } from '@/request/api'
import Modal from '@/components/Home/Modal.vue'
export default {
  name: 'Map',
  components: { Modal },

  data() {
    return {
      showCtrModal: false,
      testVal: {
        name: '场站211',
        id: '124563'
      }
    }
  },
  mounted() {},
  methods: {
    async showModal(currentVal) {
      console.log(currentVal, 'cccccccccccccccccccccc')
      this.showCtrModal = true
      try {
        const query = {}
        const res = await postReq(query, '')
        if (res.code == 200) {
          this.modalInfo = res.data.records
        } else {
          throw res
        }
      } catch (err) {
        console.log(err, 'eeeeeeeeeeeeeeeerr')
      }
    }
  }
}
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
  .icon1 {
    width: 32px;
    height: 80px;
    background: url('../../assets/home/homeIcon1.png');
    background-size: contain;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .icon {
    width: 32px;
    height: 80px;
    background: url('../../assets/home/homeIcon.png');
    background-size: contain;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  :deep(.ant-modal-root .ant-modal-mask) {
    background-color: #000 !important;
  }
  :deep(.modal.ant-modal) {
    width: 68% !important;
    height: 80% !important;
    min-width: 1200px !important;
    border: none;
    padding: 20px;
    background-image: url('../../assets/home/modal-bg.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    & > div {
      height: 100%;
    }
    .ant-modal-content {
      height: 100%;
      width: 96%;
      margin: auto;
      box-shadow: none;
      background: transparent;
.ant-modal-close{
  position: absolute;
    right: 0;
    top: 3px;
}
      .ant-modal-body {
        height: calc(100% - 45px);
        color: #fff;
        // padding: 10px;
        div > span {
          //   margin-right: 10px;
        }
      }
      .ant-modal-header {
        height: 45px;
        position: absolute;
        top: -45px;
        text-align: center;
        width: 96%;
        background: transparent;
        div {
          font-size: 32px;

          color: #fff;
        }
      }
    }
  }
  .modal-content {
    height: calc(100% - 45px);

    min-height: 700px;
  }
  .home-modal {
    height: 100%;
  }
}
</style>