lotteryDraw_client/components/sliderBox.vue

<template>
	<view class="slider-box-com">
		<view class="mask" v-show="show"></view>
		<view :class="'slider-box mybox-leave-to'+(show?' mybox-enter':'')">
			<img :src="cssUrl+'close.svg'" alt="" class="slider-box-close" @click="closeConfirm">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"sliderBox",
		data() {
			return {
				show:false,
				cssUrl:this.cssUrl,
			};
		},
		methods:{
			closeConfirm() {
				this.show = false
			},
			showConfirm() {
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
.slider-box-com{
	.mask{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 89;
		background: rgba(0,0,0,0.27);
	}
	.slider-box{
		width: 100%;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 899;
		max-height: 80vh;
		overflow-y: auto;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.slider-box-close{
			position: absolute;
			top: 44rpx;
			right: 33rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.mybox-leave-to{
		transition: all .8s ease;
		transform:translate3d(0,100%,0);
	}
	.mybox-enter{
		transition: all .8s ease;
	    transform:translate3d(0,0,0) !important;
	}
}
</style>