Administrator 4 年 前
コミット
b5df748306

+ 40 - 159
src/main/resources/static/css/product/instruement.css

@@ -6,142 +6,38 @@
 #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: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;
-}
-.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 ul li.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;
-}
-.collocation ul li{
-    height: 218px;
-}
-.swiper-container ul li{
-    margin-right: 16px;
-}
-.swiper-container ul{
-   height: auto;
-}
-.collocation ul{
-    height: 468px;
-}
-.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;
-}
+.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 ul li.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;}
+.collocation ul li{height: 218px;}
+.swiper-container ul li{margin-right: 16px;}
+.swiper-container ul{height: auto;}
+.collocation ul{height: 468px;}
+.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;
 }
@@ -157,31 +53,16 @@
 .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 ;
+.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
 }
-
 }

+ 1 - 1
src/main/resources/templates/product/instrument.html

@@ -373,7 +373,7 @@
                 </div>
                 <div class="hot-search">
                    <ul>
-                       <li class="hot-list" v-for="(item,index) in hotlist">{{item.name}}</li>
+                       <li class="hot-list" v-for="(item,index) in hotlist"><i class="icon mIcon hot"></i>{{item.name}}</li>
                    </ul>
                 </div>
             </div>