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

.m-wx_index {
	.wrap {
		margin-top: 10px;
	}
	.mw-cpt_type {
		position: relative;
		z-index: 10;
		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;
					overflow: hidden;
					.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-top: 40px;
		&.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 {
					cursor: default;
					&.z-focused,
					&:hover {
						box-shadow: none;
					}
				}
			}
		}

		.mw-phone {
			position: relative;
			margin: 0 auto;
			width: 375px;
      height: 700px;
      overflow: auto;
			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-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;
				&.z-none {
					&::before {
						border-top: none;
						border-bottom: none;
					}
				}
			}
			.mw-phone-cnt {
				position: relative;
				min-height: 350px;
				padding-top: 1px;
				padding-bottom: 10px;
			}

			.mw-cpt {
				position: relative;
				cursor: pointer;
				transition: box-shadow $ad1 ease-in-out;
				&:hover {
					box-shadow: 0 0 12px 3px rgba(#67c23a, 0.2);
				}

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

				.d-cpt-operate {
					@include bs3;
					position: absolute;
					top: -1000px;
					bottom: -1000px;
					right: 0px;
					width: 50px;
					padding: 5px 0;
					height: 200px;
					margin: auto 0;
					border-radius: 0 4px 4px 0;
					border: 1px solid #bb5;
					background-color: #ffffff;
					text-align: center;
          z-index: 1000;
					&.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-placeholder {
					position: relative;
					line-height: 40px;
					text-align: center;
					font-size: 17px;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 76, 82, 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_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);
								}
							}

						}
					}
        }

        // 更多功能2
        .mw-cpt-cnt_function2 {
					position: relative;
					margin-top: 10px;

					.d-cpt-wrap {
            border-radius: 10px;
						// overflow-x: scroll;
						overflow: hidden;
            margin: 0 13px;
            padding:0 0 13px 0;
            background-color: white;
				
            .link {
              width: 100%;
              position: relative;

              .link-item{
                display: inline;
                position: relative;

                > img {
                  width:45%;
                  // width: 308px;
                  margin: 8px;
                  // height: 160px;
                  border-radius: 10px;
                }
                span {
                  position: absolute;
                  top: -10px;
                  left: 20px;
                  color: #fff;
                  font-size: 15px;
                  font-family: PingFang SC;
                  font-weight: bold;
                  color: #ffffff;
                }
              }

              
            }
            
            .dots {
              position: absolute;
              bottom: 10px;
              left: 0;
              right: 0;
              width: 100%;
              display: flex;
              justify-content: center;
          
              .dot {
                margin: 0 5px;
                width: 20px;
                height: 4px;
                border-radius: 6px;
                background-color: #ddd;
                transition: all ease $ad1;
          
                &.z-on {
                  background-color: $c1;
                }
              }
            }
				
					}
        }

			}
		}
	}

	.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: 400px !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;
    }
	}
}

.d-set-banners {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  .upload-demos {
    display: block;
    width: 20px;
    height: 20px;
    color: #ccc;
    text-align: center;
    line-height: 18px;
    border: 1px dashed #ccc;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
}