MeetMateApp/components/DialogBoxW3/DialogBoxW3.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: #28292D;
	width:572rpx;height:356rpx;
	background: url('../../static/w3/dialog_bg.png');
	background-size: 572rpx 356rpx;
	border-radius: 24rpx;
	overflow: hidden;
	position: relative;
	.close {
		width:40rpx;height:40rpx;padding:2rpx;
		position: absolute;right:20rpx;top:20rpx;
	}
	.title{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.content{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 90%;
		height: 100rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		input{
			width: 80%;
			height: 100%;
			font-size: 28rpx;
			color: #ffffff;
			padding: 0 4%;
		}
		text{
			font-size: 34rpx;
			color: #ffffff;
			margin-right: 4%;
		}
	}
	.inquiry{
		padding: 0 4%;padding-top:30rpx;
		height: 120rpx;
		text-align: center;
		text{
			line-height: 40rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #F5E3E3;
		}
	}
	.operation-btn{
		display: flex;flex-direction: row;justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100rpx;
		margin-top: 20rpx;
		.btn1{
			display: flex;justify-content: center;align-items: center;
			width:284rpx;height:185rpx;
			background: url('../../static/w3/dialog_btn1.png');
			background-size: 284rpx 185rpx;
			text{
				font-size: 28rpx;
				color: #999999;
			}
		}
		.btn2{
			display: flex;justify-content: center;align-items: center;
			width:284rpx;height:185rpx;
			background: url('../../static/w3/dialog_btn2.png');
			background-size: 284rpx 185rpx;
			text{
				font-size: 28rpx;
				color: #999999;
			}
			.activity{
				color: #FF2A95;
			}
		}
	}
}


.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);
	}
}