我页面上有cavas   需要个弹框  想着弹框用cavas-view  写  但是样式不生效 有没有人遇到过   只有第一个.mask生效了  其他全部是cover-view
自带样式 

   

<cover-view class="mask ">
  <cover-view class="welfare_mask">
    <cover-view style="background:url({{staticimg}}welfare_success.png) no-repeat center center;background-size:100% 100% ">
      <cover-image  src="../../pages/pic/sussced.png"></cover-image>
      <cover-view>
        <cover-view>{{text}}</cover-view>
          <cover-view>请在“我的福利”里查看详情</cover-view>
        </cover-view>
      </cover-view>
      <cover-view>
        <cover-view >
          兑换码：{{couponNum}}<cover-view class="copy" bindtap="handleCopy" data-text="{{couponNum}}">点击复制</cover-view>
        </cover-view>
        <cover-view>使用说明</cover-view>
         <cover-view class="slot">
          <slot></slot>
         </cover-view>
      </cover-view>


    </cover-view>
    <cover-image  class="cover-images" src="../../pages/pic/close.png" bindtap="close"></cover-image>
  </cover-view>

    
    
  /* components/box.wxss */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 990;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}


.welfare_button_error {
  width: 120rpx;
  height: 40rpx;
  font-size: 22rpx;
  background: rgba(229, 229, 229, 1);
  color: #B2B2B2;
  line-height: 40rpx;
  text-align: center;
}


.welfare_mask {
  width: 600rpx;
}


.mask>.cover-images {
  width: 48rpx !important;
  height: 48rpx;
  position: absolute;
  bottom: 80rpx;
}


.welfare_mask>cover-view:nth-child(1) {
  height: 255rpx;
  width: 600rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}


.welfare_mask>cover-view:nth-child(1) cover-image {
  width: 120rpx;
  height: 120rpx;
  margin-right: 30rpx;
}


.welfare_mask>cover-view:nth-child(1)>cover-view cover-view:nth-child(2) {
  font-size: 22rpx;
  margin-top: 7rpx;
  color: rgba(153, 153, 153, 1);
}


.welfare_mask>cover-view:nth-child(2) {
  height: 585rpx;
  width: 600rpx;
  padding: 0 40rpx;
  background: white;
  padding-top: 15rpx;
  font-size: 24rpx;
  border-radius: 0px 0px 20rpx 20rpx;
}


.welfare_mask>cover-view:nth-child(2)>cover-view:nth-child(1) {
  height: 60rpx;
  width: 520rpx;
  background: rgba(252, 249, 236, 1);
  border-radius: 4rpx;
  line-height: 60rpx;
  padding-left: 22rpx;


}


.welfare_mask>cover-view:nth-child(2)>cover-view:nth-child(2) {
  margin-top: 40rpx;
  margin-bottom: 21rpx;
  color: #333333;
}


.welfare_mask>cover-view:nth-child(2)>cover-view:nth-child(3) text {
  display: block;
  line-height: 40rpx;
  color: #666666;
}


.welfare_mask>cover-view:nth-child(2)>cover-view>.copy {
  height: 30rpx;
  width: 138rpx;
  float: right;
  border-left: 1px solid #CCCCCC;
  line-height: 30rpx;
  text-align: center;
  margin-top: 15rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(195, 59, 41, 1);
}


.slot {
  width: 100%;
  height: 400rpx;
  overflow: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}