show_modal.less 2.49 KB
@charset "UTF-8";

.show-modal {
	.layer-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 150;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.4);
		width: 100%;
		height: 100%;
		.box {
			background-color: #F8F8FA;
			width: 540px;
			border-radius: 10px;
			.title {
				color: #333333;
				font-size: 32px;
				font-weight: 500;
				text-align: center;
				padding-top: 30px;
				& + .message {
					padding-top: 30px;
				}
			}
			.message {
				padding: 60px 0 50px 0;
				text-align: center;
				color: #000000;
				font-size: 30px;
				font-weight: 500;
				line-height: 42px;
				letter-spacing: 1px;
			}
			.buttons-box {
				display: flex;
				justify-content: space-evenly;
				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 104px;
					border-top: 1px solid #EBEBEB;
					& + .btn {
						border-left: 1px solid #EBEBEB;
					}
					&.btn-confirm {
						flex: 1;
						color: #6B7698;
						font-size: 30px;
						letter-spacing: 1px;
					}
					&.btn-cancel {
						flex: 1;
						color: #000000;
						font-size: 30px;
						letter-spacing: 1px;
					}
				}
			}
		}
		.bottomClose {
			margin-top: 99px;
			.close-img {
				display: block;
				width: 62px;
				height: 62px;
			}
		}
		&.douyin-url {
			background-color: rgba(0, 0, 0, 0.6);
			.box {
				background-color: #FFFFFF;
				width: 580px;
				border-radius: 24px;
				.message {
					background-color: #F9F9F9;
					color: #666666;
					font-size: 26px;
					width: 520px;
					margin: 30px auto 40px auto;
					padding: 0;
					border-radius: 16px;
					.message-content {
						width: 468px;
						margin: 0 auto;
						padding: 26px 0;
						text-align: left;
					}
				}
				.buttons-box {
					justify-content: space-between;
					align-items: center;
					width: 520px;
					margin: 0 auto 40px auto;
					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius:39px;
						& + .btn {
							margin-left: 48px;
						}
						&.btn-confirm {
							background:linear-gradient(270deg,rgba(207,146,117,1) 0%,rgba(238,185,143,1) 100%);
							width: 236px;
							height: 78px;
							color: #FFFFFF;
							font-size: 30px;
							letter-spacing: 1px;
						}
						&.btn-cancel {
							width: 234px;
							height: 76px;
							color: #D69B7B;
							font-size: 30px;
							letter-spacing: 1px;
							border:1px solid rgba(214,155,123,1);
						}
					}
				}
			}
		}
	}
}