MeetMateApp/components/ToastW3/ToastW3.scss

.page-total{
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 99999;
	
	// position: fixed; /* 固定定位，覆盖整个视口 */
	// top: 0;
	// left: 0;
	// width: 100%;
	// height: 100%;
	// background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
	// display: flex; /* 使用 Flexbox 居中 */
	// justify-content: center; /* 水平居中 */
	// align-items: center; /* 垂直居中 */
	// z-index: 1000; /* 确保它处于最前面 */
}

.box{
	display: flex;
	justify-content: center;
	width: 100%;
}
/* 文件重命名 */
.dialog-box{
	background-color: #ffffff;
	width:auto;height:auto;
	padding:10rpx 50rpx;
	border-radius: 8rpx;
	overflow: hidden;
	position: relative;
	display: flex;flex-direction: row;justify-content: center;align-items: center;
	.title{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		font-size: 28rpx;
		color: #000000;
	}
}


.a-fadein,
.a-fadeinT,
.a-fadeinR,
.a-fadeinB,
.a-fadeinL,
.a-bouncein,
.a-bounceinT,
.a-bounceinR,
.a-bounceinB,
.a-bounceinL,
.a-rotatein,
.a-rotateinLT,
.a-rotateinLB,
.a-rotateinRT,
.a-rotateinRB,
.a-flipin,
.a-flipinX,
.a-flipinY {
	-webkit-animation: .3s ease-out backwards;
	-moz-animation: .3s ease-out backwards;
	-ms-animation: .3s ease-out backwards;
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.a-fadeout,
.a-fadeoutT,
.a-fadeoutR,
.a-fadeoutB,
.a-fadeoutL,
.a-bounceout,
.a-bounceoutT,
.a-bounceoutR,
.a-bounceoutB,
.a-bounceoutL,
.a-rotateout,
.a-rotateoutLT,
.a-rotateoutLB,
.a-rotateoutRT,
.a-rotateoutRB,
.a-flipoutX,
.a-flipoutY {
	-webkit-animation: .3s ease-in forwards;
	-moz-animation: .3s ease-in forwards;
	-ms-animation: .3s ease-in forwards;
	animation: .3s ease-in forwards;
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


/* 淡入 */
.a-fadein {
	-webkit-animation-name: fadein;
	-moz-animation-name: fadein;
	-ms-animation-name: fadein;
	animation-name: fadein;
}

/* 淡出 */
.a-fadeout {
	-webkit-animation-name: fadeout;
	-moz-animation-name: fadeout;
	-ms-animation-name: fadeout;
	animation-name: fadeout;
}

/* 弹入 */
.a-bouncein {
	-webkit-animation-name: bouncein;
	-moz-animation-name: bouncein;
	-ms-animation-name: bouncein;
	animation-name: bouncein;
}

/* 弹出 */
.a-bounceout {
	-webkit-animation-name: bounceout;
	-moz-animation-name: bounceout;
	-ms-animation-name: bounceout;
	animation-name: bounceout;
}


/* 淡入 */
@keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* 淡出 */
@keyframes fadeout {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* 弹入 */
@keyframes bouncein {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* 弹出 */
@keyframes bounceout {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.3);
	}
}