vue css 弹窗

不使用插件显示弹窗，纯css样式简单的一个弹窗样式

 html

<div class="popup-landing-box" v-if="popupShow">

      <div class="popup-trem">
        <div>内容</div>
        <div class="popup-but">
          <button type="button" @click="popupShow = false">取消</button>
          <button type="submit">确定</button>
        </div>
      </div>

    </div>

vue 

<script>
    export default {
        data() {
          return {
            popupShow:false
          };
        },
    }
</script>

 css

.popup-landing-box { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0003; z-index: 12; }
  .popup-landing-box .popup-trem { position: fixed; z-index: 12; top: 20%; left: 0; right: 0; margin: 0 auto; width: 88%; background: #fff; border-radius: 6px; padding: 2%; }
  .popup-but { margin-top: 10px; display: flex; justify-content: space-between; }
  .popup-but button { border: none; width: 46%; padding: 8px 0; font-size: var(--twelve-old); border-radius: 4px; color: #333; }
  .popup-but button:active { opacity: .8; }
  .popup-but button:nth-child(2) { background: #c70019; color:#fff; }

  .popup-landing-box .popup-trem {
    -webkit-animation:bounceIn 1s .2s ease both;
    -moz-animation:bounceIn 1s .2s ease both;
  }

  @-webkit-keyframes bounceIn{
    0%{
      opacity:0;
      -webkit-transform:scale(.3)
    }
    50%{
      opacity:1;
      -webkit-transform:scale(1.05)
    }
    70%{ -webkit-transform:scale(.9) }
    100%{ -webkit-transform:scale(1) }
  }
  @-moz-keyframes bounceIn{
    0%{
      opacity:0;
      -moz-transform:scale(.3)
    }
    50%{
      opacity:1;
      -moz-transform:scale(1.05)
    }
    70%{ -moz-transform:scale(.9) }
    100%{ -moz-transform:scale(1) }
  }