@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;
						overflow: hidden;
						&: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-topbar{
				display: block;
				width: 100%;
			}

			.mw-phone-hint {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				text-align: center;
				color: #aaaaaa;
				width: 120px;
				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 {
				position: relative;
				cursor: pointer;

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

				.d-cpt-operate {
					@include bs3;
					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: 10px;
							line-height: 10px;
						}
						p {
							line-height: 10px;
							font-size: 12px;
						}
					}
				}

				.mw-cpt-top_title {
					position: relative;

					.d-cpt-wrap {
						height: 40px;
						line-height: 40px;
						padding-left: 10px;
						background-color: #fff;
						.d-cpt-ico {
							position: relative;
							top: -4px;
							margin-right: 4px;
							height: 20px;
						}
						.d-cpt-avatar {
							position: relative;
							float: right;
							margin-right: 10px;
							top: 5px;
							width: 30px;
						}
						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;
					margin-top: 10px;

					.d-cpt-wrap {
						width: 355px;
						margin: 0 auto;
						border-radius: 5px;
						overflow: hidden;
						background: rgba(255, 255, 255, 1);
						.list {
							padding: 0 10px;
							.item {
								position: relative;
								padding: 15px 0;
								padding-left: 105px;
								height: 100px;
								border-bottom: 1px solid #eee;
								&:last-child {
									border-bottom: none;
								}
								> img {
									position: absolute;
									width: 95px;
									height: 70px;
									left: 0;
									top: 15px;
									border-radius: 5px;
								}
								.d-news-title {
									height: 40px;
									font-size: 16px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(51, 51, 51, 1);
									line-height: 20px;
									overflow: hidden;
								}
								.d-news-info {
									margin-top: 17px;
									font-size: 11px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(153, 153, 153, 1);
									overflow: hidden;
									span {
									}
								}
							}
						}
					}
				}

				.mw-cpt-cnt_menus {
					position: relative;
					margin-top: 10px;

					.d-cpt-wrap {
						width: 355px;
						margin: 0 auto;
						border-radius: 5px;
						overflow: hidden;
						background: rgba(255, 255, 255, 1);

						.list {
							padding: 15px 0 5px;
							overflow: hidden;
							.item {
								position: relative;
								float: left;
								margin: 0 24px;
								width: 40px;

								> img {
									display: block;
									width: 40px;
									height: 40px;
									margin-bottom: 1px;
								}

								p {
									width: 100px;
									margin-left: -30px;
									line-height: 15px;
									font-size: 13px;
									text-align: center;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(51, 51, 51, 1);
								}
							}
						}
					}
				}

				.mw-cpt-cnt_groups {
					position: relative;
					margin-top: 10px;

					.d-cpt-wrap {
						width: 100%;
						// overflow-x: scroll;
						overflow: hidden;

						.list {
							width: 1000px;
							overflow: hidden;
							.item {
								position: relative;
								float: left;
								border-radius: 10px;
								background-color: #ffffff;
								margin-left: 10px;
								width: 150px;
								box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26);

								.d-group-no {
									position: absolute;
									left: 10px;
									top: 0;
									width: 25px;
									height: 21px;
									line-height: 21px;
									text-align: center;

									img {
										position: absolute;
										z-index: 10;
										display: block;
										left: 0;
										top: 0;
										width: 25px;
									}
									span {
										position: relative;
										z-index: 20;
										font-size: 14px;
										font-family: PingFang SC;
										font-weight: bold;
										font-style: italic;
										color: rgba(255, 255, 255, 1);
									}
								}
								.d-group-avatar {
									position: relative;
									margin: 30px auto 5px;
									width: 60px;
									height: 60px;
									padding: 4px;
									overflow: hidden;
									border-radius: 100%;
									box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26);

									img {
										position: absolute;
										display: block;
										top: 0;
										left: 0;
										right: 0;
										bottom: 0;
										margin: auto;
										width: 52px;
										height: 52px;
										border-radius: 100%;
									}
								}
								.d-group-name {
									@include toe;
									width: 120px;
									margin: 0 auto;
									text-align: center;
									font-size: 17px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(51, 51, 51, 1);
									line-height: 21px;
								}
								.d-group-info {
									@include toe;
									width: 140px;
									margin: 0 auto;
									text-align: center;
									font-size: 13px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(102, 102, 102, 1);
									line-height: 21px;
								}
								.d-group-btn {
									margin: 10px auto 20px;
									width: 65px;
									height: 25px;
									line-height: 25px;
									background: rgba(255, 76, 82, 1);
									border-radius: 25px;
									text-align: center;
									font-size: 14px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(255, 255, 255, 1);
								}
							}
						}
					}
				}
			}

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

	.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: rgba(247, 247, 247, 1);
			min-height: 100px !important;
			font-size: 13px;
			&:focus {
				background-color: #ffffff;
			}
		}

		.d-config-hint {
			margin-top: -10px;
			font-size: 10px;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 18px;
			img {
				height: 14px;
				margin-right: 4px;
			}
		}

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