@import '~css/public.scss';

.Dialog{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	left: 0;
	top: -999999px;
	position: fixed;
	z-index: -99999;
	opacity: 0;
	filter: alpha(opacity=0);
	.DialogWrap{
		width: 3rem;
		padding: $padding2;
		left: 50%;
		top: 50%;
		transform: translate3d(-50%,-50%,0) scale(0,0);
		-webkit-transform: translate3d(-50%,-50%,0) scale(0,0);
		background-color: #fff;
		position: absolute;
		.title{
			width: 100%;
			height: .3rem;
			line-height: .3rem;
			text-align: center;
			span{
				font-size: .16rem;
				color: $mainText;
			}
			em{
				float: right;
				height: 100%;
				cursor: pointer;
			}
			.iconfont{
				font-size: .16rem;
				color: $minor;
			}
		}
		.main{
			width: 100%;
			padding: .2rem 0;
			line-height: .24rem;
			position: relative;
		}
		.end{
			width: 100%;
			text-align: center;
			overflow: hidden;
			span{
				display: inline-block;
				width: 48%;
				height: .4rem;
				line-height: .4rem;
				text-align: center;
				background-color: $minor;
				color: #fff;
				cursor: pointer;
				&:nth-of-type(1){
					margin-right: 2%;
				}
				&:nth-of-type(2){
					margin-left: 2%;
					background-color: $main;
				}
			}
		}
	}
	&.active{
		top: 0;
		z-index: 99999;
		opacity: 1;
		filter: alpha(opacity=100);
		.DialogWrap{
			transform: translate3d(-50%,-50%,0) scale(1,1);
			-webkit-transform: translate3d(-50%,-50%,0) scale(1,1);
		}
	}
	&.DialogAnimation{
		transition: .2s all linear .1s;
		-webkit-transition: .2s all linear .1s;
		.DialogWrap{
			transition: .1s all linear 0s;
			-webkit-transition: .1s all linear 0s;
		}
		&.active{
			transition: .2s opacity linear 0s;
			-webkit-transition: .2s opacity linear 0s;
			.DialogWrap{
				transition: .1s all linear .2s;
				-webkit-transition: .1s all linear .2s;
			}
		}
	}
}