@import "@/assets/scss/c/config.scss";
@import "@/assets/scss/c/function.scss";

.m-wx_index {
	.wrap {
		margin-top: 10px;
	}
	.mw-cpt_type {
		padding: 10px;
		min-height: 250px;
		border-radius: 4px;
		background-color: #ffffff;

		.d-function {
			margin: 5px 0 15px;

			.d-info {
				@include cs;
				line-height: 25px;
				cursor: pointer;
				.d-ico {
					margin-right: 8px;
					width: 15px;
				}
				.d-name {
					font-weight: bold;
					font-size: 13px;
				}
				.d-arrow {
					float: right;
					position: relative;
					top: 8px;
					right: 3px;
					width: 9px;
					transition: transform $ad1 ease-in-out;
					&.z-unfold {
						transform: rotate(180deg);
					}
				}
			}
			.d-list {
				@include cs;
				margin-top: 4px;

				.d-item {
					margin: 5px 0;
					line-height: 24px;
					.d-item-region {
						margin-right: 4px;
						font-size: 10px;
						color: #aaaaaa;
					}
					.d-item-name {
						font-size: 13px;
					}
					.d-item-btn {
						float: right;
						position: relative;
						color: #aaaaaa;
						font-size: 12px;
						line-height: 24px;
						cursor: pointer;
						user-select: none;
						&:hover {
							color: $c1;
						}
						&.z-disabled {
							color: #cccccc;
							cursor: default;
						}
						img {
							position: relative;
							top: 0px;
							width: 8px;
							margin-right: 3px;
						}
					}
				}
			}
		}
	}

	.mw-show {
		padding: 40px 0 100px;
		&.z-preview {
			position: fixed;
			z-index: 100000;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			overflow-y: scroll;
			background-color: rgba(#000000, 0.6);

			.mw-show-close {
				position: absolute;
				top: 20px;
				left: 0;
				right: 0;
				width: 600px;
				margin: 0 auto;
				text-align: center;
			}

			.mw-phone {
				margin: 50px auto;
				min-height: 540px;
				// box-shadow: 0 0 0 8px rgba(#000, 0.1);
				.d-cpt-operate {
					display: none;
				}

				.mw-cpt {
					&.z-focused {
						box-shadow: none;
					}
				}
			}
		}

		.mw-phone {
			position: relative;
			margin: 0 auto;
			width: 375px;
			min-height: 500px;
			background-color: #ffffff;
			background-color: #f7f6f9;
			box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.2);

			.mw-phone-hint {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				text-align: center;
				color: #aaaaaa;
				height: 30px;
				line-height: 30px;
				font-size: 12px;
				transition: transform $ad2 ease-in-out;

				&.z-out-left {
					transform: translateX(-230px);
				}

				&.z-out-down {
					transform: translateY(45px);
				}
			}

			.z-none {
				&::before {
					content: "";
					display: block;
					position: absolute;
					z-index: 10;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					border: 1px dashed rgba(#000, 0.3);
					pointer-events: none;
				}
				&.mw-phone-fixed {
					&::before {
						border-radius: 50px 0 0 50px;
					}
				}
			}

			.mw-cpt {
				cursor: pointer;

				&.z-focused {
					box-shadow: 0 0 12px 3px rgba(#177, 0.5);
				}

				.d-cpt-operate {
					@include bs1;
					position: absolute;
					top: -1000px;
					bottom: -1000px;
					right: -50px;
					width: 50px;
					padding: 5px 0;
					height: 200px;
					margin: auto 0;
					border-radius: 0 4px 4px 0;
					border-left: 1px solid #bb5;
					background-color: #ffffff;
					text-align: center;

					&.z-small {
						height: 71px;
					}

					.d-cpt-btn {
						margin-bottom: 2px;
						padding: 8px 0 4px;
						line-height: 16px;

						&:hover {
							background-color: #f1f2f3;
						}

						img {
							height: 12px;
							line-height: 12px;
						}
						p {
							line-height: 10px;
							font-size: 12px;
						}
					}
				}

				.mw-cpt-top_title {
					position: relative;

					.d-cpt-wrap {
						line-height: 50px;
						padding-left: 10px;
						background-color: #fff;
						img {
							position: relative;
							top: -4px;
							margin-right: 4px;
							height: 20px;
						}
						span {
							font-size: 17px;
							font-family: PingFang SC;
							font-weight: 500;
							color: rgba(255, 76, 82, 1);
						}
					}
				}

				.mw-cpt-swiper {
                    position: relative;

					.d-cpt-wrap {
						padding: 10px 10px 15px 10px;
						background-color: #fff;
						.d-cpt-subwrap {
							position: relative;
							height: 160px;
							border-radius: 10px;
							overflow: hidden;
							> img {
								width: 100%;
								height: 160px;
							}
							> div {
								position: absolute;
								bottom: 0;
								left: 0;
								right: 0;
								height: 30px;
								padding: 0 10px;
								line-height: 30px;
								background: rgba(0, 0, 0, 0.26);
								overflow: hidden;

								> span {
									font-size: 14px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(255, 255, 255, 1);
								}
								> i {
									float: right;
									position: relative;
									top: 11px;
									margin: 0 2px;
									width: 5px;
									height: 5px;
									border-radius: 50%;
									background: rgba(0, 0, 0, 0.26);
									&.z-on {
										background: rgba(255, 255, 255, 1);
									}
								}
							}
						}
					}
				}

				.mw-cpt-new_msg {
                    position: relative;

					.d-cpt-wrap {
						width: 136px;
						height: 50px;
						background: rgba(255, 255, 255, 1);
						box-shadow: 0px 2px 12px 0px rgba(211, 211, 211, 0.26);
						border-radius: 50px 0 0 50px;
						line-height: 50px;
						img {
							position: relative;
							width: 40px;
							margin: 5px;
							vertical-align: top;
						}
						span {
							font-size: 16px;
							font-family: PingFang SC;
							font-weight: 500;
							color: rgba(255, 76, 82, 1);
						}
					}
				}

				.mw-cpt-cnt_news {
                    position: relative;
                    
					.d-cpt-wrap {
						background: rgba(255, 255, 255, 1);
						border-radius: 10px;
					}
				}
			}

			.mw-phone-fixed {
				// @include bs1;
				position: absolute;
				z-index: 10;
				top: 300px;
				right: 0;
				height: 50px;
				width: 136px;
				// border-radius: 50px 0 0 50px;
				// background-color: #ffffff;
			}
			.mw-phone-top {
				position: relative;
				height: 50px;
			}
			.mw-phone-ban {
				position: relative;
				min-height: 150px;
			}
			.mw-phone-cnt {
				position: relative;
				min-height: 300px;
			}
		}
	}

	.mw-set {
		padding: 15px 20px;
		min-height: 300px;
		border-radius: 4px;
		background-color: #ffffff;

		.d-set-head {
			@include cs;
			line-height: 25px;
			margin-bottom: 5px;
			cursor: pointer;

			.d-title {
				font-weight: bold;
				font-size: 13px;
			}

			.d-arrow {
				float: right;
				position: relative;
				top: 8px;
				right: 3px;
				width: 9px;
				transition: transform $ad1 ease-in-out;
				&.z-unfold {
					transform: rotate(180deg);
				}
			}
		}

		textarea {
			background-color: #f3f4f5;
			min-height: 100px !important;
			font-size: 13px;
			&:focus {
				background-color: #ffffff;
			}
		}

		.d-operate {
			padding: 20px 0;
			text-align: right;
		}
	}
}