|
@@ -0,0 +1,165 @@
|
|
|
|
+@charset "utf-8";
|
|
|
|
+li{list-style:none}
|
|
|
|
+/**
|
|
|
|
+ * PC端
|
|
|
|
+ */
|
|
|
|
+@media screen and (min-width:768px){
|
|
|
|
+ .search-text{float: left;margin-right: 20px;}
|
|
|
|
+ .search-text-brand{float: left;position: relative; height: 24px;padding: 0 24px 0 12px;line-height: 24px;box-sizing: border-box;border: 1px solid #DDDDDD;border-radius: 2px;text-align: center;font-size: 14px;color: #4A4F58;}
|
|
|
|
+ .search-text-brand a{color: #E15621;}
|
|
|
|
+ .search-text-brand .icon:before{background-position: -120px -657px;width: 24px;height: 24px;right: 0;position: absolute;cursor: pointer;}
|
|
|
|
+ .product-brand{width:1184px;margin:16px auto;box-sizing:border-box;min-height: 88px;padding:24px 12px 12px 12px;font-size:0;text-align:center;background:#FFF;position: relative;}
|
|
|
|
+ .product-brand .product-brand-name{width: 116px;float: left;border-right: 1px solid #F7F7F7;line-height: 44px;text-align: center;font-size: 16px;color: #4A4F58;}
|
|
|
|
+ .product-brand .product-brand-name.show{line-height: 88px;}
|
|
|
|
+ .product-brand-oper{width: 110px;height: 32px;position: absolute;right: 24px;top: 24px;}
|
|
|
|
+ .product-brand-more{width: 50px;height: 24px;line-height: 24px;font-size: 14px;color: #909090;text-align: left;transition: all 0.2s;cursor: pointer;box-sizing: border-box;float: left;position: relative;}
|
|
|
|
+ .product-brand-more .icon:before{background-position: -93px 2px;width: 20px;height: 32px;right: 0;position: absolute;}
|
|
|
|
+ .product-brand-more.show .icon:before{background-position: -123px 2px;width: 20px;height: 32px;right: 0;position: absolute;}
|
|
|
|
+ .product-brand-add{width: 56px;height: 24px;box-sizing: border-box;border: 1px solid #E2E7EF;float: right;font-size: 14px;color: #9AA5B5;line-height: 24px;text-align: center;cursor: pointer;}
|
|
|
|
+ .product-brand-list{width: 900px;float: left;box-sizing: border-box;padding:0 24px;height: 44px;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
|
|
|
|
+ .product-brand-list.show{height: 150px;}
|
|
|
|
+ .product-brand-list .brand-list{width: 90px;height: 32px;padding: 0 12px;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 32px;font-size: 16px;color: #4A4F58;border-radius: 2px;margin-right: 24px;margin-bottom: 12px;}
|
|
|
|
+ .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-brand-button{width: 100%;height: 32px;float: left;}
|
|
|
|
+ .product-brand-button .brand-button{width: 160px;height: 32px;margin: 0 auto;}
|
|
|
|
+ .product-brand-button .brand-button .btn{width: 64px;height: 32px;cursor: pointer;float: left;margin: 0 8px;border-radius: 2px; line-height: 32px;text-align: center;font-size: 14px;box-sizing: border-box;color: #FFFFFF;}
|
|
|
|
+ .product-brand-button .brand-button .btn.confirm.disabled{background-color: #E2E7EF;}
|
|
|
|
+ .product-brand-button .brand-button .btn.confirm{background-color: #E15621;}
|
|
|
|
+ .product-brand-button .brand-button .btn.cancel{background-color: #FFFFFF;border: 1px solid #E2E7EF;color: #4A4F58;}
|
|
|
|
+ .sortBox{width:1184px;margin:16px auto;box-sizing:border-box;text-align:center;background:#FFFFFF;position: relative;}
|
|
|
|
+ .sortBox li{display:inline-block;cursor:pointer;width:128px;height:64px;line-height:64px;font-size:16px;background:#FFFFFF;color:#93979F;position:relative;float: left;border-right: 1px solid #F7F7F7;}
|
|
|
|
+ .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#E15616}
|
|
|
|
+ .sortBox li:before,.sortBox li:after{position:absolute;right:35px;content:'';width:0;height:0;border-style:solid}
|
|
|
|
+ .sortBox li:before{border-width:0 5px 5px 5px;border-color:transparent transparent #BEC2C9 transparent;top:26px}
|
|
|
|
+ .sortBox li:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:34px}
|
|
|
|
+ .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 .sortBox-checked{width: 200px;height: 64px;position: absolute;top: 0;right: 0;box-sizing: border-box;padding: 18px;}
|
|
|
|
+ .sortBox-checked .sortBox-new{float: right;height: 28px;line-height: 16px;box-sizing: border-box;padding: 6px 0;display: flex;cursor: pointer;margin-right: 10px;}
|
|
|
|
+ .sortBox-checked .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
|
|
|
|
+ .sortBox-checked .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
|
|
|
|
+
|
|
|
|
+ .productList{width:1184px;margin:0 auto;box-sizing:border-box}
|
|
|
|
+ .productList .productItem{width:184px;height:268px;float:left;background:#fff;position:relative;margin:0 16px 16px 0;overflow:hidden;float:left}
|
|
|
|
+ .productList .productItem:nth-child(6n){margin-right:0}
|
|
|
|
+ .productList .productItem img{width:100%;height:164px}
|
|
|
|
+ .productList .productItem .name{display:block;padding:0 8px;margin-top:8px;height:40px;line-height:21px;vertical-align:middle;word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
|
|
|
|
+ .productItem .page_main_type{width: 34px;height: 34px;text-align: justify;box-sizing: border-box;padding: 5px;border-radius: 0 0 8px 8px;background-color: #33CCBF;font-size: 12px;color: #FFFFFF;line-height: 13px;position: absolute;top: 0;right: 10px;z-index: 88;}
|
|
|
|
+ .productItem .price{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 8px;height:54px;width:100%}
|
|
|
|
+ .productItem .price .icon:before{width:63px}
|
|
|
|
+ .productItem .price .icon.i5:before{background-position:-2px -832px}
|
|
|
|
+ .productItem .price .icon.i1:before{background-position:-2px -712px}
|
|
|
|
+ .productItem .price .icon.i2:before{background-position:-2px -742px}
|
|
|
|
+ .productItem .price .icon.i3:before{background-position:-2px -772px}
|
|
|
|
+ .productItem .price .icon.i4:before{background-position:-2px -802px}
|
|
|
|
+ .listTag{margin:12px 8px 0 0;padding:0 2px}
|
|
|
|
+ .productItem .image .icon{position:inherit}
|
|
|
|
+ .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#E15616}
|
|
|
|
+ .empty{margin-top:32px;background:#fff}
|
|
|
|
+ .empty p{color:#909090;font-size:14px}
|
|
|
|
+
|
|
|
|
+ .productItem .price em{font-weight: normal}
|
|
|
|
+ .productItem .price em.bold{font-weight: bold}
|
|
|
|
+ .productItem .price .price_text_tag{width: 100%;height: 22px;box-sizing: border-box;float: left;margin-top: 3px;}
|
|
|
|
+ .productItem .price .price_text_tag .listTag{margin: 0;float: left}
|
|
|
|
+ .productItem .price .price_text_tag .couponTag{margin: 0 4px 0 0;float: left}
|
|
|
|
+ .productItem .price .main_price_unde { width: 100%;height: 31px;line-height: 31px;font-size: 14px;color: #f94b4b;text-align: left;float: left;}
|
|
|
|
+ .productItem .price .main_price_show { width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #f94b4b;text-align: left;float: left;}
|
|
|
|
+ .productItem .price .main_price_show.none { color: #999999; text-decoration: line-through;}
|
|
|
|
+ .productItem .name .tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;display: inline-block;margin-right: 5px;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;}
|
|
|
|
+
|
|
|
|
+ .login-btn{font-size: 12px}
|
|
|
|
+ .listTitle{width:1184px;margin:0 auto 16px auto;box-sizing:border-box;padding:16px 30px;border-radius:0 0 2px 2px;background:#fc5331 url(/img/cart/promotions.png) no-repeat right;background-size:auto 100%;color:#FFF}
|
|
|
|
+ .listTitle h1{font-size:20px;line-height:42px;font-weight:normal;margin-bottom:16px}
|
|
|
|
+ .listTitle p{text-indent:1em;line-height:36px;font-size:16px}
|
|
|
|
+ .listTitle p em{color:#e15616;font-style:normal;display:inline-block;height:24px;line-height:24px;padding:0 10px;background:#FFF}
|
|
|
|
+ .productItem .name span.tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;display: inline-block;margin-right: 5px;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: 2px;}
|
|
|
|
+ /*会员标签*/
|
|
|
|
+ .productItem .price .price_text_tag {-webkit-transform: scale(0.8) translateX(-18px);-ms-transform: scale(0.8) translateX(-18px);transform: scale(0.8) translateX(-18px)}
|
|
|
|
+ .productItem .price .price_text_tag .svip-tag,
|
|
|
|
+ .productItem .price .price_text_tag .listTag{-webkit-transform: translateX(4px);-ms-transform: translateX(4px);transform: translateX(4px)}
|
|
|
|
+ .productItem .price .svip-tag{width:100%;height:22px;letter-spacing:0}
|
|
|
|
+ .productItem .price .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:30px;height:22px;text-align:center;line-height:22px;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
|
|
|
|
+ .productItem .price .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
|
|
|
|
+ .productItem .price .svip-tag .svip-price{z-index:1;position:relative;display:inline-block;padding-left:24px;padding-right:2px;margin-left:-27px;line-height:22px;background:#F0CB72;opacity:1;border-radius:2px;font-size:12px}
|
|
|
|
+ .productItem .price .svip-tag .svip-price span{color: #333}
|
|
|
|
+}
|
|
|
|
+/**
|
|
|
|
+* 移动端
|
|
|
|
+*/
|
|
|
|
+@media screen and (max-width:768px){
|
|
|
|
+ #productList{position: relative;}
|
|
|
|
+ /*footer{display:none!important;}*/
|
|
|
|
+ .productList{margin: 3.2vw auto;width: 97vw;}
|
|
|
|
+ .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;}
|
|
|
|
+ .productItem .price .mIcon:before{width:15.8vw;height: 5vw}
|
|
|
|
+ .productItem .price .mIcon.i5:before {background-position: -84vw -97.5vw;}
|
|
|
|
+ .productItem .price .mIcon.i1:before {background-position: -84vw -69.5vw;}
|
|
|
|
+ .productItem .price .mIcon.i2:before {background-position: -84vw -76.5vw;}
|
|
|
|
+ .productItem .price .mIcon.i3:before {background-position: -84vw -83.7vw;}
|
|
|
|
+ .productItem .price .mIcon.i4:before {background-position: -84vw -90.7vw;}
|
|
|
|
+ .productItem .price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
|
|
|
|
+ .productItem img {width: 45.6vw;height: 45.6vw;}
|
|
|
|
+ .productItem .name {display: block;padding: 0 1.2vw;height: 9.3vw;line-height: 4.8vw;font-size: 3.4vw;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
|
|
|
|
+ .price {padding: 2vw 1.2vw;overflow: hidden;}
|
|
|
|
+ .couponTag{padding:0 .4vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: .4vw;}
|
|
|
|
+ .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
|
|
|
|
+ .price_grade{width: 100%;float: left;margin-top: 2vw;}
|
|
|
|
+ .productItem .price .main_price_unde {width: 100%;height: 6.5vw;line-height: 6.5vw;font-size: 3.4vw;color: #4a4f58;text-align: left;float: left;}
|
|
|
|
+ .productItem .price .price_text_tag {width: 100%;box-sizing: border-box;}
|
|
|
|
+ .productItem .price .main_price_show{color: #f94b4b}
|
|
|
|
+ .productItem .name span.tag{width: 11.3vw;height: 4.3vw;line-height: 4.3vw;font-size: 2.8vw;display: inline-block;margin-right: 1.3vw;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: .25vw;}
|
|
|
|
+
|
|
|
|
+ .original-price{text-decoration:line-through}
|
|
|
|
+ .listTitle{width:100%;min-height:3.2vw;box-sizing:border-box;padding:3.3vw;background:#fc5331 url(/img/cart/promotions.png) no-repeat right;background-size:auto 100%;color:#FFF}
|
|
|
|
+ .listTitle h1{font-size:4vw;line-height:8vw;font-weight:normal}
|
|
|
|
+ .listTitle p{text-indent:1em;line-height:7vw;font-size:3.2vw}
|
|
|
|
+ .listTitle p em{color:#e15616;font-style:normal;display:inline-block;height:4.8vw;line-height:4.8vw;padding:0 1.5vw;background:#FFF}
|
|
|
|
+
|
|
|
|
+ /*会员标签*/
|
|
|
|
+ .productItem .price .price_text_tag {-webkit-transform: scale(0.8) translateX(-4.2vw);-ms-transform: scale(0.8) translateX(-4.2vw);transform: scale(0.8) translateX(-4.2vw)}
|
|
|
|
+ .productItem .price .price_text_tag .svip-tag,
|
|
|
|
+ .productItem .price .price_text_tag .listTag{-webkit-transform: translateX(1.2vw);-ms-transform: translateX(1.2vw);transform: translateX(1.2vw)}
|
|
|
|
+ .productItem .price .svip-tag{float: left; height:4.74vw;letter-spacing:0;overflow: hidden}
|
|
|
|
+ .productItem .price .svip-tag .svip-icon{position:relative;z-index:9;float: left; width:9.8vw;height:4.74vw;text-align:center;line-height:4.74vw;font-size:2.8vw;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
|
|
|
|
+ .productItem .price .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
|
|
|
|
+ .productItem .price .svip-tag .svip-price{z-index:1;position:relative;float: left;padding-left:5.4vw;padding-right:0.6vw;margin-left:-6vw;line-height:4.74vw;height: 4.74vw; background:#F0CB72;opacity:1;border-radius:2px;font-size:2.8vw}
|
|
|
|
+ .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-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;}
|
|
|
|
+
|
|
|
|
+}
|