弹出框背景透明

  .popupBj {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .popUpView {
    position: fixed;
    width: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    .popUpBox {
      width: 100%;
    }
  }
/* css弹出中奖背景旋转动画效果 */
.cssThreeBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  overflow: hidden;
  grid-template: "body";
  place-content: center;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 12;
}

.cssThreeBg::before {
  content: "";
  width: 150vmax;
  height: 150vmax;
  opacity: 0.4;
  background: repeating-conic-gradient(from 0deg,
      white 0deg 15deg,
      transparent 15deg 30deg);
  -webkit-mask-image: radial-gradient(hsla(0 0% 0% / 1), hsla(0 0% 0% / 0) 50%);
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}
/*  css弹出中奖背景旋转动画效果end */

    <div v-if="signPopShow">
      <div class="popupBj cssThreeBg"></div>
      <div class="popUpView">
        <div class="popUpBox">
          12
        </div>
      </div>
    </div>

  data() {
    return {
      signPopShow: true
    };
  },