@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: 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 {
					cursor: default;
					&.z-focused,
					&:hover {
						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-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: -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-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-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-banner {
					position: relative;
          margin-top: 10px;
					.d-cpt-wrap {
						padding: 10px 10px 15px 10px;
            background-color: rgba(233, 233, 233, 0.26);
						.d-cpt-subwrap {
							position: relative;
							height: 160px;
							border-radius: 10px;
							overflow: hidden;             
							> img {
								width: 100%;
								height: 160px;
              }

							.d-title {
                margin-top:1px;
                position: absolute;
                border-radius: 5px;
								top: 0;
								right: 0;
                width:230px;
								padding: 0 10px;
								background: rgb(255, 255, 255);
                overflow: hidden;

                .left-log {
                  vertical-align: middle;
                  z-index: 10;
                  width: 15px;
                  margin-bottom:3px;
                }
                .s-title {
                  line-height: 21px;
                  margin-left:4px;
                  margin-bottom:3px;
                  font-size: 12px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: rgb(0, 0, 0);
                  vertical-align: middle;
                }
                .d-group-no {
									position: absolute;
									right: 10px;
									top: 3px;
									width: 50px;
									height: 28px;
                  vertical-align: middle;
									text-align: center;

									img {
										position: absolute;
										z-index: 10;
										left: 0;
										top: 0;
										width: 50px;
									}
									span {
										position: relative;
                    z-index: 20;
                    vertical-align: middle;
										font-size: 7px;
										color: 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);

						.d-cpt-title {
							position: relative;
							margin: 10px 10px 0 10px;
							padding: 7px 10px 13px;
							font-size: 17px;
							line-height: 15px;
							font-family: PingFang SC;
							font-weight: bold;
							color: rgba(51, 51, 51, 1);
							border-bottom: 1px solid #e7eeee;

							&::before {
								content: "";
								position: absolute;
								top: 7px;
								left: 0;
								width: 3px;
								height: 15px;
								background: rgba(230, 0, 0, 1);
								border-radius: 3px;
							}
						}

						.list {
							padding: 0 10px;
							.item {
								position: relative;
								padding: 10px 0;
								padding-left: 110px;
								border-bottom: 1px solid #eee;
								&:last-child {
									border-bottom: none;
								}
								> img {
									position: absolute;
									width: 100px;
									height: 55px;
									left: 0;
									top: 11px;
									border-radius: 5px;
								}
								.d-news-title {
									margin: 7px 0;
									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;
									margin-left: -110px;
									padding: 0 1px;
									font-size: 13px;
									line-height: 13px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(153, 153, 153, 1);
									overflow: hidden;
									> img {
										display: inline-block;
										margin-right: 5px;
										width: 13px;
										vertical-align: bottom;
									}
									> span {
										@include toe;
										display: inline-block;
										max-width: 70%;
										vertical-align: bottom;
									}
								}
							}

							.item2 {
								position: relative;
								padding: 10px 0;
								border-bottom: 1px solid #eee;
								&:last-child {
									border-bottom: none;
								}
								.d-news-title {
									@include toe;
									font-size: 17px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(51, 51, 51, 1);
									line-height: 24px;
								}
								.d-news-content {
									@include toe;
									padding: 3px 0;
									font-size: 14px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(51, 51, 51, 1);
									line-height: 20px;
								}
								.d-news-info {
									margin-top: 5px;
									padding: 0 1px;
									font-size: 13px;
									line-height: 26px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(153, 153, 153, 1);
									overflow: hidden;
									> img {
										display: inline-block;
										margin-right: 5px;
										width: 26px;
										vertical-align: bottom;
									}
									> span {
										@include toe;
										display: inline-block;
										max-width: 70%;
										vertical-align: bottom;
									}
								}
							}

							.item3 {
								position: relative;
								padding: 10px 0;
								border-bottom: 1px solid #eee;
								&:last-child {
									border-bottom: none;
								}
								.d-news-title {
									@include toe;
									font-size: 17px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(51, 51, 51, 1);
									line-height: 24px;
								}
								.d-news-content {
									@include toe;
									padding: 3px 0;
									font-size: 14px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(51, 51, 51, 1);
									line-height: 20px;
								}
								.d-news-info {
									margin-top: 5px;
									padding: 0 1px;
									font-size: 13px;
									line-height: 13px;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(153, 153, 153, 1);
									overflow: hidden;
									> img {
										display: inline-block;
										margin-right: 5px;
										width: 13px;
										vertical-align: bottom;
									}
									> span {
										@include toe;
										display: inline-block;
										max-width: 70%;
										vertical-align: bottom;
									}
								}
							}
						}
					}
        }
        
        // 爱心互助最新活动
        .mw-cpt-heart_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);

						.d-cpt-title {
							position: relative;
							margin: 10px 10px 0 10px;
							padding: 7px 10px 13px;
							font-size: 17px;
							line-height: 15px;
							font-family: PingFang SC;
							font-weight: bold;
							color: rgba(51, 51, 51, 1);
							border-bottom: 1px solid #e7eeee;

							&::before {
								content: "";
								position: absolute;
								top: 7px;
								left: 0;
								width: 3px;
								height: 15px;
								background: rgba(230, 0, 0, 1);
								border-radius: 3px;
              }
              
              .more{
                position: absolute;
                top:13px;
                right:10px;
                font-size: 13px;
                font-weight: normal;
                color: rgb(151, 150, 150);
              }
            }
            
          	.list {
							padding: 0 10px;
							.item {
								position: relative;
                padding: 5px 0;
                height: 140px;
								padding-left: 110px;
								border-bottom: 1px solid #eee;
								&:last-child {
									border-bottom: none;
								}
								> img {
									position: absolute;
									width: 110px;
                  height: 120px;
                 
									left: 0;
									top: 11px;
									border-radius: 5px;
								}
								.d-news-title {
                  margin-left:7px;
									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-time {
									margin: 0 0 5px 7px;
									font-size: 12px;
									font-family: PingFang SC;
									font-weight: normal;
									color: rgb(141, 141, 141);
									line-height: 17px;
                  overflow: hidden;
                  display: flex;

                  .d-news-time-title{
                    height: 20px ; 
                    display:flex ; 
                    align-items:center;
                    >img{
                      margin-right:2px;
                      width: 12px;
                      vertical-align: bottom;
                    }
                    >span{
                      vertical-align: bottom;
                    }
                  }
                  .d-news-time-item{
                    font-size: 13px;
                    width: 60%;
                    color: rgb(141, 141, 141);
                    > span {
                      vertical-align: bottom;
                    }
                  }
                }
                .d-news-adress {
                  margin: 0 0 7px 7px;
									height: 20px;
									font-size: 12px;
									font-family: PingFang SC;
									font-weight: normal;
									color: rgb(141, 141, 141);
									line-height: 20px;
                  overflow: hidden;
                    display:flex ; 
                    align-items:center;
									> img {
										display: inline-block;
                    margin-right: 2px;
										width: 12px;
										vertical-align: bottom;
									}
									> span {
                    display: inline-block;
                    height: 100%;
										max-width: 80%;
										vertical-align: bottom;
									}
                }
                .d-news-state {
                  margin: 0 0 7px 7px;
									height: 20px;
									font-size: 13px;
									font-family: PingFang SC;
									font-weight: normal;
									color: rgb(141, 141, 141);
									line-height: 20px;
									overflow: hidden;
                  .d-news-state-limit{
                    font-family: PingFang SC;
                    padding:3px 10px;
                    font-weight: 500;
                    background-color: rgb(170, 169, 169);
                    color: rgb(58, 58, 58);
                    border-radius: 90px;
                  }
                  .d-news-state-act{
                    margin-left:10px;
                    font-family: PingFang SC;
                    padding:3px 10px;
                    font-weight: 500;
                    background-color: rgb(255, 195, 195);
                    color: rgb(255, 38, 38);
                    border-radius: 90px;
                  }
								}
							}
						}
					}
				}

				.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-score_rank {
					position: relative;
					margin-top: 10px;

					.d-cpt-wrap {
						width: 100%;
						// overflow-x: scroll;
						overflow: hidden;
            .d-cpt-title {
							position: relative;
							margin: 10px 10px 0 10px;
							padding: 7px 10px 13px;
							font-size: 17px;
							line-height: 15px;
							font-family: PingFang SC;
							font-weight: bold;
							color: rgba(51, 51, 51, 1);
							border-bottom: 1px solid #e7eeee;

							&::before {
								content: "";
								position: absolute;
								top: 7px;
								left: 0;
								width: 3px;
								height: 15px;
								background: rgba(230, 0, 0, 1);
								border-radius: 3px;
              }
            }

            .rank_title{
              margin:10px 20px;
              display: flex;
              .rank_title_total{
                margin-right:20px;
                width:33%;
                font-size: 15px;
                text-align: center;
                font-family: PingFang SC;
                padding:3px 10px;
                font-weight: 500;
                background-color: rgba(239, 60, 61, 1);
                color: rgb(255, 255, 255);
                border-radius: 90px;
              }
              .rank_title_week{
                width:33%;
                margin-right:20px;
                font-size: 15px;
                text-align: center;
                font-family: PingFang SC;
                padding:3px 10px;
                font-weight: 500;
                background-color: rgb(255, 255, 255);
                color: rgb(0, 0, 0);
                border-radius: 90px;
                border-color: rgb(139, 139, 139);
                border-width: 1px;
                border-style: solid;
              }
              .rank_title_month{
                width:33%;
                font-size: 15px;
                text-align: center;
                font-family: PingFang SC;
                padding:3px 10px;
                font-weight: 500;
                background-color: rgb(255, 255, 255);
                color: rgb(0, 0, 0);
                border-radius: 90px;
                border-color: rgb(139, 139, 139);
                border-width: 1px;
                border-style: solid;
              }
            }

						.list {
              margin:10px 15px;
							.item {
                margin:8px 0;
                padding:8px 0;
								background-color: #ffffff;
                width: 100%;
                display:flex;
                height: 40px ; 
                align-items:center;
								.logo {
                  width:10%;
									height: 21px;
                  line-height: 21px;
                  text-align: center;
                  >img{
                    width: 25px;
                  }
                  >span{
                    font-size: 14px;
                    text-align: center;
                  }
               
                }
									.name {
                    width:70%;
                    z-index: 10;
                    vertical-align: bottom;
									}
									.score {
                    width:20%;
										z-index: 20;
										font-size: 14px;
										font-family: PingFang SC;
										font-weight: bold;
										font-style: italic;
									}
								
		
							}
						}
					}
				}

				.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-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;
    }
	}
}