circulation_ancientCoins_new/components/common/popUpCommon.vue

<template>
	<view class="popUpCommon">
		<view class="mask" v-show="show" @click="closePop"></view>
		<view :class="'popup-box mybox-leave-to'+(show?' mybox-enter':'') + (zIndex == 'top' ? ' highIndex' :'')" :style="'background:'+background+';'">
			<img :src="cssUrl+'icon-popup-close.svg'" alt="" class="popup-box-close" @click="closePop" v-if="showClose">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"popUp",
		props: {
		  background: {
		    type: String,
		    default: "#F8F8F8",
		  },
			showClose:{
				type: Boolean,
				default: true,
			},
			zIndex:{
				type: String,
				default:'normal'
			}
		},
		data() {
			return {
				show:false,
				cssUrl:this.cssUrl1,
			};
		},
		methods:{
			closePop() {
				this.show = false
				this.$emit('closeCommonpop')
			},
			openPop() {
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
.popUpCommon{
	.mask{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 89;
		background: rgba(0,0,0,0.27);
	}
	.popup-box{
		width: 100%;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 899;
		max-height: calc(100vh - 20rpx);
		overflow-y: auto;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.popup-box-close{
			position: absolute;
			top: 46rpx;
			right: 41rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.highIndex{
		z-index: 999;
	}
	.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>