|
@@ -1,630 +1,804 @@
|
|
|
-.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: 1200px;
|
|
|
- height: auto;
|
|
|
- margin: 0 auto;
|
|
|
-}
|
|
|
-.preview-header{
|
|
|
- width: 100%;
|
|
|
- padding: 12px;
|
|
|
- background-color: #FFFFFF;
|
|
|
- margin: 10px 0 20px 0;
|
|
|
-}
|
|
|
-.preview-header .preview-banner{
|
|
|
- width: 450px;
|
|
|
- height: 548px;
|
|
|
- float: left;
|
|
|
- border:1px solid #EFEFEF;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.preview-header .preview-info{
|
|
|
- width: 704px;
|
|
|
- float: right;
|
|
|
- opacity: 0;
|
|
|
-}
|
|
|
-.preview-header .preview-info.active{
|
|
|
- opacity: 1;
|
|
|
-}
|
|
|
-.preview-header .preview-banner-big{
|
|
|
- width: 448px;
|
|
|
- height: 448px;
|
|
|
- float: left;
|
|
|
-}
|
|
|
-.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;
|
|
|
- /*border: 2px solid #FFF;*/
|
|
|
- margin-right: 9px;
|
|
|
- float: left;
|
|
|
- background-color: #fff;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.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: #e15616;
|
|
|
-}
|
|
|
-.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: 1px solid #e4e4e4;
|
|
|
- z-index: 9999;
|
|
|
- background: #FFFFFF;
|
|
|
-}
|
|
|
-.preview-header .preview-box img{
|
|
|
- width: 1096px;
|
|
|
- height: 1096px;
|
|
|
- margin-right: 10px;
|
|
|
- display: block;
|
|
|
-}
|
|
|
-.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{
|
|
|
- width: 100%;
|
|
|
- /*height: 326px;*/
|
|
|
- padding:16px 20px;
|
|
|
- background-color: #FDF8F6;
|
|
|
- border-radius: 2px;
|
|
|
- float: left;
|
|
|
- margin-top: 15px;
|
|
|
-}
|
|
|
-.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;
|
|
|
-}
|
|
|
-.preview-info .preview-info-main .info.price .fave-tag{
|
|
|
- width: 54px;
|
|
|
- height: 22px;
|
|
|
- display: inline-block;
|
|
|
- border-radius: 2px;
|
|
|
- background:linear-gradient(45deg,rgba(255,42,42,1) 0%,rgba(255,145,0,1) 100%);
|
|
|
- box-shadow:0px 3px 6px rgba(255,145,0,0.17);
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- line-height: 22px;
|
|
|
- color: #FFF;
|
|
|
- float: left;
|
|
|
- margin-right: 5px;
|
|
|
- margin-top: 4px;
|
|
|
-}
|
|
|
-.preview-info .preview-info-main .info.price .fave-text{
|
|
|
- font-size: 14px;
|
|
|
- color: #FF2A2A;
|
|
|
- }
|
|
|
-.preview-info .preview-info-main .info.price .fave-text .big{
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-.preview-info .preview-info-main .info.price .fave-text-none{
|
|
|
- font-size: 14px;
|
|
|
- color: #333;
|
|
|
- text-decoration: line-through;
|
|
|
-}
|
|
|
-.preview-info .preview-info-main .info .num-box{
|
|
|
- width: 91px;
|
|
|
- height: 24px;
|
|
|
- border-radius: 4px ;
|
|
|
- border: 1px solid #EEE;
|
|
|
- float: left;
|
|
|
- margin-top: 2px;
|
|
|
- margin-left: 20px;
|
|
|
-}
|
|
|
-.preview-info .preview-info-main .info .num-box span{
|
|
|
- display: inline-block;
|
|
|
- float: left;
|
|
|
- line-height: 24px;
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- height: 24px;
|
|
|
-}
|
|
|
-.preview-info .preview-info-main .info .num-box span:nth-child(2){
|
|
|
- width: 45px;
|
|
|
- border-right:1px solid #EEE;
|
|
|
- border-left:1px solid #EEE;
|
|
|
- color: #e15616;
|
|
|
-}
|
|
|
-.preview-info .preview-info-main .info .num-box span:nth-child(1),
|
|
|
-.preview-info .preview-info-main .info .num-box span:nth-child(3){
|
|
|
- width: 22px;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-.preview-info .preview-info-main .info.sever{
|
|
|
- margin-top: 10px;
|
|
|
- border-top: 1px dashed #F9DDD0;
|
|
|
- line-height: 40px;
|
|
|
- height: 40px;
|
|
|
-}
|
|
|
-.preview-info .preview-info-main .info.sever .label{
|
|
|
- line-height: 40px;
|
|
|
-}
|
|
|
-.preview-info .preview-info-main .info.sever .text{
|
|
|
- padding-left: 24px;
|
|
|
- background: url("/public/3.0/img/product/selected.png") left center no-repeat;
|
|
|
- margin-right: 15px;
|
|
|
-}
|
|
|
-.preview-info .preview-info-btn{
|
|
|
- width: 100%;
|
|
|
- height: 36px;
|
|
|
- float: left;
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
-.preview-info .preview-info-btn .info-btn{
|
|
|
- float: left;
|
|
|
- width: 154px;
|
|
|
- height: 36px;
|
|
|
- float: left;
|
|
|
- margin: 0 10px;
|
|
|
- border-radius: 2px;
|
|
|
- line-height: 36px;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-.preview-info .preview-info-btn .info-btn.buy{
|
|
|
- background-color: #e15616;
|
|
|
- color: #FFF;
|
|
|
-}
|
|
|
-.preview-info .preview-info-btn .info-btn.cart{
|
|
|
- background-color: #FFF;
|
|
|
- color: #e15616;
|
|
|
- border: 1px solid #e15616;
|
|
|
-}
|
|
|
-/*下半部分*/
|
|
|
-.preview-bottom{
|
|
|
- width: 100%;
|
|
|
- min-height:522px ;
|
|
|
-}
|
|
|
-.preview-bottom .preview-left{
|
|
|
- width: 890px;
|
|
|
- min-height:522px ;
|
|
|
- float: left;
|
|
|
- background: #fff;
|
|
|
-}
|
|
|
-.preview-bottom .preview-right{
|
|
|
- width: 290px;
|
|
|
- min-height:522px ;
|
|
|
- float: right;
|
|
|
-}
|
|
|
-.preview-bottom .preview-left .preview-tabs{
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- border-bottom: 1px solid #e15616;
|
|
|
-}
|
|
|
-.preview-bottom .preview-left .preview-tabs-item{
|
|
|
- width: 128px;
|
|
|
- height: 39px;
|
|
|
- line-height: 39px;
|
|
|
- background-color: #FFF;
|
|
|
- font-size: 16px;
|
|
|
- color:#333 ;
|
|
|
- float: left;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.preview-bottom .preview-left .preview-tabs-item.active{
|
|
|
- background-color: #e15616;
|
|
|
- color: #FFF;
|
|
|
-}
|
|
|
-.preview-bottom .preview-left .preview-section{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- padding:10px 20px;
|
|
|
-}
|
|
|
-.preview-bottom .preview-left .preview-section-html{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
-}
|
|
|
-.preview-bottom .preview-left .preview-section-html img{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- display: block;
|
|
|
-}
|
|
|
-.preview-bottom .preview-section .parameter-main {
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
- flex-direction: column;
|
|
|
- background-color: #FFFFFF;
|
|
|
- border: 1px solid #EFEFEF;
|
|
|
- border-radius: 4px;
|
|
|
-}
|
|
|
-.preview-bottom .preview-section .parameter-main .item-tabody {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- border-bottom: 1px solid #EFEFEF;
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
-.preview-bottom .preview-section .parameter-main .item-td{
|
|
|
- width: 238px;
|
|
|
- float: left;
|
|
|
- border-right: 1px solid #EFEFEF;
|
|
|
- color: #999999;
|
|
|
- padding:10px 20px;
|
|
|
- display: flex;
|
|
|
- flex: 2;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-.preview-bottom .preview-section .parameter-main .item-tr{
|
|
|
- width: 462px;
|
|
|
- float: left;
|
|
|
- color: #333333;
|
|
|
- padding:10px 20px;
|
|
|
- display: flex;
|
|
|
- flex: 8;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-.preview-bottom .preview-section .parameter-main .item-tr:last-child{
|
|
|
- border-bottom: none;
|
|
|
-}
|
|
|
-.preview-bottom .preview-section .parameter-text{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- margin-bottom: 30px;
|
|
|
-}
|
|
|
-.preview-bottom .preview-section .parameter-text-title{
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- line-height: 36px;
|
|
|
- text-align: left;
|
|
|
-}
|
|
|
-.preview-bottom .preview-section .parameter-text-p{
|
|
|
- font-size: 14px;
|
|
|
- color: #999;
|
|
|
- line-height: 24px;
|
|
|
- text-align: justify;
|
|
|
-}
|
|
|
-.preview-bottom .preview-section .none{
|
|
|
- font-size: 14px;
|
|
|
- color: #e15616;
|
|
|
- line-height: 36px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.preview-right .preview-shopinfo{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- background-color: #FFF;
|
|
|
- margin-bottom: 20px;
|
|
|
- float: left;
|
|
|
-}
|
|
|
-.preview-right .preview-shopinfo .title{
|
|
|
- width: 100%;
|
|
|
- padding: 0 15px;
|
|
|
- height: 40px;
|
|
|
- background-color: #FFA347;
|
|
|
- line-height: 40px;
|
|
|
- font-size: 16px;
|
|
|
- color: #FFF;
|
|
|
- float: left;
|
|
|
-}
|
|
|
-.preview-right .preview-shopinfo .shopinfo-main{
|
|
|
- width: 100%;
|
|
|
- padding: 0 15px;
|
|
|
- background-color: #FFF;
|
|
|
- float: left;
|
|
|
+@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:10px;background: #fff}
|
|
|
+#productRecommend li{float:left;width:153px !important;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:#E15616}
|
|
|
+#productRecommend li .item img{display:block;width:100%;height:100%}
|
|
|
+#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:#E15616;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: 12px;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ margin: 10px 0 20px 0;
|
|
|
+ overflow: hidden
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-header .preview-banner {
|
|
|
+ width: 452px;
|
|
|
+ height: 545px;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: #e15616;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: 1px solid #e4e4e4;
|
|
|
+ z-index: 9999;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-header .preview-box img {
|
|
|
+ width: 1096px;
|
|
|
+ height: 1096px;
|
|
|
+ margin-right: 10px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 {
|
|
|
+ padding: 16px 20px;
|
|
|
+ background-color: #f3f7fe;
|
|
|
+ border-radius: 2px;
|
|
|
+ float: left;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-main .info.price .fave-tag {
|
|
|
+ width: 54px;
|
|
|
+ height: 22px;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: linear-gradient(45deg, rgba(255, 42, 42, 1) 0%, rgba(255, 145, 0, 1) 100%);
|
|
|
+ box-shadow: 0px 3px 6px rgba(255, 145, 0, 0.17);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #FFF;
|
|
|
+ float: left;
|
|
|
+ margin-right: 5px;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-main .info.price .fave-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FF2A2A;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-main .info.price .fave-text .big {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-main .info.price .fave-text-none {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-main .info .num-box {
|
|
|
+ width: 91px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #EEE;
|
|
|
+ float: left;
|
|
|
+ margin-top: 2px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-main .info .num-box span {
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-main .info .num-box span:nth-child(2) {
|
|
|
+ width: 45px;
|
|
|
+ border-right: 1px solid #EEE;
|
|
|
+ border-left: 1px solid #EEE;
|
|
|
+ color: #e15616;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-main .info .num-box span:nth-child(1),
|
|
|
+ .preview-info .preview-info-main .info .num-box span:nth-child(3) {
|
|
|
+ width: 22px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-main .info.sever {
|
|
|
+ margin-top: 10px;
|
|
|
+ border-top: 1px dashed #F9DDD0;
|
|
|
+ line-height: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-main .info.sever .label {
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-main .info.sever .text {
|
|
|
+ padding-left: 24px;
|
|
|
+ background: url("/public/3.0/img/product/selected.png") left center no-repeat;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 36px;
|
|
|
+ float: left;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-btn .info-btn {
|
|
|
+ float: left;
|
|
|
+ width: 154px;
|
|
|
+ height: 36px;
|
|
|
+ float: left;
|
|
|
+ margin: 0 10px;
|
|
|
+ border-radius: 2px;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-btn .info-btn.buy {
|
|
|
+ background-color: #e15616;
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-info .preview-info-btn .info-btn.cart {
|
|
|
+ background-color: #FFF;
|
|
|
+ color: #e15616;
|
|
|
+ border: 1px solid #e15616;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*下半部分*/
|
|
|
+ .preview-bottom {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 522px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-left {
|
|
|
+ width: 890px;
|
|
|
+ min-height: 522px;
|
|
|
+ float: left;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-right {
|
|
|
+ width: 290px;
|
|
|
+ min-height: 522px;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-left .preview-tabs {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ border-bottom: 1px solid #e15616;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-left .preview-tabs-item {
|
|
|
+ width: 128px;
|
|
|
+ height: 39px;
|
|
|
+ line-height: 39px;
|
|
|
+ background-color: #FFF;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-left .preview-tabs-item.active {
|
|
|
+ background-color: #e15616;
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-left .preview-section {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-left .preview-section-html {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-left .preview-section-html img {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-section .parameter-main {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border: 1px solid #EFEFEF;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-section .parameter-main .item-tabody {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ border-bottom: 1px solid #EFEFEF;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-section .parameter-main .item-td {
|
|
|
+ width: 238px;
|
|
|
+ float: left;
|
|
|
+ border-right: 1px solid #EFEFEF;
|
|
|
+ color: #999999;
|
|
|
+ padding: 10px 20px;
|
|
|
+ display: flex;
|
|
|
+ flex: 2;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-section .parameter-main .item-tr {
|
|
|
+ width: 462px;
|
|
|
+ float: left;
|
|
|
+ color: #333333;
|
|
|
+ padding: 10px 20px;
|
|
|
+ display: flex;
|
|
|
+ flex: 8;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-section .parameter-main .item-tr:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-section .parameter-text {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-section .parameter-text-title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-section .parameter-text-p {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-bottom .preview-section .none {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #e15616;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-right .preview-shopinfo {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ background-color: #FFF;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-right .preview-shopinfo .title {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 15px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #FFA347;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-right .preview-shopinfo .shopinfo-main {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 15px;
|
|
|
+ background-color: #FFF;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-right .preview-shopinfo .shopinfo-main .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ border-bottom: 1px solid #f7f7f7;
|
|
|
+ float: left;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ line-height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-right .preview-shopinfo .shopinfo-main .shopinfo-text {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-right .preview-shopinfo .shopinfo-main .shopinfo-text h1 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-right .preview-shopinfo .shopinfo-main .shopinfo-text p {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-right .preview-shopinfo .shopinfo-main .shopinfo-text .star {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ margin: 0 4px;
|
|
|
+ background: url(/web/supplier/img/icon-star@2x.png) no-repeat center center;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-right .preview-shopinfo .shopinfo-main .shopinfo-btn {
|
|
|
+ width: 266px;
|
|
|
+ height: 36px;
|
|
|
+ background: rgba(225, 86, 22, 1);
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFF;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-right .preview-shopinfo .shopinfo-main .tel {
|
|
|
+ width: 120px;
|
|
|
+ height: 131px;
|
|
|
+ float: left;
|
|
|
+ padding-top: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-right .preview-shopinfo .shopinfo-main .tel p {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-right .preview-shopinfo .shopinfo-main .tel-icon {
|
|
|
+ width: 131px;
|
|
|
+ height: 131px;
|
|
|
+ float: right;
|
|
|
+ background: url(/web/supplier/img/icon-tel.png) no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .member-detail {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loginWithParam {
|
|
|
+ color: #FC4444;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dedArea-title {
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-bottom: 1px solid #E15616;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ line-height: 40px;
|
|
|
+ padding-left: 10px;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ border-bottom: 1px solid #E15616;
|
|
|
+ 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 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: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 #e15616;
|
|
|
+ opacity:1;
|
|
|
+ }
|
|
|
}
|
|
|
-.preview-right .preview-shopinfo .shopinfo-main .name{
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- border-bottom: 1px solid #f7f7f7;
|
|
|
- float: left;
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- line-height: 40px;
|
|
|
+
|
|
|
+
|
|
|
+/* 移动端*/
|
|
|
+@media screen and (max-width:768px){
|
|
|
+.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;}
|
|
|
+.preview-info{
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 3.3vw;
|
|
|
overflow: hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-.preview-right .preview-shopinfo .shopinfo-main .shopinfo-text{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-.preview-right .preview-shopinfo .shopinfo-main .shopinfo-text h1{
|
|
|
- font-size: 14px;
|
|
|
- color: #333;
|
|
|
- font-weight: normal;
|
|
|
- line-height: 24px;
|
|
|
-}
|
|
|
-.preview-right .preview-shopinfo .shopinfo-main .shopinfo-text p{
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- font-weight: normal;
|
|
|
- line-height: 24px;
|
|
|
-}
|
|
|
-.preview-right .preview-shopinfo .shopinfo-main .shopinfo-text .star{
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- display: block;
|
|
|
- float: left;
|
|
|
- margin: 0 4px;
|
|
|
- background: url(/web/supplier/img/icon-star@2x.png)no-repeat center center;
|
|
|
- margin-top: 4px;
|
|
|
-}
|
|
|
-.preview-right .preview-shopinfo .shopinfo-main .shopinfo-btn{
|
|
|
- width:266px;
|
|
|
- height:36px;
|
|
|
- background:rgba(225,86,22,1);
|
|
|
- opacity:1;
|
|
|
- border-radius:2px;
|
|
|
- margin: 0 auto;
|
|
|
- font-size: 14px;
|
|
|
- color: #FFFF;
|
|
|
- line-height: 36px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.preview-right .preview-shopinfo .shopinfo-main .tel{
|
|
|
- width: 120px;
|
|
|
- height: 131px;
|
|
|
- float: left;
|
|
|
- padding-top: 30px;
|
|
|
-}
|
|
|
-.preview-right .preview-shopinfo .shopinfo-main .tel p{
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- line-height: 24px;
|
|
|
- text-align: left;
|
|
|
-}
|
|
|
-.preview-right .preview-shopinfo .shopinfo-main .tel-icon{
|
|
|
- width: 131px;
|
|
|
- height: 131px;
|
|
|
- float: right;
|
|
|
- background: url(/web/supplier/img/icon-tel.png)no-repeat center center;
|
|
|
- background-size: contain;
|
|
|
-}
|
|
|
-.member-detail{
|
|
|
- color:#999999 ;
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-.loginWithParam {
|
|
|
- color: #FC4444;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-.dedArea-title {
|
|
|
- padding: 10px 20px;
|
|
|
- border-bottom: 1px solid #E15616;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-.recommended-item div {
|
|
|
- width: 152px !important;
|
|
|
- height: 153px;
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
-.recommended-item img{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.recommended-item p{
|
|
|
- color: #666666;
|
|
|
-}
|
|
|
+ background: #fff
|
|
|
|
|
|
-.main {
|
|
|
- width: 1200px;
|
|
|
- margin: 20px auto 0;
|
|
|
-}
|
|
|
- .title{
|
|
|
- width: 1200px;
|
|
|
- line-height: 40px;
|
|
|
- padding-left: 10px;
|
|
|
- margin: 0 auto;
|
|
|
- background-color: #fff;
|
|
|
- font-size: 16px;
|
|
|
- color: #333333;
|
|
|
- border-bottom: 1px solid #E15616;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-.mainContent{
|
|
|
- width: 100%;
|
|
|
- font-size: 0;
|
|
|
-}
|
|
|
-.mainContentLeft {
|
|
|
- width: 1200px;
|
|
|
- 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;
|
|
|
- width: 1200px;
|
|
|
- margin: auto;
|
|
|
-}
|
|
|
-.contentHtml img {
|
|
|
- display: block;
|
|
|
- /*width: 100%;*/
|
|
|
- /*height: 100%;*/
|
|
|
- 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: 5px;
|
|
|
}
|
|
|
+.preview-info-main{
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 2.8vw;
|
|
|
+ font-size: 3.4vw;
|
|
|
+ line-height: 7.5vw;
|
|
|
+ color: #93979F;
|
|
|
+ background: #f3f7fe;
|
|
|
+ border-radius: 2px;
|
|
|
+ position: relative;
|
|
|
+ margin: 3.5vw 0;
|
|
|
+ overflow: hidden
|
|
|
+}
|
|
|
+ .preview-info .preview-info-main .info {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
|
|
|
-.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);
|
|
|
-}
|
|
|
+ .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;
|
|
|
+ }
|
|
|
|
|
|
-.defaulImg div{
|
|
|
- border: none;
|
|
|
-}
|
|
|
-.show{
|
|
|
- opacity: 1 !important;
|
|
|
-}
|
|
|
-.ercode img{
|
|
|
- opacity: 0;
|
|
|
-}
|
|
|
-.hoverBrand:hover .brandMain{
|
|
|
- display: block;
|
|
|
-}
|
|
|
-.swiper-pagination{
|
|
|
- bottom: 0 !important;
|
|
|
-}
|
|
|
- .addImg{
|
|
|
- border:1px solid #e15616;
|
|
|
+ .preview-info .preview-info-main .info p {
|
|
|
+ float: left;
|
|
|
+ height: 100%;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .preview-info-title{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #22272e;
|
|
|
+ padding-top: 15px
|
|
|
}
|
|
|
+ .ercode{
|
|
|
+ padding: 2.8vw;
|
|
|
+ }
|
|
|
+ .ercode img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .main{
|
|
|
+ margin-top: 5vw;
|
|
|
+ padding: 2.8vw;
|
|
|
+ background: #fff
|
|
|
+ }
|
|
|
+}
|