|
@@ -115,24 +115,27 @@ li{list-style:none}
|
|
|
* 移动端
|
|
|
*/
|
|
|
@media screen and (max-width:768px){
|
|
|
+ .product-banner{width: 100%;height: 71vw;position: relative;background: #FFFFFF;}
|
|
|
+ .product-banner .product-banner-top{width: 100%;height: 57.3vw;background: url("/img/hot/icon-hottop-bg@h5.png");background-size: cover;}
|
|
|
+ .product-banner .product-banner-top .title{width: 100%;height: 17.7vw;line-height: 17.7vw;font-size:6.5vw;font-weight: bold;text-align: center;color: #FFFFFF;}
|
|
|
+ .product-banner-bot{width: 100%;height: auto;position: absolute;top: 17.7vw;left: 0;}
|
|
|
+ .product-banner-bot .inner{width: 100%;height: auto;box-sizing: border-box;padding: 0 6.4vw;}
|
|
|
+ #productHotBanner{width:100%;height:48vw;background: url("/img/hot/icon-hotpor-bg@h5.png");position:relative;box-sizing: border-box;padding: 2.4vw;}
|
|
|
+ #productHotBanner .swiper-wrapper{position:relative;height:100%;z-index:0}
|
|
|
+ #productHotBanner .swiper-wrapper .swiper-slide{width:100%;height: 41.4vw;position:relative;zoom:1;vertical-align:middle;overflow:hidden;}
|
|
|
+ #productHotBanner .swiper-wrapper .swiper-slide a{display: block;width: 100%;height: 100%;}
|
|
|
+ #productHotBanner .swiper-wrapper .swiper-slide-image{width: 41.4vw;height: 41.4vw;float: left;}
|
|
|
+ #productHotBanner .swiper-wrapper .swiper-slide-image img{width: 41.4vw;height: 41.4vw;display: block;}
|
|
|
+ #productHotBanner .swiper-wrapper .swiper-slide-info{width: 38.2vw;height: 41.4vw;float: right;box-sizing: border-box;padding: 4vw 2vw;position: relative;}
|
|
|
+ #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-name{width:100%;height: auto;margin-bottom:11vw;}
|
|
|
+ #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-name p{line-height: 6vw;font-size: 4.2vw;color: #4A4F58;text-align: center;}
|
|
|
+ #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-btn {width: 100%;height: 8vw;position: absolute;bottom: 0;left: 0;}
|
|
|
+ #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-btn .slide-btn{width: 26.4vw;height: 8vw;margin: 0 auto;display:block;background: #F94B4B;line-height: 8vw;text-align: center;font-size: 16px;color: #FFFFFF;}
|
|
|
+ #productHotBanner .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:1.5vw;left:0}
|
|
|
+ #productHotBanner .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:rgba(255, 180, 150, 0.39);;border-radius:.3vw}
|
|
|
+ #productHotBanner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1;background: #E15621;}
|
|
|
#productList{position: relative;}
|
|
|
- /*footer{display:none!important;}*/
|
|
|
- .sortBox{width:100%;margin:1px auto;box-sizing:border-box;background:#FFF;}
|
|
|
- .sortBox li{width:15vw;height:11.6vw;line-height:11.6vw;text-align:center;font-size:3.4vw;color:#93979F;position:relative;margin:0 5vw}
|
|
|
- .sortBox li.on,.sortBox li.up,.sortBox li.down{color:#E15616}
|
|
|
- .sortBox li:before,.sortBox li:after{position:absolute;right:0vw;content:'';width:0;height:0;border-style:solid}
|
|
|
- .sortBox li:before{border-width:0 .8vw .8vw .8vw;border-color:transparent transparent #BEC2C9 transparent;top:5vw}
|
|
|
- .sortBox li:after{border-width:.8vw .8vw 0 .8vw;border-color:#BEC2C9 transparent transparent transparent;top:6.5vw}
|
|
|
- .sortBox li:first-child:before,.sortBox li:first-child:after{display:none}
|
|
|
- .sortBox li.up:before{border-bottom-color:#E15616}
|
|
|
- .sortBox li.up:after{border-top-color:#E15616;opacity:.3}
|
|
|
- .sortBox li.down:after{border-top-color:#E15616}
|
|
|
- .sortBox li.down:before{border-bottom-color:#E15616;opacity:.3}
|
|
|
- .sortBox li.screen:before{border-width:0 0 0 0;border-color:transparent transparent transparent transparent;top:5vw;}
|
|
|
- .sortBox li.screen:after{border-width:0 0 0 0;border-color:transparent transparent transparent transparent;top:5vw}
|
|
|
- .sortBox li.screen .mIcon{width: 4vw;height: 4vw;display: block;position: absolute;top: 0.8vw;right: -2vw;}
|
|
|
- .sortBox li.screen .mIcon:before{width: 4vw;height: 4vw;background-position: -70vw -78vw;}
|
|
|
- .productList{margin: 3.2vw auto;width: 97vw;}
|
|
|
+ .productList{margin: 3.2vw auto;width: 97vw;margin-top: 0;}
|
|
|
.productList .productItem{width: 45.6vw;height: 70vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;position: relative;}
|
|
|
.productItem .page_main_type{width: 8.8vw;height: 8.8vw;text-align: justify;box-sizing: border-box;padding: 1vw;border-radius: 0 0 2vw 2vw;background-color: #33CCBF;font-size: 2.6vw;color: #FFFFFF;line-height: 3.4vw;position: absolute;top: 0;right: 2vw;}
|
|
|
.productItem .price em {display: block;height: 7vw;line-height: 7vw;color: #4A4F58;font-style: normal;float: left;}
|
|
@@ -171,29 +174,32 @@ li{list-style:none}
|
|
|
.productItem .price .svip-tag .svip-price span{color: #333}
|
|
|
.productItem .price .svip-tag .svip-price span:nth-child(2){margin-left: -0.4vw}
|
|
|
/*筛选项*/
|
|
|
- .product-brand-fiexd{width: 100%;height: 100%;position: fixed;top: 15vw;left: 0;background: rgba(0,0,0,0.6);z-index: 9999;}
|
|
|
- .product-brand{width: 100%;position: relative;top: 0;left: 0;background: #FFFFFF;z-index: 9999;padding: 3vw 0;border-radius: 0 0 1.6vw 1.6vw;box-sizing: border-box;}
|
|
|
- .product-brand .product-brand-name{width: 100%;float: left;line-height: 10.4vw;background: #F7F7F7;height: 10.4vw;padding:0 3vw;box-sizing: border-box;}
|
|
|
- .product-brand .product-brand-name .title{float: left;}
|
|
|
- .product-brand .product-brand-name .num{float: right;font-size: 3vw;}
|
|
|
- .product-brand .product-brand-name .num span{color: #E15621;}
|
|
|
- .product-brand-more{width: 100%;height: 32px;line-height: 32px;font-size: 3.4vw;float: left;color: #909090;text-align: center;box-sizing: border-box;}
|
|
|
- .product-brand-more .icon:before{background-position: -51.5vw 0px;width: 5.4vw;height: 6.7vw;right: 37vw;position: absolute;}
|
|
|
- .product-brand-more.show .icon:before{background-position: -43.5vw 0px;width: 5.4vw;height: 6.7vw;right: 37vw;position: absolute;}
|
|
|
- .product-brand-list{width: 100%;float: left;box-sizing: border-box;padding:3vw;height:22vw;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
|
|
|
- .product-brand-list.show{height: 44vw;}
|
|
|
- .product-brand-list .brand-list{width: 20.5vw;height: 7.2vw;padding: 0 2.4vw;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 7.2vw;;font-size: 3vw;color: #4A4F58;border-radius: 1vw;margin-right: 3.2vw;margin-bottom: 2.4vw;}
|
|
|
+ .product-brand-content{width: 100%;height: 18.6vw;box-sizing: border-box;padding: 3.3vw 2.8vw;position: relative;}
|
|
|
+ .product-brand{width: 100%;height: 100%;background: #FFFFFF;z-index: 9999;box-sizing: border-box;padding: 2vw 0;border-radius: 1vw;}
|
|
|
+ .product-brand-name{padding: 0 3vw;text-align: center;line-height: 8vw;font-size: 3.8vw;color: #333;float: left;font-weight: bold;}
|
|
|
+ .product-brand-more{width: 9vw;height: 100%;float: right;text-align: center;box-sizing: border-box;}
|
|
|
+ .product-brand-more .icon:before{background-position: -51.5vw 0px;width: 5.4vw;height: 6.7vw;right: 5vw;position: absolute;}
|
|
|
+ .product-brand-more.show .icon:before{background-position: -43.5vw 0px;width: 5.4vw;height: 6.7vw;right: 5vw;position: absolute;}
|
|
|
+ .product-brand-list{float: left;box-sizing: border-box;height:100%;}
|
|
|
+ .product-brand-list .brand-list{width: 20.5vw;height: 8vw;padding: 0 2.4vw;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 8vw;;font-size: 3vw;color: #4A4F58;margin-right: 3.2vw;}
|
|
|
.product-brand-list .brand-list:nth-child(4n){margin-right: 0;}
|
|
|
.product-brand-list .brand-list.checked{border-color: #E15621;}
|
|
|
.product-brand-list .brand-list.checked a{color: #E15621;}
|
|
|
.product-brand-list .brand-list a{width: 100%;height: 100%;display: block;text-align: center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
|
|
|
.product-brand-list .brand-list a:hover{color: #4A4F58;}
|
|
|
.product-brand-list .brand-list.checked a:hover{color: #E15621;}
|
|
|
- .product-screen{width: 100%;height: auto;padding:0 3vw;box-sizing: border-box;}
|
|
|
- .product-screen .sortBox-new{width: 100%;height: 9vw;line-height: 16px;box-sizing: border-box;padding: 2.5vw 0;cursor: pointer;margin-right: 10px;}
|
|
|
- .product-screen .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;float: right;}
|
|
|
- .product-screen .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
|
|
|
- .product-screen-btn{width: 100%;height: 11.2vw;float: left;margin-top: 4vw;}
|
|
|
- .product-screen-btn .sub-button{width: 64vw;height: 11.2vw;margin: 0 auto;line-height: 11.2vw;background-color: #E15621;text-align: center;font-size: 3.4ve;color: #FFFFFF;}
|
|
|
+ .product-brand-fiexd{width: 100%;height: 60vw;position: absolute;top: 14vw;left: 0;padding: 0 2.8vw;box-sizing: border-box;z-index: 999;}
|
|
|
+ .product-brand-fiexdcontent{width: 100%;height: 100%;background: #FFFFFF;box-shadow: 0 10px 14px 0 rgba(86, 119, 252, 0.2);padding: 3vw 0;box-sizing: border-box;}
|
|
|
+ .product-brand-scroll{width: 100%;height: 40vw;overflow: scroll;overflow-x: hidden;overflow-y:auto;box-sizing: border-box;padding: 0 2.4vw;}
|
|
|
+ .product-brand-scroll .brand-list{width: 20.5vw;height: 8vw;padding: 0 2.4vw;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 8vw;;font-size: 3vw;color: #4A4F58;margin-right: 2.4vw;margin-bottom: 2.4vw;}
|
|
|
+ .product-brand-scroll .brand-list:nth-child(4n){margin-right: 0;}
|
|
|
+ .product-brand-scroll .brand-list.checked{border-color: #E15621;}
|
|
|
+ .product-brand-scroll .brand-list.checked a{color: #E15621;}
|
|
|
+ .product-brand-scroll .brand-list a{width: 100%;height: 100%;display: block;text-align: center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
|
|
|
+ .product-brand-scroll .brand-list a:hover{color: #4A4F58;}
|
|
|
+ .product-brand-scroll .brand-list.checked a:hover{color: #E15621;}
|
|
|
+ .product-screen-btn{width: 100%;height: 10vw;float: left;margin-top: 4vw;}
|
|
|
+ .product-screen-btn .sub-button{width: 50vw;height: 10vw;margin: 0 auto;line-height: 10vw;background-color: #E15621;text-align: center;font-size: 3.4ve;color: #FFFFFF;}
|
|
|
+
|
|
|
|
|
|
}
|