@import "../../../common/css/global";
.details_contanier{
    width: 100%;
    position: relative;
    .details_head{
        width:100%px;
        padding: 15px;
        height:179px;
        background:#FB5054;
        border-radius: 0px 0px 50px 50px;
        display: flex;
        flex-direction: row;
        .rule{
            width:74px;
            height:24px;
            color: #ffffff;
            background:rgba(17, 17, 17, 0.1);
            border-radius:100px 0px 0px 100px;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 15px;
            right: 0;
            font-size:11px;
        }
        .head_photo{
            display: flex;
            justify-content: center;
            align-items: center;
            width:55px;
            height:55px;
            border-radius: 50%;
            background:rgba(237,242,252,1);
            image{
                width: 100%;
                height: 100%;
                border-radius: 59%;
                }
        }
        .head_message{
            display: flex;
            flex-direction: column;
            margin-left: 6px;
            .name{
                display: flex;
                justify-content: start;
                align-items: center;
                height:17px;
                font-size:12px;
                font-weight:400;
                color:#FFFFFF;
                line-height:17px; 
                margin-top:7px;
            }
            .notice{
                display: flex;
                justify-content: center;
                align-items: center;
                height:17px;
                font-size:12px;
                font-weight:400;
                color:#FFFFFF;
                line-height:17px;
                margin-top: 4px;
                
            }
        }
    }
    .details_body{
        margin-top: -95px;
        position: relative;
        width:92%;
        margin-left: 4%;
        background:rgba(255,255,255,1);
        border-radius:6px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        .goods_message{
            display: flex;
            flex-direction:row;
            margin-bottom: 15px;
			 align-items: center;
            .goods_left{
                width:90px;
				margin-right: 15px;
                image{
                    width: 100%;
      
                }
            }
            .goods_right{
                display: flex;
                flex-direction: column;
				flex: 1;
                .goods_name{
                    font-size:13px;
                    font-weight:400;
                    color:rgba(17,17,17,1);
                    line-height:20px;
                    display: flex;
                    flex-wrap: wrap;
					word-break: break-all;
					word-wrap: break-word;
					  overflow: hidden;
					  text-overflow: ellipsis;
					  display: -webkit-box;
					  -webkit-line-clamp: 2;
					  line-clamp: 2;
					  -webkit-box-orient: vertical;
                }
                .past_price{
                    text-decoration: line-through;
                    height:17px;
                    font-size:12px;
                    font-weight:400;
                    color:rgba(102,102,102,1);
                    line-height:17px;
                    margin-top: 7px;
                }
                .new_price{
                    height:20px;
                    font-size:12px;
                    font-family:PingFangSC;
                    font-weight:600;
                    color:rgba(251,80,84,1);
                    line-height:17px;
                    margin-top: 6px;
                }
            }
        }
        .text_message{
            position: relative;
            display: flex;
            justify-content: center;
           // align-items: center;
            max-width: 222rpx;
            padding:0 18px;
            height:20px;
            color: #FFFFFF;
            font-size:12px;
            background:rgba(251,80,84,1);
            border-radius:2px;
            &::after{
                content: '';
                width: 0px;
                height: 0px;
                border-top: 10px solid #fb5054;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                position: absolute;
                bottom:-10px;
                right: 50%;
              }
        }
        .text-copy{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 222rpx;
            padding:0 18px;
            height:20px;
            color: #FFFFFF;
            font-size:12px;
            background:#AAAAAA;
            border-radius:2px;
            &::after{
                content: '';
                width: 0px;
                height: 0px;
                border-top: 10px solid #AAAAAA;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                position: absolute;
                bottom:-10px;
                right: 50%;
              }
        }
        .bar{
            margin-top: 15px;
            width:100%;
            height:4px;
            background:rgba(238,238,238,1);
            border-radius:4px;
            .bar_length{
                background: #FB5054;
            }
        }
        .tips{
            display: flex;
            justify-content: center;
            align-items: center;
            height:18px;
            font-size:12px;
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:16px;
            margin: 16px auto;
        }
        .btn{
            display: flex;
            justify-content: center;
            align-items: center;
            width:100%;
            height: 44px;
            color: #FFFFFF;
            background:rgba(251,80,84,1);
            box-shadow:0px 2px 4px 0px rgba(0,0,0,0.1);
            border-radius:22px;
            margin-bottom: 20px;
        }
        .can_buy{
            display: flex;
            align-items: center;
            width: 100%;
            flex-direction: row;
            justify-content:center;
            .btn{
                display: flex;
                justify-content: center;
                align-items: center;
                width:100%;
                height: 44px;
                color: #FFFFFF;
                background:rgba(251,80,84,1);
                box-shadow:0px 2px 4px 0px rgba(0,0,0,0.1);
                border-radius:22px;
            }
            .invite{
                width:44%;
                height:44px;
                color: #FFFFFF;
                background:rgba(251,80,84,1);
                box-shadow:0px 2px 4px 0px rgba(0,0,0,0.1);
                border-radius:22px;
                display: flex;
                align-content: center;
                justify-content: center;
                text{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size:15px;
                }
            }
            .now_buy{
                color: #FFFFFF;
                font-size:15px;
                margin-left: 12%;
                display: flex;
                justify-content: center;
                align-items: center;
                width:44%;
                height:44px;
                background:rgba(170,170,170,1);
                box-shadow:0px 2px 4px 0px rgba(0,0,0,0.1);
                border-radius:22px;
            }
        }
        .btn2{
            display: flex;
            justify-content: start;
            flex-direction: row;
            width:100%;
            height: 44px;
            color: #FFFFFF;
            margin-bottom: 40px;
            .child_btn1{
                display: flex;
                justify-content: center;
                align-items: center;
                width:45%;
                height:44px;
                background:rgba(251,80,84,1);
                box-shadow:0px 2px 4px 0px rgba(0,0,0,0.1);
                border-radius:22px;
            }
            .child_btn2{
                margin-left: 10%;
                display: flex;
                justify-content: center;
                align-items: center;
                width:45%;
                height:44px;
                background:rgba(170,170,170,1);
                box-shadow:0px 2px 4px 0px rgba(0,0,0,0.1);
                border-radius:22px;
            }
        }
        .count_down{
            width: 84%;
            display: flex;
            margin:10px auto;
            justify-content: center;
            .text{
                display: flex;
                width:163px; 
                color: black;
                justify-content: center;
            }
            .tiem{
                display: flex;
                align-items: center;
            }
        }
        .person_number{
            position: relative;
            border-top: #CCCCCC 1px dotted;
            width:100%;
            background:rgba(255,255,255,1);
            border-radius:6px;
            .left{
                position: absolute;
                top: -10px;
                left: -20px;
                border-radius: 50%;
                width:20px;
                height:20px;
                background:rgba(243,243,243,1);
            }
            .right{
                position: absolute;
                top: -10px;
                right: -20px;
                border-radius: 50%;
                width:20px;
                height:20px;
                background:rgba(243,243,243,1);
            }
            .title{
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 10px;
            }
            .person_tips{
                display: flex;
                justify-content: center;
                align-items: center;
                height:16px;
                font-size:11px;
                font-family:PingFangSC;
                font-weight:400;
                color:rgba(170,170,170,1);
                line-height:16px;
            }
            .person_list{
                display: flex;
                flex-direction: column;
                .hero_box{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    width: 100%;
                    margin-bottom: 5px;
                    .hero_message{
                        display: flex;
                        flex-direction: row;
                        .head_img{
                            width:40px;
                            height:40px;
                            background:rgba(237,242,252,1);
                            border-radius: 50%;
                            image{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .message_box{
                            display: flex;
                            flex-direction: column;
                            margin-left: 5px;
                            .message_name{
                                display: flex;
                                font-weight:400;
                                align-items: center;
                                font-size: 12px;
                            }
                            .message_share{
                                display: flex;
                                align-items: center;
                                font-size: 12px;
                            }
                        }

                    }
                    .reduce_money{
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        font-size:12px;
                        flex: 1;
                        flex-wrap: nowrap;
                    }
                }

            }
    }
    }
    .img{
        width: 92%;
        margin: auto;
        image{
            width: 100%;
        }
    }
    .box_body{
        display: flex;
        position: fixed;
        background: rgba(17,17,17,.5);
        top: 0;
		bottom: 0;
		left: 0;
		right: 0;
        flex-direction: column;
        align-items: center;

        .rule_box{
            width: 84%;
            height: 60%;
            font-size: 13px;
            padding: 15px;
            background: #fff;
            border-radius: 6px;
            top: 84px;
            z-index: 999;
            margin-top: 79px;
            overflow: scroll;
        }
        .icon-close{
            color: #FFF;
            border-radius: 50%;
            bottom: 80px;
            border: 1px solid #fff;
            box-sizing: border-box;
            width: 27px;
            height: 27px;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .notice_box{
            display: flex;
            align-items: center;
            flex-direction: column;
            width:92%;
            height:340px;
            background:rgba(255,255,255,1);
            border-radius:6px;
            margin-top: 86px;
            padding:15px;
            .icon-xiaolian1{
                display: flex;
                font-size: 100px;
                align-items: center;
                color: #999999;
                height: 100px;
                margin-top: 30px;
            }
            .thanks{
                display: flex;
                justify-content: center;
                align-items: center;
                width:140px;
                font-size:15px;
                font-weight:600;
                color:rgba(51,51,51,1);
                line-height:24px;
                flex-wrap: wrap;
                margin-top:20px;
            }
            .true_btn{
                display: flex;
                justify-content: center;
                align-items: center;
                width:88%;
                height:50px;
                background:rgba(251,80,84,1);
                border-radius:6px;
                margin-top: 35px;
                color: #FFFFFF;
            }
            .gostore{
                display: flex;
                justify-content: center;
                height:18px;
                font-size:13px;
                font-weight:400;
                color:rgba(102,102,102,1);
                line-height:18px;
                margin-top: 20px;
            }
            .icon-kulian{
                display: flex;
                font-size: 100px;
                align-items: center;
                color: #999999;
                height: 100px;
                margin-top: 30px;
            }
            .tells{
                display: flex;
                justify-content: center;
                flex-direction: column;
                width:180px;
                height:48px;
                font-size:15px;
                font-weight:600;
                color:rgba(51,51,51,1);
                line-height:24px;
                margin-top: 20px;
                text{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .btn_gostore{
                margin-top: 39px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #FFFFFF;
                width:92%;
                height:50px;
                background:rgba(251,80,84,1);
                border-radius:6px;
            }
        }
        .share_box{
            position: absolute;
            bottom: -2px;
            width: 100%;
            height:172px;
            display: flex;
            flex-direction: column;
            .share_way{
                padding-top: 23px;
                width:100%;
                height:120px;
                display: flex;
                flex-direction: row;
                background: #ffffff;
                button::after {
                    border: none;
                  }
                .friends{
                    display: flex;
                    flex-direction: column;
                    justify-content: start;
                    align-items: center;
                    margin-left: 20%;
                    background: #fff;
                    .icon--weixin{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width:50px;
                        height:50px;
                        font-size: 25px;
                        border-radius: 50%;
                        background: green;
                        color: #2AB229;
                    }
                    .text{
                        margin-top: 8px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 0;
                        border: 0px;
                        height: 25px;
                        font-size: 14px;
                    }
                }
                .post{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-left: 20%;
                    margin-right: 20%;
                    .icon-tupian{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width:50px;
                        height:50px;
                        font-size: 25px;
                        border-radius: 50%;
                        background: green;
                        color: #2AB229;
                    }
                    .text{
                        margin-top: 8px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 14px;
                    }
                }
            }
            .exit{
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 0.75px;
                background: #ffffff;
            }
        }
    }
    //分享到朋友圈弹出
.share-img-box {
    background:rgba(0,0,0,.8);
    position: fixed;
    bottom: 0;
   top: 0;
   left: 0;
   right: 0;
    transition:all .3s linear;
  
    .imgs-box {
      background: #F3F3F3;
      border-radius: 10px;
      height: 93%;
      width: 90%;
      margin: 10px auto;

      overflow: hidden;
      .img{
        box-shadow:0px 4px 8px 0px rgba(155,155,155,0.5);
        border-radius: 6px;
        margin: 30px auto;
		height: 75%;
        box-sizing: border-box;
  
        image{
          vertical-align:middle;
          width: 100%;
		  height: 100%;
        }
      }
      .text {
        text-align: center;
        margin-top: 22px;
        font-size: 12px;
        color: #9B9B9B;
      }
      .save {
        background: @mainColor;
        height: 44px;
        line-height: 44px;
        color: #ffffff;
        text-align: center;
        border-radius: 10px;
        margin: 10px 20px;
      }
      i{
        position: absolute;
        top: 0px;
        right: 0px;
        color: #CCCCCC;
        font-size: 30px;
      }
    }
    &.cur{
      height: 100%;
  
    }
  }
  .new-module{
    background-color: #fff;
    margin:10px 0;
    .select-sku-box {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      justify-content: space-between;
      .title{
        width: 30px;
        color:#333333;
        font-weight: 700;
        font-size: 13px;
      }
      .sku-info {
        display: flex;
        color: #666;
        font-size: 12px;
        line-height: 17px;
      }
      .iconfont {
        font-size: 14px;
        color: #999999;
        margin-left: 5px;
      }
    }
    .new-addbox{
      width: 100%;
      image{
        width: 100%;
        vertical-align: middle;
      }
    }
  }
  .select_spec {
    font-size: 12px;
    padding: 12px 8px 50px 8px;

    .spec_line {
      display: flex;
      margin-bottom: 15px;

      .spec_title {
        padding-right: 11px;
        color: #c4c4c4;
        width: 50px;
        line-height: 35px;
      }


      .spec_list  {
        display: block;
        line-height:35px;
        color:#959595;
        font-size:15px;
      }

      .spec_block {
        display: inline-block;
        margin-top: 10px;
        margin-right: 10px;

        .spec_text {
          display: block;
          padding: 0 7px;
          height: 33px;
          line-height: 33px;
          min-width: 33px;
          border: 1px solid #DDDDDD;
          text-align: center;
          font-size: 12px;
          position: relative;


          .border-color {
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            border: 3px solid @mainColor;
          }
        }

        image {
          height: 100%;
          width: 100%;
        }

        .spec_icon {
          width: 35px;
          height: 35px;
          padding: 0;
        }

        &.disabled text {
          border: none;
          margin: 1px;

          &:before {
            content: '';
            position: absolute;
            background-color: #eee;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            opacity: 0.6;
          }

          &:after {
            content: '';
            position: absolute;
            border: 3px dashed #cfcfcf;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
          }
        }
      }

      .num_title {
        padding-right: 11px;
        color: #c4c4c4;
        width: 50px;
        line-height: 30px;
      }

      .num_value {
        display: flex;
        font-size: 0;

        text {
          display: block;
          border: 1px solid #e8e8e8;
          text-align: center;
          min-width: 28px;
          width: 28px;
          height: 28px;
          line-height: 28px;
          font-size: 12px;

          &.store {
            width: auto;
            border-color: #ffffff;
            margin-left: 10px;
          }
        }

        input {
          display: block;
          border: none;
          height: 100%;
          width: 100%;
          text-align: center;
          outline: none;
          font-size: 12px;
        }

        .none_border {
          width: 30px;
          border:1px solid #e8e8e8;
          border-left: none;
          border-right: none;
        }
      }
    }
  }
  .maks{
    position: fixed;
    bottom: 0;
    top: 0;
	left: 0;
	right: 0;
    background: rgba(0,0,0,.6);
    transition: opacity .3s ease;
    display: none;
  
    &.cur{
      display: block;
    }
  }
  /*选取规格部分*/

.select_goods_container {
    background: #ffffff;
    position: relative;
    z-index:100;
  
    .select_goods_cloese {
  
      position: absolute;
      top:12px;
      right:10px;
      width:20px;
      height:20px;
      background: transparent;
      z-index:4;
      overflow:visible;
  
    }
  
    .select_goods_cloese:before{
      position: absolute;
      top:9px;
      left:-1px;
      content: '';
      width:28px;
      height:2px;
      background: #2e2e2e;
      transform: rotate(45deg) ;
  
  
    }
  
    .select_goods_cloese:after{
      top:9px;
      left:-1px;
      position: absolute;
      content: '';
      width:28px;
      height:2px;
      background: #2e2e2e;
      transform: rotate(-45deg);
  
  
    }
  
    .select_goods_header{
      display: flex;
      align-items: center;
      position: relative;
      height: 60px;
  
      .img_box {
  
  
        position: absolute;
        left: 10px;
        bottom: 10px;
        width: 78px;
        height: 78px;
        border: 1px solid #e5e5e5;
        background: #f9f9f9;
        overflow: hidden;
  
        image {
          width:78px;
          height:78px;
          object-fit: fill;
        }
      }
  
  
      .price_item {
        font-size:18px;
        margin-left:20px;
        height:100%;
        margin-left: 100px;
        display:-webkit-flex;
        flex-direction: column;
        justify-content: center;
  
        text {
          display: block;
          text-align: left;
        }
  
        text:nth-child(1){
          font-weight:bold;
          color:#C1870C;
        }
  
        text:nth-child(2){
          font-size:14px;
          color:#6c6c6c;
          text-indent:3px
        }
      }
  
    }
  
    .select_spec {
      font-size: 12px;
      padding: 12px 8px 50px 8px;
  
      .spec_line {
        display: flex;
        margin-bottom: 15px;
  
        .spec_title {
          padding-right: 11px;
          color: #c4c4c4;
          width: 50px;
          line-height: 35px;
        }
  
  
        .spec_list  {
          display: block;
          line-height:35px;
          color:#959595;
          font-size:15px;
        }
  
        .spec_block {
          display: inline-block;
          margin-top: 10px;
          margin-right: 10px;
  
          .spec_text {
            display: block;
            padding: 0 7px;
            height: 33px;
            line-height: 33px;
            min-width: 33px;
            border: 1px solid #DDDDDD;
            text-align: center;
            font-size: 12px;
            position: relative;
  
  
            .border-color {
              position: absolute;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
              border: 3px solid @mainColor;
            }
          }
  
          image {
            height: 100%;
            width: 100%;
          }
  
          .spec_icon {
            width: 35px;
            height: 35px;
            padding: 0;
          }
  
          &.active text {
            /*&:before {
              content: '';
              position: absolute;
              border: 3px solid @mainColor;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
            }*/
          }
  
          &.disabled text {
            border: none;
            margin: 1px;
  
            &:before {
              content: '';
              position: absolute;
              background-color: #eee;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
              opacity: 0.6;
            }
  
            &:after {
              content: '';
              position: absolute;
              border: 3px dashed #cfcfcf;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
            }
          }
        }
  
        .num_title {
          padding-right: 11px;
          color: #c4c4c4;
          width: 50px;
          line-height: 30px;
        }
  
        .num_value {
          display: flex;
          font-size: 0;
  
          text {
            display: block;
            border: 1px solid #e8e8e8;
            text-align: center;
            min-width: 28px;
            width: 28px;
            height: 28px;
            line-height: 28px;
            font-size: 12px;
  
            &.store {
              width: auto;
              border-color: #ffffff;
              margin-left: 10px;
            }
          }
  
          input {
            display: block;
            border: none;
            height: 100%;
            width: 100%;
            text-align: center;
            outline: none;
            font-size: 12px;
          }
  
          .none_border {
            width: 30px;
            border:1px solid #e8e8e8;
            border-left: none;
            border-right: none;
          }
        }
      }
    }
  
  }
  .detail-popup  {
    width:100%;
    position: fixed;
    left: 0;
    bottom: 0px;
    z-index: 51;
    transform:translate3d(0,100,0);
  
  /*选取规格部分*/
  .select_spec {
    font-size: 12px;
    padding: 12px 8px 50px 8px;
  
    .spec_line {
      display: flex;
      margin-bottom: 15px;
  
      .spec_title {
        padding-right: 11px;
        color: #c4c4c4;
        width: 50px;
        line-height: 35px;
      }
      .spec_list  {
        display: block;
        line-height:35px;
        color:#959595;
        font-size:15px;
      }
  
      .spec_value {
        flex: 1;
        font-size: 0;
        margin-top: -10px;
  
        view{
          overflow: hidden;
        }
      }
  
      .spec_block {
        display: inline-block;
        margin-top: 10px;
        margin-right: 10px;
  
        text {
          display: block;
          padding: 0 7px;
          height: 33px;
          line-height: 33px;
          min-width: 20px;
          border: 1px solid #DDDDDD;
          text-align: center;
          font-size: 12px;
          position: relative;
        }
  
        image {
          height: 100%;
          width: 100%;
  
        } 
        &.disabled view {
          border: none;
          margin: 1px;
  
          &:before {
            content: '';
            position: absolute;
            background-color: #eee;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            opacity: 0.6;
  
          }
  
          &:after {
            content: '';
            position: absolute;
            border: 3px dashed #cfcfcf;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
          }
        }
      }
  
      .num_title {
        padding-right: 11px;
        color: #c4c4c4;
        width: 50px;
        line-height: 30px;
      }
      .purchase{
        line-height: 30px;
        color:#aaaaaa;
        margin-left: 10px;
      }
  
      //.num_value {
      //  display: flex;
      //  flex: 1;
      //  font-size: 0;
      //
      //  text {
      //    display: block;
      //    border: 1px solid #e8e8e8;
      //    text-align: center;
      //    min-width: 28px;
      //    width: 28px;
      //    height: 28px;
      //    line-height: 28px;
      //    font-size: 12px;
      //
      //    &.store {
      //      width: auto;
      //      border-color: #ffffff;
      //      margin-left: 10px;
      //    }
      //  }
      //
      //  input {
      //    display: block;
      //    border: none;
      //    height: 100%;
      //    width: 100%;
      //    text-align: center;
      //    outline: none;
      //  }
      //
      //  .none_border {
      //    width:50px;
      //    border-left: none;
      //    border-right: none;
      //  }
      //}
    }
  
    .button {
      height: 50px;
      line-height: 50px;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
     border-radius: 0;
      background:@mainColor;
      &.disabled {
        background: #C2C2C2;
      }
  
      &:after {
        border: none;
        border-radius: 0;
      }
    }
  }
  }
}