wenhua818/src/components/PopUp.vue

<template>
  <div v-if="show" class="overlay" @click="onClose">
    <div class="warp" @click.stop>
      <img :src="info.image" class="image" alt="" />
      <div class="text" @scroll.passive="() => {}">
        {{ info.content }}
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  show: Boolean,
  info: Object,
  onClose: {
    type: Function,
    default: () => {},
  },
});


</script>

<style lang="less" scoped>


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .warp {
    margin: 0 auto;
    width: 80%;
    height: 80%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    // background: fff;
    .image {
      width: 100%;
    }
    .text {
      line-height: 1.6em;
      padding: 0 20px;
      font-size: 20px;
      text-indent: 42px;
      margin-top: 50px;
      color: #fff;
      overflow-y: auto;
    }

    .text::-webkit-scrollbar {
      display: none;
    }
  }

  animation: fade-in; /*动画名称*/
  animation-duration: 0.7s; /*动画持续时间*/
}
@keyframes fade-in {
  0% {
    opacity: 0;
  } /*初始状态 透明度为0*/
  // 40% {
  //   opacity: 0.3;
  // } /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  } /*结束状态 透明度为1*/
}
</style>