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


.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  pxToRem(28px);
    .title{
        min-height: pxToRem(88px);
        line-height: pxToRem(88px);
        color: $mainFontC;
        font-size : pxToRem(28px);           
        border-bottom: 2px solid $borderC;
        
        span{
                color:#a0a0a0;
                 font-size:pxToRem(18px);
                // vertical-align: baseline;
            }
    }
    .detail{
        margin-top: pxToRem(20px);
        margin-bottom: pxToRem(20px);
        font-size: pxToRem(24px);
        line-height: pxToRem(36px);

        &.table{
            display: table;
            width: 100%;
            .row{
                display: table-row;
                .column{
                   display: table-cell;
                   padding: 0.4em 0.8em;
                   border:2px solid white;
                   font-size: pxToRem(24px);
                   background-color: $tableCellC;
                }
            }
        }

        // table {
        //       width: 100%;
        //       tbody td{
        //            padding: 0.4em 0.8em;
        //            border:3px solid white;
        //            font-size: pxToRem(24px);
        //            background-color: $tableCellC;
        //       }
        // }
    }
}
.gap-block{
    min-height: 30rem/$pxConvertRem;
    background-color: #f0f0f0;
}

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

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

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

    }

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


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

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

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

    border-bottom: 2px solid $borderC;
    span{
        display: table-cell;
        vertical-align: middle;
    }
    .vip-img{
        padding-right: pxToRem(22px);
        img{
            width: pxToRem(52px);
            height: pxToRem(32px);
        }
    }
    .vip-price{
        padding-right: pxToRem(55px);
    }
    .vip-price:last-child{
        padding-right: 0;
    }
}
.goodsDiscount{
    min-height: pxToRem(88px);
    padding-left:pxToRem(28px);
    padding-right:pxToRem(28px);
    font-size: pxToRem(28px);
    color: $mainFontC;
    line-height: pxToRem(88px);
    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: pxToRem(30px);
    background-color: #f0f0f0;

    .nav-tab{
        width: 100%;
    }

    .nav-tab {
        height: pxToRem(60px);
        padding: pxToRem(10px) 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: pxToRem(60px);
        line-height: pxToRem(60px);
        font-size: pxToRem(28px);
        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: pxToRem(24px);
            line-height: pxToRem(62px);
            color:$mainFontC;
            padding-left: pxToRem(28px);
            padding-right: pxToRem(18px);
        }
        .goods-spec,
        .comment-time{
            font-size: pxToRem(24px);
            line-height: pxToRem(62px);
        }
        .detail-content{
            font-size: pxToRem(28px);
            line-height: pxToRem(36px);
        }
        .goods-spec,
        .detail-content{
            color:$mainFontC;
        }
        .detail-content,
        .comment-time{
            padding-left: pxToRem(28px);

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

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

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

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

}

.content.hide {
    display: none;
}
}

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

        width: pxToRem(109px);
        height: pxToRem(68px);

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

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

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

    .detail-swiper{
        .swiper-wrapper{
            .swiper-slide{
                width: pxToRem(114px);
                div{
                    text-align: center;
                }
                div.cell{
                    background-color: $tableCellC;
                    padding:pxToRem(15px) 0;
                    border: 1px solid #fff;
                }
            }
        }
    }
}