caimei365-www/src/main/resources/static/css/flea-market/secondDetail.css

@media screen and (min-width:768px) {
    .recommendBox{margin-bottom:16px;overflow: hidden;}
    .recommendBox .hd{font-size:16px;color:#4A4F58;font-weight:bold;padding:16px 32px}
    #productRecommend{padding:16px;background: #fff}
    #productRecommend li{float:left;width:167px;height:205px;overflow:hidden;list-style: none;}
    #productRecommend li .item{width:153px;height:205px;margin:0 auto;line-height:22px}
    #productRecommend li .item a{display:block;width:100%;height:100%;color:#93979F}
    #productRecommend li .item a:hover{color:#FF5B00}
    #productRecommend li .item img{display:block;width:150px;height:153px;border: solid 1px #e2e7ef}
    #productRecommend li .item span{max-height:44px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
    #productRecommend .swiper-wrapper{height:205px;}
    #productRecommend .swiper-pagination{width:100%;height:14px;z-index:1;text-align:center;font-size:0;}
    #productRecommend .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
    #productRecommend .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#FF5B00;border-radius:2px}
    #productRecommend .swiper-pagination span.on{width:28px;opacity:1;}
    .preview-container {width: 100%;height: auto;background-color: #f6f6f6;margin-bottom: 20px;}
    .preview-container-top {width: 100%;height: 80px;background-color: #FFC684;font-size: 30px;color: #FFF;line-height: 80px;text-align: center;}
    .inner-container {width: 1184px;height: auto;margin: 0 auto;}
    .preview-header {padding: 16px;background-color: #FFFFFF;margin: 10px 0 20px 0;overflow: hidden;border-radius: 16px;}
    .preview-header .preview-banner {width: 452px;height: 545px;float: left;position: relative;}
    .preview-header .itemImg-buyFlag{ width: 36px;height: 36px;position: absolute;right: 10px;top: 10px;border-radius: 50%;background: #FFFFFF;}
    .preview-header .itemImg-buyFlag img{ width: 36px;height: 36px; display: block;}
    .preview-header .preview-info {width: 685px;float: right;opacity: 0;}
    .preview-header .preview-info.active {opacity: 1;}
    .preview-header .preview-banner-big {width: 452px;height: 452px;float: left;border: 1px solid #e4e4e4;border-radius: 8px;overflow: hidden;}
    .preview-header .preview-banner-big .preview-img {width: 100%;height: 100%;display: block;}
    .preview-header .preview-banner-big span {display: none;position: absolute;left: 0;top: 0;width: 215px;height: 215px;border: 1px solid #aaa;background: rgba(255, 208, 22, 0.4);opacity: .5;filter: alpha(opacity:50);cursor: move;}
    .preview-header .preview-banner-small {width: 100%;height: 98px;padding: 10px;float: left;}
    .preview-header .preview-banner-small .item {width: 78px;height: 78px;margin-right: 9px;float: left;background-color: #fff;cursor: pointer;list-style: none;opacity: .5;}
    .preview-header .preview-banner-small .item:last-child {margin-right: 0;}
    .preview-header .preview-banner-small .item img {width: 100%;height: 100%;display: block;-moz-transition: .5s;-webkit-transition: .5s;transition: .5s;}
    .preview-header .preview-banner-small .item.item-cur {border-color: #FF5B00;}
    .preview-header .preview-banner-small .item.item-cur img {opacity: 1;}
    .preview-header .preview-box {display: none;overflow: hidden;position: absolute;right: -555px;top: 0;width: 548px;height: 548px;border-radius: 8px; border: 1px solid #e4e4e4;z-index: 9999;background: #FFFFFF;}
    .preview-header .preview-box img {width: 1096px;height: 1096px;margin-right: 10px;display: block;max-width:none;}
    .preview-info .preview-info-title {width: 100%;height: auto;float: left;position: relative;}
    .preview-info .preview-info-title .info-p {height: auto;float: left;}
    .preview-info .preview-info-title .info-p.classly {font-size: 14px;color: #999;}
    .preview-info .preview-info-title .info-p.name {font-size: 18px;color: #333;font-weight: bold;line-height: 24px;height: auto;width: 100%;margin: 10px 0;}

    .preview-info .preview-info-title .info-p.label .label-s {font-size: 12px;background: #A69DFE;color: #fff;padding: 5px 10px;border-radius: 2px;margin: 0 10px 5px 0;display: inline-block;}
    .preview-info .preview-info-main {height: 348px; padding: 16px 20px;background-color: #f3f7fe;border-radius: 12px;float: left;margin-top: 10px;}
    .preview-info .preview-info-main .info {width: 50%;height: 30px;float: left;margin-bottom: 5px;line-height: 30px;}
    .preview-info .preview-info-main .info .label {width: 70px;height: 30px;float: left;display: block;font-size: 14px;line-height: 30px;text-align: right;color: #999;}
    .preview-info .preview-info-main .info p {float: left;height: 100%;padding-left: 20px;color: #4a4f58;}
    .preview-bottom .preview-left .preview-tabs-item.active {background-color: #FF5B00;color: #FFF;}
    .member-detail {color: #999999;font-size: 14px;}
    .loginWithParam {color: #FC4444;font-size: 14px;cursor: pointer;}
    .recommended-item div {width: 152px !important;height: 153px;margin-top: 10px;}
    .recommended-item img {width: 100%;height: 100%;}
    .recommended-item p {color: #666666;}
    .main {width: 1184px;margin: 20px auto 0;border-radius: 16px;overflow: hidden;}
    .title{ height: 40px;line-height: 40px;border-bottom: 1px solid #ffe6dc;font-size: 16px;color: #333333;background-color: #ffffff;}
    .title .li{display: inline-block;box-sizing: border-box;min-width: 130px;text-align: center;height: 100%;padding: 0 32px;text-align: center;background: #ffe6dc;color: #FF5B00;font-weight: bold;}
    .mainContent {width: 100%;font-size: 0;}
    .mainContentLeft {width: 100%;display: inline-block;background-color: #fff;vertical-align: top;}
    .Disclaimer {padding: 20px 10px;background-color: #fff;}
    .Disclaimer h3 {font-size: 14px;margin-bottom: 20px;color: #333333;}
    .Disclaimer p {font-size: 14px;color: #999999;padding: 0 10px}
    .contentHtml {font-size: 14px;padding: 0 20px 10px;text-align: left;margin: auto;}
    .contentHtml div{margin: 10px auto;}
    .contentHtml img {display: block;margin: 20px auto 0;max-width: 100%;}
    .yishou_img {position: absolute;top: 0;right: 0;transform: translate(-9%, 7%);width: 15%;opacity: 0;}
    .iconLogo {position: absolute;left: 0;top: 0;color: #fff;font-size: 14px;padding: 5px 12px;border-radius: 0 0 10px 0;}
    .brandMain {position: absolute;left: 30px;top: 29px;width: 90%;padding: 15px;border: 1px solid #F2F2F2;border-radius: 10px;background-color: #fff;cursor: pointer;line-height: 24px;letter-spacing: 1.5px;}
    .Brand img {vertical-align: -1px;margin-left: 1px;}
    .zheng-graphics {position: absolute;left: 60px;top: -9px;width: 15px;height: 15px;background-color: #fff;border: 1px solid rgba(234, 234, 234, 1); /*box-shadow: 2px -2px 5px -2px rgba(0, 0, 0, 0.16);*/transform: rotate(-45deg);border-left: 0;border-bottom: 0;z-index: 1;}
    .brandMain:hover {box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .16);}
    .brandMain:hover .zheng-graphics {box-shadow: 2px -2px 5px -2px rgba(0, 0, 0, 0.16);}
    .defaulImg div {border: none;}
    .show {opacity: 1 !important;}
    .ercode img {opacity: 0;}
    .hoverBrand:hover .brandMain {display: block;}
    .swiper-pagination {bottom: 0 !important;}
    .preview-header .preview-banner-small .item.addImg {border: 1px solid #FF5B00;opacity:1;border-radius: 4px;overflow: hidden;}
    .infotag {font-size: 10px;padding: 0 8px;height: 24px;line-height: 24px;text-align: center;display: inline-block;border-radius: 4px;flex: auto;box-sizing: border-box;}
    .ItemInfo tag {display: flex;}
    .infotag.news {border: solid 1px #f94b4b;color: #f94b4b;background-color: #fadbdb;font-weight: normal;}
    .infotag.brand {border: solid 1px #f9a24b;color: #f9a24b;background-color: #faefdb;font-weight: normal;}
    .infotag.sold {border: solid 1px #9aa5b5;color: #9aa5b5;background-color: #e3ebf7;font-weight: normal;}
    .infotag.other {border: solid 1px #1890f9;color: #1890f9;background-color: #e3ebf7;font-weight: normal;}
    .fave-text{color: #f94b4b;font-weight: bold;}
    .fave-text .big{font-size: 20px;}

}


/* 移动端*/
@media screen and (max-width:768px){
    #fleaMarket{ padding-top: 27vw; }
    footer{display: none; }
    .inner-container{width: 100%;overflow: hidden;}
    #swiperImage .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center}
    #swiperImage .swiper-wrapper img{width:auto;height:100vw;display:block}
    #imgShown{width: 100%; height: 100vw;position: relative;background: #fff}
    .preview-header .itemImg-buyFlag{ width: 8vw;height: 8vw;position: absolute;right: 10px;top: 10px;z-index: 9999;border-radius: 50%;background: #FFFFFF;}
    .preview-header .itemImg-buyFlag img{ width: 8vw;height: 8vw; display: block;}
    .preview-info{box-sizing: border-box;padding: 0 3.3vw;overflow: hidden;background: #fff}
    .preview-info-main{box-sizing: border-box;padding: 2.8vw;font-size: 3.4vw;line-height: 7.5vw;color: #93979F;background: #f3f7fe;border-radius: 2vw;position: relative;margin: 3.5vw 0;overflow: hidden}
    .preview-info .preview-info-main .info {width: 100%;height: 8vw;float: left;margin-bottom: 1.3vw;line-height: 8vw;}
    .preview-info .preview-info-main .info .label {width: 18.7vw;height: 8vw;float: left;display: block;font-size: 3.4vw;line-height: 8vw;text-align: right;color: #9aa5b5;}
    .preview-info .preview-info-main .info p {float: left;height: 100%;padding-left: 5.3vw;color: #22272e;}
    .preview-info-title{font-size: 3.6vw;color: #22272e;padding: 2vw 0;position: relative;line-height: 7vw;}
    .ercode{padding: 2.8vw;}
    .ercode img{width: 100%;height: 100%;}
    .main{margin-top: 5vw;padding: 2.8vw;background: #fff}
    .Disclaimer span{display: block;padding: 1.7vw 0;text-align: center;}
    .Disclaimer P{line-height: 6.4vw;}
    .contentHtml div{margin-top: 2.7vw;}
    .contentHtml img{width: 100%;}
    .info-p.name{color: #22272e;font-size: 4.2vw;}
    .infotag {font-size:  3vw;padding:0 2.7vw;height: 4.8vw;line-height:  4.8vw;text-align: center;display: inline-block;border-radius: .48vw;flex: auto;margin: 0 1.72vw 0 0;}
    .infotag.news {border: solid .27vw #f94b4b;color: #f94b4b;background-color: #fadbdb}
    .infotag.brand {border: solid .27vw #f9a24b;color: #f9a24b;background-color: #faefdb;}
    .infotag.sold {border: solid .27vw #9aa5b5;color: #9aa5b5;background-color: #e3ebf7;}
    .infotag.other {border: solid .27vw #1890f9;color: #1890f9;background-color: #e3ebf7;}
    .Disclaimer{background: #fef6f3;border-radius: 2.7vw;padding: 2.7vw;}
    .main .title{padding: 2.7vw 0;font-size: 4.27vw;color: #22272e}
    .contentHtml{margin-top: 2.7vw}
    .fave-text{color: #f94b4b;font-weight: bold;}
    .fave-text .big{font-size: 3.7vw;}
    .loginWithParam {color: #FC4444;font-size: 3.2vw;cursor: pointer;}
    .yishou_img {width: 14%;position: absolute;top: 2vw;right: 0;transform: translate(-9%, 7%);z-index: 1;}
    .recommendBox{margin-top:2vw;width:100%;background:#FFF}
    .recommendBox .hd{font-size:3.4vw;color:#E15621;font-weight:bold;padding:2.7vw;text-align:center}
    #productRecommend{width:100%;height:50vw;overflow:hidden;position:relative;box-sizing:border-box;padding:0 2.4vw}
    #productRecommend li{width:29.2vw!important;height:41.8vw;overflow:hidden;text-align:center;background:none}
    #productRecommend li .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;width:26.8vw;height:41.8vw;font-size:3.4vw}
    #productRecommend li .item img{display:block;width:100%;height:26.8vw}
    #productRecommend li .item span {color: #93979F;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-top: 2.6vw;}
}