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">
        {{ info.content }}
      </div>
    </div>
    <div class="colse" ><i class="iconfont icon-roundclose"></i></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';

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

const origin = document.body.style.overflow;

watch(() => props.show, (val) => {
  if (val) {
    document.body.style.overflow = 'hidden';
  } else {
    document.body.style.overflow = origin;
  }
})

</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.8);
  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;
    overflow-y: auto;
    .image {
      width: 100%;
    }
    .text {
      line-height: 1.6em;
      padding: 0 20px;
      font-size: 20px;
      text-indent: 42px;
      margin-top: 50px;
      color: #fff;
    }
  }
  .warp::-webkit-scrollbar {
    display: none;
  }
  animation: fade-in; /*动画名称*/
  animation-duration: 0.7s; /*动画持续时间*/

  .colse{
   position: absolute;
   bottom: 20px;
    color: rgba(256, 256, 256, 0.8);
    .icon-roundclose{
      font-size: 48px;
    }
   
    
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  } /*初始状态 透明度为0*/
  // 40% {
  //   opacity: 0.3;
  // } /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  } /*结束状态 透明度为1*/
}
</style>