yjhtgl-web/src/views/globalMap/RightMenu/Dialog.vue

<template>
  <div v-if="modelValue" class="dialog-wrap">
    <div class="dialog">
      <div class="dialog-header">
        <div class="gradient-text dialog-title">{{ title }}</div>
        <div class="icon-close" @click="closeDialog"></div>
      </div>
      <div class="dialog-content">
        <slot />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  modelValue: boolean;
  title?: string;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false
});
const emit = defineEmits(['update:modelValue', 'close']);

// 关闭弹窗
const closeDialog = () => {
  emit('update:modelValue', false);
  emit('close');
};
</script>

<style lang="scss" scoped>
.dialog-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  .dialog {
    width: 3399px;
    height: 1262px;
    margin: 0 auto;
    background: url('@/assets/images/map/rightMenu/dialog.png') no-repeat;
    color: #ffffff;
    padding-left: 70px;
    padding-right: 36px;
  }
  .dialog-header {
    width: 100%;
    height: 165px;
    position: relative;
    display: flex;
    align-items: center;
    position: relative;
    .dialog-title {
      font-size: 84px;
    }
    .icon-close {
      cursor: pointer;
      position: absolute;
      top: 0px;
      right: -33px;
      width: 64px;
      height: 60px;
      background: url('@/assets/images/map/rightMenu/close.png');
    }
  }
  .dialog-content {
    height: 1082px;
    overflow-y: auto;
    padding: 10px 0;
  }
}
</style>