vue项目使用vant组件popup弹框 可直接使用的模板 position="bottom"方向

popup的底部展示出来不影响其他点击和滑动操作

话不多说上代码
html
<van-popup
  v-model="showBottomProp"
  position="bottom"
  :lock-scroll="false"
  class="bottomp_"
>
  <div class="BottomProp" @click="showFirstTip = true">
    <div class="cupList">
      <div class="noimg" v-for="item in pointBigImg" :key="item.id">
        <img v-if="item.isComplete" :src="getFileUrl(item.colorImg)" alt="">
        <img v-else :src="getFileUrl(item.shadowImg)" alt="">
      </div>
    </div>
  </div>
</van-popup>

:lock-scroll="false" 是否锁定背景滚动

 css  这边给van-popup--bottom 进行设置一下就不影响其他弹框的展示
 .bottomp_{
      height: 180px!important;
    }
.BottomProp{
  .cupList{
    width: 100%;
    height: 180px;
    background: url(/img/vrcollection/BottomProp.png) no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .yesimg{
      width: 100px;
      height: 100px;
      border: 5px solid #ffb457;
      border-radius: 30px;
      text-align: center;
      box-sizing: border-box;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .noimg{
      width: 100px;
      height: 100px;
      border-radius: 30px;
      background-color: #C5A38E;
      padding:10px;
      text-align: center;
      box-sizing: border-box;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}