<!-- 弹窗组件 -->
<template>
<view class="add_popup" v-if="person.isShowPopup">
	<view class="popup_cont" :style="'background:'+props.bgColor+'!important;'">
		<view class="popup_close"></view>
		<slot></slot>
	</view>
</view>
</template>

<script setup>
import { reactive, shallowRef, nextTick, onMounted, watch } from 'vue'
const props = defineProps({
    isShow: {
        type: Boolean,
        required: true
    },
	bgColor: {
		type: String,
		required: true
	}
})

let person=reactive({
	isShowPopup:false
})

watch(()=>props.isShow,(newVal)=>{
	person.isShowPopup=newVal
})

onMounted(()=>{
	setTimeout(()=>{
		person.isShowPopup=false
	},3000)
})

</script>

<style lang="scss" scoped>
.add_popup{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	// justify-content: start;
	justify-content: flex-end;
	z-index: 9999;
	.popup_cont{
		
		background: rgba(0,0,0,.4);
		text-align: center;
		margin: 60rpx auto 100rpx auto;
		border-radius: 20rpx;
		color: #ffffff;
		font-size: 30rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.popup_close{
			margin-bottom: 10rpx;
		}
	}
}
</style>