add

src/main/resources/static/css/index/index_new.h5.css

@@ -3,7 +3,7 @@
 .mNavBox ul{width:100vw;margin:0 auto}
 .mNavBox .first{width:25vw;margin:0;transition:height .5s ease}
 .mNavBox .first .nav{display:block;padding:2.2vw 0;text-align:center;color:#4A4F58;font-size:3.4vw;line-height:6.4vw;white-space:nowrap}
-.mNavBox .first .nav span{display:inline-block;border-bottom:1px solid transparent}
+.mNavBox .first .nav span{display:inline-block;border-bottom:.27vw solid transparent}
 .mNavBox .first .nav:before{display:block;width:10.8vw;height:10.8vw;margin:0 auto}
 .mNavBox .first:nth-of-type(1) .nav:before{background-position:-43vw -27vw}
 .mNavBox .first:nth-of-type(2) .nav:before{background-position:-54vw -27vw}
@@ -70,7 +70,7 @@
     .section_page .page_main_price{
         width: 100%;
         box-sizing: border-box;
-        padding: 0 3.2vw;
+        padding: 2.7vw 3.2vw;
     }
     .section_page .page_main_price .price_text_tag{
         width: 100%;
@@ -190,7 +190,7 @@
     .section_right .right_item_title a{
         display: inline-block;
         float: right;
-        font-size: 12px;
+        font-size: 3.2vw;
         color: #909090;
         text-align: right;
     }
@@ -203,7 +203,7 @@
         height: 37.4vw;
         display: block;
         position: relative;
-        margin-bottom: 10px;
+        margin-bottom: 2.7vw;
     }
    .section_right .item_banner img{
        width: 100%;
@@ -235,7 +235,7 @@
    }
    .section_right .item_banner .statu p{
         float: left;
-        width: 50px;
+        width: 13.3vw;
         text-align: center;
         font-size:2.6vw;
         line-height: 5.8vw;
@@ -247,10 +247,10 @@
    }
    .section_right .item_banner .statu i {
         display: block;
-        width: 14px;
-        height: 14px;
+        width: 3.7vw;
+        height: 3.7vw;
         float: left;
-        margin:4px 2px 0 2px;
+        margin:1.1vw .54vw 0 .54vw;
     }
     .section_right .item_text .item_text_name{
         text-align: left;
@@ -280,7 +280,52 @@
         margin: 2.4vw auto;
         display: block;
     }
-
+     .section_page .page_main_price .icon:before { width:15.8vw;height: 5vw}
+    .section_page .page_main_price .price_grade_1:before{
+        background-position: -84vw -69.5vw;
+    }
+    .section_page .page_main_price .price_grade_2:before{
+        background-position: -84vw -76.5vw;
+    }
+    .section_page .page_main_price .price_grade_3:before{
+        background-position: -84vw -83.7vw;
+    }
+    .section_page .page_main_price .price_grade_4:before{
+         background-position: -84vw -90.7vw;
+    }
+    .section_page .page_main_price .price_grade_5:before{
+        background-position: -84vw -97.5vw;
+    }
+    .section_page .page_main_price .main_price_none .listTag{
+        padding: 0 2vw;
+        border: .27vw solid #ffe6dc;
+        background: none;
+        font-size: 2.8vw;
+        float: right;
+    }
+    .section_page .page_main_price .price_grade{
+        display: block;
+        height: 7vw;
+        line-height: 7vw;
+        color: #4A4F58;
+        font-style: normal;
+        float: left;
+    }
+    .section_page .page_main_price .price_grade .icon {
+        display: inline-block;
+        font-size: 0;
+        height: 5vw;
+        line-height: 5vw;
+        vertical-align: text-bottom;
+    }
+.section_page .page_main_tag {
+        color: #9aa5b5;
+        margin:2.7vw 3.2vw;
+        border: .27vw solid #e3ebf7;
+        display: inline-block;
+        padding: 0 1.3vw;
+        border-radius: .54vw;
+    }
 
 
 

src/main/resources/static/css/product/instruement-list.css

@@ -1,116 +1,66 @@
 @media screen and (min-width:768px){
-#productList{width: 1184px;margin:32px auto}
-.crumbs-nav{height: 40px}
-.crumbs-nav .crumbs-link{color:#4a4f58 }
-.sortBox .down{position:relative;margin:0 8px}
-.sortBox .down:before,.sortBox .down:after{position:absolute;right:32px;content:'';width:0;height:0;border-style:solid}
-.sortBox .down:before{border-width:0 5px 5px 5px;border-color:transparent transparent #BEC2C9 transparent;top:25px}
-.sortBox .down:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:31px}
-.sortBox .down.up:before{border-bottom-color:#E15616}
-.sortBox .down.up:after{border-top-color:#E15616;opacity:.3}
-.classifyBox .classification div{
-    display: inline-block;
-    line-height: 64px;
-    text-align: center;
-    color: #4a4f58;
-    font-size: 16px;
-    cursor: pointer;
-}
-.classifyBox .classification {
-    border-bottom: 1px solid #f7f7f7;
-}
-.classifyBox .classification .class-title{
-    border-right: 1px solid #f7f7f7;
-    width: 127px;
-}
-.classifyBox .classification .class-nav-main{
-}
-.classifyBox .classification .class-nav-main div.on{
-    color: #e15616;
-}
-.classifyBox .classification .class-nav-main div{
-    width: 127px;
-}
-.crumbs-nav >div{display: inline-block}
-.crumbs-nav-item{
-    display: inline-block;
-    padding: 0 12px;
-    border: 1px solid #cccccc;
-    line-height: 24px;
-    margin-right: 16px;
-    color: #909090;
-    border-radius: 2px;
-    cursor: pointer;
-}
-.crumbs-nav-item.on{
-color: #e15616;
-border: 1px solid #e15616;
-}
-.sortBox .on{background:#ffe6dc }
-.list-container{
-    margin-top: 32px;
-    width: 1200px;
-}
-.list-container ul li.productItem {
-    width: 184px;
-    height: 288px;
-    float: left;
-    background: #fff;
-    position: relative;
-    margin: 0 16px 16px 0;
-    overflow: hidden;
-    float: left;
-}
-.list-container ul li img {
-    width: 100%;
-    height: 184px;
-}
-.list-container ul li .name{
-    display: block;
-    padding: 0 16px;
-    height: 40px;
-    line-height: 21px;
-    vertical-align: middle;
-    word-break: break-all;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-inline-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical
-}
-.productItem .price{
-    border: 0;
-}
-.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;
-}
+    #productList{width: 1184px;margin:32px auto}
+    .crumbs-nav{height: 40px}
+    .crumbs-nav .crumbs-link{color:#4a4f58 }
+    .sortBox .down{position:relative;margin:0 8px}
+    .sortBox .down:before,.sortBox .down:after{position:absolute;right:32px;content:'';width:0;height:0;border-style:solid}
+    .sortBox .down:before{border-width:0 5px 5px 5px;border-color:transparent transparent #BEC2C9 transparent;top:25px}
+    .sortBox .down:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:31px}
+    .sortBox .down.up:before{border-bottom-color:#E15616}
+    .sortBox .down.up:after{border-top-color:#E15616;opacity:.3}
+    .classifyBox .classification div{display: inline-block;line-height: 64px;text-align: center;color: #4a4f58;font-size: 16px;cursor: pointer;}
+    .classifyBox .classification {border-bottom: 1px solid #f7f7f7;}
+    .classifyBox .classification .class-title{border-right: 1px solid #f7f7f7;width: 127px;}
+    .classifyBox .classification .class-nav-main{}
+    .classifyBox .classification .class-nav-main div.on{color: #e15616;}
+    .classifyBox .classification .class-nav-main div{width: 127px;}
+    .crumbs-nav >div{display: inline-block}
+    .crumbs-nav-item{display: inline-block;padding: 0 12px;border: 1px solid #cccccc;line-height: 24px;margin-right: 16px;color: #909090;border-radius: 2px;cursor: pointer;}
+    .crumbs-nav-item.on{color: #e15616;border: 1px solid #e15616;}
+    .sortBox .on{background:#ffe6dc }
+    .list-container{margin-top: 32px;width: 1200px;}
+    .list-container ul li.productItem {width: 184px;height: 288px;float: left;background: #fff;position: relative;margin: 0 16px 16px 0;overflow: hidden;float: left;}
+    .list-container ul li img {width: 100%;height: 184px;}
+    .list-container ul li .name{display: block;padding: 0 16px;height: 40px;line-height: 21px;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
+    .productItem .price{border: 0;}
+    .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;}
 }
 
 
 
 @media screen and (max-width:768px){
+    .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:1vw;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}
+    .list-container ul{margin: 3.2vw auto;width: 97vw;}
+    .list-container ul li{width: 45.6vw;height: 68vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;}
+    .productItem .price em {display: block;height: 7vw;line-height: 7vw;color: #4A4F58;font-style: normal;font-weight: bold;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 3.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: 2.7vw 3.2vw;overflow: hidden;}
+    .priceTag .tag, .listTag {padding: 0 2vw;border: .27vw solid #ffe6dc;background: none;font-size: 2.8vw;float: right;}
 
 }
 

src/main/resources/static/css/product/instruement.css

@@ -1,123 +1,109 @@
 @media screen and (min-width:768px) {
-#container {width: 1184px;margin: 32px auto;overflow: hidden;}
-#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;}
-#recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
-#recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
-#recommendBox .swiper-pagination span.on{width:28px;opacity:1;}
-.instrue-left {width: 900px;float: left;}
-.normal-nav{margin-top: 10px}
-.instrue-left .top-category .normal-nav .nav-list:hover{border: 1px solid #e15616;transform:translateY(-5px);box-shadow:0 6px 6px rgba(102,102,102,0.1),0 6px 6px rgba(102,102,102,0.1),0 6px 6px rgba(102,102,102,0.1);}
-.instrue-left .top-category .normal-nav .nav-list {border:1px solid #fff;display: inline-block;margin: 0 16px 16px 0;width: 132px;height: 88px;background: #fff;text-align: center;color: #4a4f58;font-size: 16px;line-height: 130px;cursor: pointer;transition: all 0.4s}
-.instrue-left .top-category .normal-nav .nav-list.active {border: 1px solid #e15616;color: #e15616;}
-.instrue-right {float: right;width: 252px;background: #fff;padding: 16px;}
-.instrue-right .wrap_tittle{padding-bottom: 10px;color: #4a4f58;font-size: 16px;font-weight: bold;border-bottom: 1px solid #f5f5f5;position: relative;}
-.instrue-right .hot-search{padding:24px 0px 0px 0px;}
-.instrue-right .hot-search ul .hot-list{display: inline-block;height: 32px;line-height: 32px;background: #f7f7f7;margin: 0 12px 12px 0;padding: 0 13px;color: #4a4f58;cursor: pointer;position: relative}
-.instrue-right .hot-search ul .hot-list:hover{background:#fef6f3;color: #e15616 }
-.productItem:hover .name{color: #e15616;}
-.productItem:hover{transform:translateY(-5px);box-shadow:0 12px 12px rgba(102,102,102,0.1),0 14px 14px rgba(102,102,102,0.1),0 16px 16px rgba(102,102,102,0.1);}
-.instrue-right .wrap_tittle .line{height: 2px;width: 16px;background: #e15616;display: block;position: absolute;bottom: 0}
-.floorTit {padding: 24px 0 16px 0;position: relative;}
-.floorTit h2, .floorTit h3 {font-weight: bold;color: #4a4f58;font-size: 24px;line-height: 40px;}
-.floorTit h5 {font-weight: normal;color:#93979f;font-size: 14px;line-height: 16px;}
-.hotList ul li.img01 {width: 524px;}
-.hotList ul li.img02{width: 344px;}
-.hotList .imgbaner{width: 884px;height: 120px;}
-.hotList ul li img {width: 100%;height: 100%;}
-.hotList ul{height: 560px;overflow: hidden;}
-.hotList ul.type{height: 704px;}
-.hotList ul.height{height: auto;}
-.hotList ul li {width: 164px;height: 268px;float: left;background: #fff;position: relative;margin: 0 16px 16px 0;overflow: hidden;float: left;transition: all 0.4s;}
-.swiper-container ul li{margin-right: 16px;}
-.swiper-container ul{height: auto;}
-.hotList ul li a{display: block;}
-.hotList ul .productItem img{width: 100%;height: 164px;}
-.productItem .name {display: block;padding: 0 16px;height: 40px;line-height: 21px;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
-.productItem .price{border: 0;}
-.listTag{margin: 12px 8px 0 0;padding: 0 2px;}
-.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;
-}
-.unfold{width: 83px;height: 32px;border: 1px solid #cccccc;line-height: 32px;margin: 10px auto;border-radius: 2px;color: #909090;padding-left: 13px;cursor: pointer;position: relative;}
-.icon.more:before{background-position: -93px 7px;width: 20px;height: 32px;right: 0;position: absolute}
-.unfold:hover{color: #E15616;border-color: #E15616;}
-.productItem .price em.p{color:#f94b4b ;}
-.icon.hot:before{width: 25px;height: 20px;background-position: -120px -550px;position: absolute;top: -10px;right: -10px}
-.brand{color: #9aa5b5;margin: 10px 16px;border: 1px solid #e3ebf7;display: inline-block;padding: 0 10px;border-radius: 2px}
+    #container {width: 1184px;margin: 32px auto;overflow: hidden;}
+    #recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;}
+    #recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+    #recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+    #recommendBox .swiper-pagination span.on{width:28px;opacity:1;}
+    .instrue-left {width: 900px;float: left;}
+    .normal-nav{margin-top: 10px}
+    .instrue-left .top-category .normal-nav .nav-list:hover{border: 1px solid #e15616;transform:translateY(-5px);box-shadow:0 6px 6px rgba(102,102,102,0.1),0 6px 6px rgba(102,102,102,0.1),0 6px 6px rgba(102,102,102,0.1);}
+    .instrue-left .top-category .normal-nav .nav-list {border:1px solid #fff;display: inline-block;margin: 0 16px 16px 0;width: 132px;height: 88px;background: #fff;text-align: center;color: #4a4f58;font-size: 16px;line-height: 130px;cursor: pointer;transition: all 0.4s}
+    .instrue-left .top-category .normal-nav .nav-list.active {border: 1px solid #e15616;color: #e15616;}
+    .instrue-right {float: right;width: 252px;background: #fff;padding: 16px;}
+    .instrue-right .wrap_tittle{padding-bottom: 10px;color: #4a4f58;font-size: 16px;font-weight: bold;border-bottom: 1px solid #f5f5f5;position: relative;}
+    .instrue-right .hot-search{padding:24px 0px 0px 0px;}
+    .instrue-right .hot-search ul .hot-list{display: inline-block;height: 32px;line-height: 32px;background: #f7f7f7;margin: 0 12px 12px 0;padding: 0 13px;color: #4a4f58;cursor: pointer;position: relative}
+    .instrue-right .hot-search ul .hot-list:hover{background:#fef6f3;color: #e15616 }
+    .productItem:hover .name{color: #e15616;}
+    .productItem:hover{transform:translateY(-5px);box-shadow:0 12px 12px rgba(102,102,102,0.1),0 14px 14px rgba(102,102,102,0.1),0 16px 16px rgba(102,102,102,0.1);}
+    .instrue-right .wrap_tittle .line{height: 2px;width: 16px;background: #e15616;display: block;position: absolute;bottom: 0}
+    .floorTit {padding: 24px 0 16px 0;position: relative;}
+    .floorTit h2, .floorTit h3 {font-weight: bold;color: #4a4f58;font-size: 24px;line-height: 40px;}
+    .floorTit h5 {font-weight: normal;color:#93979f;font-size: 14px;line-height: 16px;}
+    .hotList ul li.img01 {width: 524px;}
+    .hotList ul li.img02{width: 344px;}
+    .hotList .imgbaner{width: 884px;height: 120px;}
+    .hotList ul li img {width: 100%;height: 100%;}
+    .hotList ul{height: 560px;overflow: hidden;}
+    .hotList ul.type{height: 704px;}
+    .hotList ul.height{height: auto;}
+    .hotList ul li {width: 164px;height: 268px;float: left;background: #fff;position: relative;margin: 0 16px 16px 0;overflow: hidden;float: left;transition: all 0.4s;}
+    .swiper-container ul li{margin-right: 16px;}
+    .swiper-container ul{height: auto;}
+    .hotList ul li a{display: block;}
+    .hotList ul .productItem img{width: 100%;height: 164px;}
+    .productItem .name {display: block;padding: 0 16px;height: 40px;line-height: 21px;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
+    .productItem .price{border: 0;}
+    .listTag{margin: 12px 8px 0 0;padding: 0 2px;}
+    .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;
+    }
+    .unfold{width: 83px;height: 32px;border: 1px solid #cccccc;line-height: 32px;margin: 10px auto;border-radius: 2px;color: #909090;padding-left: 13px;cursor: pointer;position: relative;}
+    .icon.more:before{background-position: -93px 7px;width: 20px;height: 32px;right: 0;position: absolute}
+    .unfold:hover{color: #E15616;border-color: #E15616;}
+    .productItem .price em.p{color:#f94b4b ;}
+    .icon.hot:before{width: 25px;height: 20px;background-position: -120px -550px;position: absolute;top: -10px;right: -10px}
+    .brand{color: #9aa5b5;margin: 10px 16px;border: 1px solid #e3ebf7;display: inline-block;padding: 0 10px;border-radius: 2px}
 }
 
 
 @media screen and (max-width:768px) {
-.instrue-right{position: absolute;top: 27vw;width: 100%;background: #fff;padding: 3.2vw 0;}
-.instrue-right .wrap_tittle{padding: 0 3.2vw;}
-.instrue-right .hot-search{padding: 2.7vw;overflow: hidden;height: 3vw}
-.instrue-right .hot-search ul .hot-list{display: inline-block;background: #f7f7f7;color: #4a4f58;font-size: 3.2vw;padding: .7vw 2vw;margin: 0 2.4vw 2vw 0;position: relative;}
-.instrue-left{margin-top: 23vw;}
-.top-category{background: #fff}
-.top-category .nav-list{display: inline-block;width: 25%;height: 24vw;line-height: 32.8vw;text-align: center;}
-.floorTit {padding: 4.8vw 0 2.4vw 3.2vw;position: relative;}
-.floorTit h2, .floorTit h3 {font-weight: bold;color: #4a4f58;font-size:4.8vw;line-height: 9.7vw}
-.floorTit h5 {font-weight: normal;color:#93979f;font-size: 3.4vw;line-height: 4.3vw;}
-.floorCon{margin: auto;width: 97vw;}
-.floorCon .hotList ul li{width: 45.6vw;height: 68vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;}
-.hotList ul li.img01 img,.hotList ul li.img02 img{height: 100%}
-.hotList ul li img {width: 45.6vw;height: 45.6vw}
-.productItem .name{display: block;padding: 0 3.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;}
-.productItem .price em{display: block;height: 7vw;line-height: 7vw;color: #4A4F58;font-style: normal;font-weight: bold;float: left;}
-.unfold{width: 20vw;height: 6.4vw;margin: 5vw auto;border: .27vw solid #cccccc;color: #909090;font-size: 3vw;line-height: 6.4vw;text-align: center;border-radius: .54vw}
-.productItem .price .mIcon:before{width:15.8vw;height: 5vw}
-.productItem .price .mIcon.i5:before {
-    background-position: -2px -832px;
-}
-.productItem .price .mIcon.i1:before {
-    background-position: -315px -260px;
-}
-.productItem .price .mIcon.i2:before {
-    background-position: -315px -287px;
-}
-.productItem .price .mIcon.i3:before {
-    background-position: -315px -314px;
-}
-.productItem .price .mIcon.i4:before {
-    background-position: -315px -340px;
-}
-#swiper-container{width:100%;height:48vw;overflow:hidden;position:relative}
-#swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
-#swiper-container .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center;background:#fff;}
-#swiper-container .swiper-wrapper img{width:auto;height:48vw;display:block;max-width:none;}
-#swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{display:none}
-#swiper-container .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:1.5vw;left:0}
-#swiper-container .swiper-pagination .swiper-pagination-bullet{display:block;width:2vw;border-width:1vw 1px;border-color:transparent;cursor:pointer;background:none;font-size:0;opacity:.2}
-#swiper-container .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#FFF;border-radius:.3vw}
-#swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
+    .instrue-right{position: absolute;top: 27vw;width: 100%;background: #fff;padding: 3.2vw 0;}
+    .instrue-right .wrap_tittle{padding: 0 3.2vw;}
+    .instrue-right .hot-search{padding: 2.7vw;overflow: hidden;height: 3vw}
+    .instrue-right .hot-search ul .hot-list{display: inline-block;background: #f7f7f7;color: #4a4f58;font-size: 3.2vw;padding: .7vw 2vw;margin: 0 2.4vw 2vw 0;position: relative;}
+    .instrue-left{margin-top: 23vw;}
+    .top-category{background: #fff}
+    .top-category .nav-list{display: inline-block;width: 25%;height: 24vw;line-height: 32.8vw;text-align: center;}
+    .floorTit {padding: 4.8vw 0 2.4vw 3.2vw;position: relative;}
+    .floorTit h2, .floorTit h3 {font-weight: bold;color: #4a4f58;font-size:4.8vw;line-height: 9.7vw}
+    .floorTit h5 {font-weight: normal;color:#93979f;font-size: 3.4vw;line-height: 4.3vw;}
+    .floorCon{margin: auto;width: 97vw;}
+    .floorCon .hotList ul li{width: 45.6vw;height: 68vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;}
+    .hotList ul li.img01 img,.hotList ul li.img02 img{height: 100%}
+    .hotList ul li img {width: 45.6vw;height: 45.6vw}
+    .productItem .name{display: block;padding: 0 3.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;}
+    .productItem .price em{display: block;height: 7vw;line-height: 7vw;color: #4A4F58;font-style: normal;font-weight: bold;float: left;}
+    .unfold{width: 20vw;height: 6.4vw;margin: 5vw auto;border: .27vw solid #cccccc;color: #909090;font-size: 3vw;line-height: 6.4vw;text-align: center;border-radius: .54vw}
+    .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;}
+    #swiper-container{width:100%;height:48vw;overflow:hidden;position:relative}
+    #swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
+    #swiper-container .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center;background:#fff;}
+    #swiper-container .swiper-wrapper img{width:auto;height:48vw;display:block;max-width:none;}
+    #swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{display:none}
+    #swiper-container .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:1.5vw;left:0}
+    #swiper-container .swiper-pagination .swiper-pagination-bullet{display:block;width:2vw;border-width:1vw 1px;border-color:transparent;cursor:pointer;background:none;font-size:0;opacity:.2}
+    #swiper-container .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#FFF;border-radius:.3vw}
+    #swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
 
-.price {padding: 2.7vw 3.2vw;overflow: hidden;}
-.productItem  .price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
-.icon.hot:before{width: 5.3vw;height:4.5vw;background-position: -53.9vw -69.3vw;position: absolute;top: -2.7vw;right: -2.7vw;}
-.priceTag .tag, .listTag{padding: 0 2vw;border: .27vw solid #ffe6dc;background: none;font-size: 2.8vw;float: right;}
-.brand{color: #9aa5b5;margin: 10px 16px;border: .27vw solid #e3ebf7;display: inline-block;padding: 0 5px;border-radius: .54vw}
-.floorCon .hotList .imgbaner{width: 93.6vw;height: 24vw;margin:1.3vw auto}
-.floorCon .hotList .imgbaner img{width: 100%;height: 100%;}
-.hotList ul {height: 140vw;overflow: hidden;}
-.hotList ul.type{height: 167vw}
-.open.mIcon:before{
-    width: 5.4vw;
-    height: 5.4vw;
-    background-position: -51vw 0px;
-}
-.instrue-right .hot-search ul{width: 90%;float: left}
-.instrue-right .hot-search div{float: right;width: 10%;text-align: center}
+    .price {padding: 2.7vw 3.2vw;overflow: hidden;}
+    .productItem  .price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
+    .icon.hot:before{width: 5.3vw;height:4.5vw;background-position: -53.9vw -69.3vw;position: absolute;top: -2.7vw;right: -2.7vw;}
+    .priceTag .tag, .listTag{padding: 0 2vw;border: .27vw solid #ffe6dc;background: none;font-size: 2.8vw;float: right;}
+    .brand{color: #9aa5b5;margin: 2.7vw 3.2vw;border: .27vw solid #e3ebf7;display: inline-block;padding: 0 1.3vw;border-radius: .54vw}
+    .floorCon .hotList .imgbaner{width: 93.6vw;height: 24vw;margin:1.3vw auto}
+    .floorCon .hotList .imgbaner img{width: 100%;height: 100%;}
+    .hotList ul {height: 140vw;overflow: hidden;}
+    .hotList ul.type{height: 167vw}
+    .open.mIcon:before{width: 5.4vw;height: 5.4vw;background-position: -51vw 0px;}
+    .instrue-right .hot-search ul{width: 90%;float: left}
+    .instrue-right .hot-search div{float: right;width: 10%;text-align: center}
 }

src/main/resources/static/css/product/produce-list.css

@@ -111,6 +111,32 @@
 
 
 @media screen and (max-width:768px){
+    .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:1vw;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}
+    .list-container ul{margin: 3.2vw auto;width: 97vw;}
+    .list-container ul li{width: 45.6vw;height: 68vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;}
+    .productItem .price em {display: block;height: 7vw;line-height: 7vw;color: #4A4F58;font-style: normal;font-weight: bold;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 3.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: 2.7vw 3.2vw;overflow: hidden;}
+    .priceTag .tag, .listTag {padding: 0 2vw;border: .27vw solid #ffe6dc;background: none;font-size: 2.8vw;float: right;}
+
 
 }
 

src/main/resources/static/css/product/produce.css

@@ -467,7 +467,7 @@
         width: 5.4vw;
         height: 5.4vw;
         background-position: -51vw 0px;
-}
+    }
     .section_container_left{
         margin-top: 31vw;
     }
@@ -552,7 +552,7 @@
     .section_page .page_main_price{
         width: 100%;
         box-sizing: border-box;
-        padding: 0 3.2vw;
+        padding: 2.7vw 3.2vw;
     }
     .section_page .page_main_price .price_text_tag{
         width: 100%;
@@ -617,5 +617,52 @@
     .section_page .section_page_main.max{
         height:auto;
     }
+    .section_page .page_main_tag{
+        color: #9aa5b5;
+        margin: 2.7vw 3.2vw;
+        border: .27vw solid #e3ebf7;
+        display: inline-block;
+        padding: 0 1.3vw;
+        border-radius: .54vw
+    }
+    .section_page .page_main_price .price_grade{
+        display: block;
+        height: 7vw;
+        line-height: 7vw;
+        color: #4A4F58;
+        font-style: normal;
+        float: left;
+    }
+    .section_page .page_main_price .price_grade .icon{
+        display: inline-block;
+        font-size: 0;
+        height: 5vw;
+        line-height: 5vw;
+        vertical-align: text-bottom
+    }
+    .section_page .page_main_price .icon:before { width:15.8vw;height: 5vw}
+    .section_page .page_main_price .price_grade_1:before{
+        background-position: -84vw -69.5vw;
+    }
+    .section_page .page_main_price .price_grade_2:before{
+        background-position: -84vw -76.5vw;
+    }
+    .section_page .page_main_price .price_grade_3:before{
+        background-position: -84vw -83.7vw;
+    }
+    .section_page .page_main_price .price_grade_4:before{
+         background-position: -84vw -90.7vw;
+    }
+    .section_page .page_main_price .price_grade_5:before{
+        background-position: -84vw -97.5vw;
+    }
+    .section_page .page_main_price .main_price_none .listTag{
+        padding: 0 2vw;
+        border: .27vw solid #ffe6dc;
+        background: none;
+        font-size: 2.8vw;
+        float: right;
+    }
+
 
 }

src/main/resources/templates/product/instruelist.html

@@ -12,6 +12,7 @@
 
 <!-- 商品列表 -->
 <div id="productList">
+    <template v-if="isPC">
     <div class="crumbs-nav">
         <div class="crumbs-link"> 筛选条件： </div>
         <div  class="crumbs-nav-main">
@@ -19,8 +20,8 @@
             <div class="crumbs-nav-item on" @click="remove" v-if="twoclassflag">{{twoclassName}} x</div>
         </div>
     </div>
-     <div  id="listClassify" class="classifyBox">
-        <div class="classification">
+     <div  id="listClassify" class="classifyBox"  >
+        <div class="classification" >
             <div class="class-title">分类</div>
             <div class="class-nav-main">
                 <div v-for="item in classify" @click="oneclass(item)" :class="{'on':item.smallTypeID==smallTypeID}">{{item.name}}</div>
@@ -33,7 +34,7 @@
             </div>
         </div>
         <div class="sortBox classification">
-            <div class="class-title" :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</div>
+            <div class="class-title" @click="toSortList('',1)">综合</div>
                 <div class="class-nav-main">
                 <template>
                     <div class="down" @click="toSortList('sales',0)"><span>销量</span></div>
@@ -47,6 +48,35 @@
                 </div>
         </div>
      </div>
+     </template>
+     <template v-else>
+          <div class="sortBox">
+            <ul class="mfc">
+                <li :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</li>
+                <template>
+                    <li v-if="params.sortField == 'sales' && params.sortType == 1" class="down"
+                        @click="toSortList('sales',0)"><span>销量</span></li>
+                    <li v-else-if="params.sortField == 'sales' && params.sortType == 0" class="up"
+                        @click="toSortList('sales',1)"><span>销量</span></li>
+                    <li v-else @click="toSortList('sales',0)"><span>销量</span></li>
+                </template>
+                <template>
+                    <li v-if="params.sortField == 'favorite' && params.sortType == 1" class="down"
+                        @click="toSortList('favorite',0)"><span>人气</span></li>
+                    <li v-else-if="params.sortField == 'favorite' && params.sortType == 0" class="up"
+                        @click="toSortList('favorite',1)"><span>人气</span></li>
+                    <li v-else @click="toSortList('favorite',0)"><span>人气</span></li>
+                </template>
+                <template>
+                    <li v-if="params.sortField == 'price' && params.sortType == 1" class="down"
+                        @click="toSortList('price',0)"><span>价格</span></li>
+                    <li v-else-if="params.sortField == 'price' && params.sortType == 0" class="up"
+                        @click="toSortList('price',1)"><span>价格</span></li>
+                    <li v-else @click="toSortList('price',0)"><span>价格</span></li>
+                </template>
+            </ul>
+        </div>
+     </template>
     <template>
         <div class="list-container">
             <ul class="clear mfw">
@@ -54,7 +84,7 @@
                     <a class="image" :href="'/product-'+p.id+'.html'">
                      <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
                      <p class="name" v-html="p.name"></p>
-                     <div class="price mfhc">
+                     <div class="price">
                         <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
                             <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
                             <template v-if="p.priceFlag==1">

src/main/resources/templates/product/produce-list.html

@@ -12,41 +12,71 @@
 
 <!-- 商品列表 -->
 <div id="productList">
-    <div class="crumbs-nav">
-        <div class="crumbs-link"> 筛选条件： </div>
-        <div  class="crumbs-nav-main">
-            <div class="crumbs-nav-item" v-if="termsNameflag">{{termsName}}</div>
-            <div class="crumbs-nav-item on" @click="remove" v-if="twoclassflag">{{twoclassName}} x</div>
-        </div>
-    </div>
-    <div  id="listClassify" class="classifyBox">
-        <div class="classification">
-            <div class="class-title">分类</div>
-            <div class="class-nav-main">
-                <div v-for="item in classify" @click="oneclass(item)" :class="{'on':item.smallTypeID==smallTypeID}">{{item.name}}</div>
+    <template v-if="isPC">
+        <div class="crumbs-nav">
+            <div class="crumbs-link"> 筛选条件： </div>
+            <div  class="crumbs-nav-main">
+                <div class="crumbs-nav-item" v-if="termsNameflag">{{termsName}}</div>
+                <div class="crumbs-nav-item on" @click="remove" v-if="twoclassflag">{{twoclassName}} x</div>
             </div>
         </div>
-        <div class="classification">
-            <div class="class-title">二级</div>
-            <div class="class-nav-main">
-                <div v-for="item in tinytypeList" @click="twoclass(item)" :class="{'on':item.smallTypeID==twosmallTypeID}">{{item.name}}</div>
+        <div  id="listClassify" class="classifyBox">
+            <div class="classification">
+                <div class="class-title">分类</div>
+                <div class="class-nav-main">
+                    <div v-for="item in classify" @click="oneclass(item)" :class="{'on':item.smallTypeID==smallTypeID}">{{item.name}}</div>
+                </div>
+            </div>
+            <div class="classification">
+                <div class="class-title">二级</div>
+                <div class="class-nav-main">
+                    <div v-for="item in tinytypeList" @click="twoclass(item)" :class="{'on':item.smallTypeID==twosmallTypeID}">{{item.name}}</div>
+                </div>
+            </div>
+            <div class="sortBox classification">
+                <div class="class-title" :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</div>
+                <div class="class-nav-main">
+                    <template>
+                        <div class="down" @click="toSortList('sales',0)"><span>销量</span></div>
+                    </template>
+                    <template>
+                        <div class="down" @click="toSortList('favorite',0)"><span>人气</span></div>
+                    </template>
+                    <template>
+                        <div class="down"  @click="toSortList('price',0)"><span>价格</span></div>
+                    </template>
+                </div>
             </div>
         </div>
-        <div class="sortBox classification">
-            <div class="class-title" :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</div>
-            <div class="class-nav-main">
+     </template>
+     <template v-else>
+          <div class="sortBox">
+            <ul class="mfc">
+                <li :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</li>
                 <template>
-                    <div class="down" @click="toSortList('sales',0)"><span>销量</span></div>
+                    <li v-if="params.sortField == 'sales' && params.sortType == 1" class="down"
+                        @click="toSortList('sales',0)"><span>销量</span></li>
+                    <li v-else-if="params.sortField == 'sales' && params.sortType == 0" class="up"
+                        @click="toSortList('sales',1)"><span>销量</span></li>
+                    <li v-else @click="toSortList('sales',0)"><span>销量</span></li>
                 </template>
                 <template>
-                    <div class="down" @click="toSortList('favorite',0)"><span>人气</span></div>
+                    <li v-if="params.sortField == 'favorite' && params.sortType == 1" class="down"
+                        @click="toSortList('favorite',0)"><span>人气</span></li>
+                    <li v-else-if="params.sortField == 'favorite' && params.sortType == 0" class="up"
+                        @click="toSortList('favorite',1)"><span>人气</span></li>
+                    <li v-else @click="toSortList('favorite',0)"><span>人气</span></li>
                 </template>
                 <template>
-                    <div class="down"  @click="toSortList('price',0)"><span>价格</span></div>
+                    <li v-if="params.sortField == 'price' && params.sortType == 1" class="down"
+                        @click="toSortList('price',0)"><span>价格</span></li>
+                    <li v-else-if="params.sortField == 'price' && params.sortType == 0" class="up"
+                        @click="toSortList('price',1)"><span>价格</span></li>
+                    <li v-else @click="toSortList('price',0)"><span>价格</span></li>
                 </template>
-            </div>
+            </ul>
         </div>
-    </div>
+     </template>
     <template>
         <div class="list-container">
             <ul class="clear mfw">
@@ -54,7 +84,7 @@
                     <a class="image" :href="'/product-'+p.id+'.html'">
                         <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
                         <p class="name" v-html="p.name"></p>
-                        <div class="price mfhc">
+                        <div class="price">
                             <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
                                 <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
                                 <template v-if="p.priceFlag==1">