H5遮罩层 直接拿着就可以用

<template>
    
	<view style=" background-color: rgba(0, 0, 0, 0.3);">
	  <view v-if="showInfo" class="backShadow" @click.self="closePopup">
		<view
		  class="content"
		  :class="{ animated: showInfo && !slideOut, 'slide-out': slideOut }"
		>
		  <view class="info_app">

        <view style="height: 500px; background-color: red;">

        </view>
  
		  </view>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  const app = getApp().globalData;
  export default {
	props: {
	  alertToggle: {
		type: Boolean,
		required: true,
	  },
	  goodsinfo: {
		type: Object,
		required: true,
	  },
	  selectedWeightIndex: {
		type: Number,
		required: true,
	  },
	},
	data() {
	  return {
		buyNum: 0,
		showInfo: false,
		slideOut: false,
	  };
	},
	
	methods: {
	  handlerApply() {
		this.showInfo = true;
		this.slideOut = false;
	  },
	  closePopup() {
		this.slideOut = true;
		setTimeout(() => {
		  this.showInfo = false;
		  this.slideOut = false;
		}, 500); // 500ms 是动画的持续时间
	  },
	
  }
  };
  </script>
  
  
  
  <style scoped>
  @keyframes slideInFromBottom {
	from {
	  transform: translateY(100%);
	}
	to {
	  transform: translateY(0%);
	}
  }
  
  @keyframes slideOutToBottom {
	from {
	  transform: translateY(0%);
	}
	to {
	  transform: translateY(100%);
	}
  }
  
  .animated {
	animation: slideInFromBottom 0.5s ease;
  }
  
  .slide-out {
	animation: slideOutToBottom 0.5s ease;
  }
  /* Add your styles here */
  .sku-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 10px;
  }
  
  .sku-button {
	width: 80px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	background-color: #f5f5f5;
	color: #000;
	font-size: 14px;
	cursor: pointer;
	/* transition: background-color 0.3s, color 0.3s, border 0.3s; */
  }
  
  .sku-button.sku-selected {
	border: 1rpx solid #ffa500;
	background-color: #fff3e0;
	color: #ffa500;
  }
  
  .sku-button.sku-disabled {
	background-color: #e0e0e0;
	color: #a0a0a0;
	cursor: not-allowed;
  }
  .choose-sku-label {
	font-size: 26rpx;
	color: #999;
  }
  .choose-sku-name {
	font-size: 32rpx;
	color: #000;
	font-weight: 600;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	/* 缩短并限制在一个确定的行数 */
	overflow: hidden;
	text-overflow: ellipsis;
	/* 文本溢出时添加省略号 */
	word-wrap: break-word;
	/* 单词过长会在词间换行 */
	white-space: normal;
	/* 允许正常换行 */
	font-size: 28rpx;
	font-family: ".PingFang SC-Regular", Arial, sans-serif;
	font-weight: bold;
  }
  
  @keyframes slideInFromBottom {
	from {
	  transform: translateY(100%);
	}
	to {
	  transform: translateY(0%);
	}
  }
  
  @keyframes slideOutToBottom {
	from {
	  transform: translateY(0%);
	}
	to {
	  transform: translateY(100%);
	}
  }
  
  .animated {
	animation: slideInFromBottom 0.5s ease;
  }
  
  .slide-out {
	animation: slideOutToBottom 0.5s ease;
  }
  
  .backShadow {
	width: 100%;
	height: 100%;
	/* background-color: rgba(0, 0, 0, 0.5); */
  background-color: rgba(0, 0, 0, 0.3);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 99;
  }
  
  .content {
	background-color: white;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 20px;
	border-radius: 8px 8px 0 0;
  }
  .info_app{
    background-color: rgba(0, 0, 0, 0.3);

  }
  </style>