$mainFontC:#444444;
$subFontC:#b0b0b0;
$borderC:#b0b0b0;
$tableCellC:#eee;

@function  px2rem($px){
    @return $px*1rem/$pxConvertRem;
}

.good-detail-page {

/* basic component */
.page-block{
    box-sizing:border-box;
    width: 100%;
    border-bottom: 2px solid $borderC;
    border-top: 2px solid $borderC;
    padding: 0  px2rem(28);
    .title{
        min-height: px2rem(88);
        line-height: px2rem(88);
        color: $mainFontC;
        font:{
            size : px2rem(28);           
        }
        border-bottom: 2px solid $borderC;
        
        span{
                color:#a0a0a0;
                font:{
                    size:px2rem(18);
                }
                // vertical-align: baseline;
            }
    }
    .detail{
        margin-top: px2rem(20);
        margin-bottom: px2rem(20);
        font-size: px2rem(24);
        line-height: px2rem(36);
        table {
              width: 100%;
              tbody td{
                   padding: 0.4em 0.8em;
                   border:3px solid white;
                   font-size: px2rem(24);
                   background-color: $tableCellC;
              }
        }
    }
}
.gap-block{
    min-height: 30rem/$pxConvertRem;
    background-color: #f0f0f0;
}

.banner-container{
    position: relative;
        // overflow: hidden;
        .is-new-lable{
            position: absolute;
            left: px2rem(108);
            top:px2rem(40);
            height: px2rem(35);
            width:px2rem(70);

            color:#fff;
            text-align: center;
            font-size: px2rem(20);
            line-height: px2rem(35);
            background-color: #7cd881;
            z-index: 16;
        }
    }
    .banner-top{
             // width: 100%;
             min-height: 660rem / $pxConvertRem;  
             overflow: hidden;
             position: relative;

             .swiper-pagination{
                position:absolute;
                bottom: px2rem(40);
                .swiper-pagination-bullet {
                  margin-right: 2px;
              }
              .swiper-pagination-bullet-active {
                background-color: #000;
            }
        }

    }

    .banner-swiper {
        min-height: px2rem(600);  
        min-width: px2rem(448);  
        margin: px2rem(30)  px2rem(96);
        // position: relative;
        overflow: hidden;
        ul {
            position: relative;
            height: 100%;
            li {
                float: left;
                height: 100%;             
            }
        }
    }


    .goodsName {
        min-height: px2rem(83);
        font-size: px2rem(28);
        color: #fff;
        padding-left: px2rem(25);
        padding-right: px2rem(25);
        line-height: px2rem(36);
        background-color: #515150;
    }

    .goodsSubtitle{
        min-height: px2rem(87);
        font-size: px2rem(24);
        line-height: px2rem(36);
        color:$subFontC;
        padding-left:px2rem(28);
        padding-right:px2rem(28);
        border-bottom: 2px solid $borderC;
        background-color: #f4f4f4;
    }

    .price-date{
       // width: 100%;
       color:$subFontC;
       min-height: px2rem(88);
       padding-left:px2rem(28);
       padding-right:px2rem(28);
       border-bottom: 2px solid $borderC;
   }
   .goodsPrice{
    float: left;
    font-size: px2rem(34.59);
    h1{
        display: inline-block;
        line-height: px2rem(88);
    }
    .currentPrice{
        color:red;
        margin-right: px2rem(10);
    }
    .previousPrice{
        text-decoration:line-through;
    }
}
.periodOfMarket{
 font-size: px2rem(24);
 float: right;
 h1{
    display: inline-block;
    line-height: px2rem(88);
}
}
.goodsName,
.goodsSubtitle{
        // width: 100%;
        display:table;
        span{
           display: table-cell;
           vertical-align: middle;
       }
   }
   .vipLevel {
    display: table;
    min-height: px2rem(88);
    padding-left:px2rem(28);
    padding-right:px2rem(28);
    font-size: px2rem(22);
    color: #999999;

    border-bottom: 2px solid $borderC;
    span{
        display: table-cell;
        vertical-align: middle;
    }
    .vip-img{
        padding-right: px2rem(22);
        img{
            width: px2rem(52);
            height: px2rem(32);
        }
    }
    .vip-price{
        padding-right: px2rem(55);
    }
    .vip-price:last-child{
        padding-right: 0;
    }
}
.goodsDiscount{
    min-height: px2rem(88);
    padding-left:px2rem(28);
    padding-right:px2rem(28);
    font-size: px2rem(28);
    color: $mainFontC;
    line-height: px2rem(88);
    border-bottom: 2px solid $borderC;
    .iconfont{
        // padding-right:28rem/$pxConvertRem;
        font-size: inherit;
        float: right;
        color:#e0e0e0;
        text-align: right;
    }
}

.feedback-list-page {
    padding-top: px2rem(30);
    background-color: #f0f0f0;

    .nav-tab{
        width: 100%;
    }

    .nav-tab {
        height: px2rem(60);
        padding: px2rem(10) 0;
        background-color: #fff;
        border-top: 2px solid $borderC;
        border-bottom: 2px solid $borderC;
    }

    .comment-nav, .consult-nav {
        box-sizing: border-box;
        float: left;
        width: 50%;
        height: px2rem(60);
        line-height: px2rem(60);
        font-size: px2rem(28);
        text-align: center;
        color: #ccc;

        &.focus {
            color: #000;
        }
    }

    .comment-nav {
        border-right: 2px solid #ccc;
    }

    .comment-content{
       .comment-content-main{
        background-color: #fff;
        border-bottom: 2px solid $borderC;
        .user-name{
            font-size: px2rem(24);
            line-height: px2rem(62);
            color:$mainFontC;
            padding-left: px2rem(28);
            padding-right: px2rem(18);
        }
        .goods-spec,
        .comment-time{
            font-size: px2rem(24);
            line-height: px2rem(62);
        }
        .detail-content{
            font-size: px2rem(28);
            line-height: px2rem(36);
        }
        .goods-spec,
        .detail-content{
            color:$mainFontC;
        }
        .detail-content,
        .comment-time{
            padding-left: px2rem(28);

        }
        .detail-content{
            padding-right: px2rem(28);

        }
        .comment-time{
            color:#c1c1c1;
        }
    }

    .comment-content-footer{
       min-height: px2rem(88);
       text-align: center;
       background-color: #fff;

       border-bottom: 2px solid $borderC;
       line-height: px2rem(88);
       font-size: px2rem(28);
       a{
           color: #e0e0e0;
           .iconfont{
             font-size: inherit;
         }
     }    
 }

}

.content.hide {
    display: none;
}
}

.enter-store{
    min-height: px2rem(100);
    display: table;
    a{
        display: table-cell;
        vertical-align: middle;
        text-align: left;
    }
    .store-logo{
       // padding-right: 35rem/$pxConvertRem;
       img{

        width: px2rem(109);
        height: px2rem(68);

        margin-left: 0;
        margin-right: px2rem(-25);
    }
}
    .store-name{
        font-size: px2rem(34);
        color:$mainFontC;
    }
    .store-link{
        font-size:px2rem(28) ;
        color:$subFontC;
        text-align: right;
        span{
            font-size: inherit;
        }
    }
}
    // .goods-desc{
    //     table{

    //     }
    // }
    .materials{
        .detail{
            img{
                    display: block;
                    overflow: hidden;
                    width: px2rem(90);
                    height: px2rem(120);
                    padding-right: px2rem(20);
                    float: left;
             }
            .material-desc{
                // float: left;
                font-size: px2rem(24);
            }
        }
    }

    .product-detail{
        .detail{
            img{
                margin-top: px2rem(20);
                width: px2rem(581);
                height: px2rem(772);
            }
        }
    }
}