minnan-website/components/parts/ContentDialog.vue

<template>
  <!-- 带一个关闭按钮的弹窗 -->
  <SimplePopup
    ref="popupContent"
    @change="(show: boolean) => emit('update:show', show)"
  >
    <img 
      :src="CloseMini"
      class="content-dialog-close"
      @click="() => emit('update:show', false)"
    />
    <div :class="[
      'd-flex',
      'flex-col',
      'content-dialog',
      small ? 'small' : '',
      light ? 'light' : '',
    ]">
      <slot />
    </div>
  </SimplePopup>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import CloseMini from '@/assets/images/CloseMini.png';
import SimplePopup from '../display/SimplePopup.vue';


const props = defineProps({	
  show : {
    type: Boolean,
    default: false,
  },
  small : {
    type: Boolean,
    default: false,
  },
  light : {
    type: Boolean,
    default: false, 
  }
})

const emit = defineEmits([	
  "update:show"	
])

const popupContent = ref()

watch(() => props.show, (v) => {
  if(v) {
    popupContent.value.open()
  } else {
    popupContent.value.close()
  }
})
</script>

<style lang="scss">
@use '@/assets/scss/colors.scss' as *;
@use '@/assets/scss/scroll.scss' as *;

.content-dialog {
  width: 85vw;
  height: 80vh;
  overflow: hidden; 
  border-radius: 10px;
  background-color: $box-color;
  border: 1px solid $border-split-color;
  padding: 25px 33px;
  pointer-events: all;
  overflow-y: scroll;

  @include pc-fix-scrollbar();

  &.small {
    width: 45vw;
  }
}
.content-dialog-close {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 40px;
  height: 40px;
  pointer-events: all;
  cursor: pointer;
}

@media (max-width: 540px) {
  
  .content-dialog-close {
    right: -6px;
    top: -40px;
  }
  .content-dialog {
    width: 97vw;

    &.small {
      width: 97vw; 
    }
  }
}
</style>