项目仪器详情H5

src/main/resources/static/css/instrument/detail.h5.css

@@ -3,64 +3,52 @@
 * 移动端
 */
 li{list-style:none}
-.productBox{width:100%;background:#FFF}
-.productBox .imageBox{width:100%;height:100vw;position:relative}
-#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}
-.productBox .detailBox{box-sizing:border-box;padding:0 3.3vw;overflow:hidden}
-.productBox .detailBox .crumbs{height:8vw;line-height:8vw;font-size:3.1vw;overflow:hidden;color:#93979F}
-.productBox .detailBox .crumbs a{color:#93979F}
-.productBox .detailBox .title{font-size:4.2vw;font-weight:bold;line-height:6.4vw;color:#4A4F58;margin-bottom:3.5vw}
-.productBox .detailBox .tags span{display:inline-block;height:4.2vw;line-height:4.2vw;padding:0 1vw;font-size:2.6vw;color:#FFF;background:#86B2FF;border-radius:2px;margin-right:2.7vw}
-.productBox .detailBox .detail{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}
-.productBox .detailBox .detail hr{border:none;border-top:1px dashed #BEC2C9;margin:2vw 0}
-.productBox .detailBox .row>i{font-style:normal;margin-right:2vw}
-.productBox .detailBox .row em{font-style:normal;color:#4A4F58}
-.productBox .detailBox .row em.ser{color:#93979F;display:inline-block;margin-right:4vw}
-.productBox .detailBox .row em.ser:before{content:'\2713';display:inline-block;width:3.4vw;height:3.4vw;text-align:center;line-height:3.4vw;font-size:3.4vw;background:#E15616;border-radius:1.7vw;color:#FFF;margin-right:1.4vw}
-.productBox .detailBox .price{height:21vw}
-.productBox .detailBox .price .icon{display:inline-block;font-size:0;width:4vw;height:4vw;line-height:4vw;position:relative;vertical-align:text-top;margin-top:0}
-.productBox .detailBox .price .icon.on{position:absolute;left:0;top:0;margin:0}
-.productBox .detailBox .price .icon:before{width:4vw;height:4vw;background-position:55% 25.2%}
-.productBox .detailBox .price .icon.on:before{background-position:49% 25.2%}
-.productBox .detailBox .number{display:inline-block;width:26.6vw;line-height:6.4vw;height:6.4vw;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:2px;font-size:0;white-space:nowrap;text-align:center;overflow:hidden;vertical-align:top}
-.productBox .detailBox .number>em{display:inline-block;width:6.4vw;height:6.4vw;background:#FFE6DC;font-size:4vw;line-height:6vw;vertical-align:top}
-.productBox .detailBox .number input{width:13.5vw;border:none;line-height:6vw;vertical-align:top;text-align:center;color:#E15616;font-size:3.4vw}
-.productBox .detailBox .detail .flag{position:absolute;right:0;top:0;font-size:0}
-.productBox .detailBox .detail .flag:before{display:inline-block;width:20vw;height:20vw;background-position:-2.5% 52%}
-.productBox .detailBox .detail .btn{position:absolute;right:2.8vw;top:2.8vw;height:6vw;line-height:6vw;padding:0 2vw;background:#F94B4B;font-size:3.4vw;color:#FFF;border-radius:2px}
-.productBox .detailBox .btnBox:before{content:'';display:block;width:200%;height:2.7vw;background:#F5F5F5;margin-left:-25%}
-.productBox .detailBox .btnBox{text-align:center}
-.productBox .detailBox .btnBox .cart,.productBox .detailBox .btnBox .buy{display:inline-block;width:40vw;height:11.2vw;line-height:11.2vw;text-align:center;border:1px solid #E15616;background:#FFE6DC;cursor:pointer;border-radius:2px;font-size:3.4vw;color:#E15616;margin:1.7vw 1.1vw}
-.productBox .detailBox .btnBox .buy{background:#E15616;color:#FFF}
-.productBox .detailBox .concatBox{height:20vw;padding-bottom:4vw}
-.productBox .detailBox .concatBox img{height:20vw;width:auto}
+.instrumentBox{width:100%;background:#FFF;padding-bottom:2.7vw;margin-bottom: 2.7vw;}
+.instrumentBox .imageBox{width:100%;height:66.6vw;}
+.instrumentBox img{width:100%;height:100%;display:block}
+.instrumentBox .infoBox{width:93.4vw;margin:2.7vw auto 0;color:#93979F;background:#F3F7FE;box-sizing:border-box;padding:2.7vw;font-size:3.4vw;border-radius:2px;position:relative;}
+.instrumentBox .infoBox hr{border:none;border-top:1px dashed #BEC2C9;margin:1vw 0}
+.instrumentBox .infoBox .row{position:relative;padding:1.3vw 0 1.3vw 16vw;line-height:4.7vw}
+.instrumentBox .infoBox .row .l{display:inline-block;min-width:14.2vw;height:7.4vw;text-align:justify;vertical-align:top;margin-left:-16vw;}
+.instrumentBox .infoBox .row .l:after{content:'';display:inline-block;width:100%}
+.instrumentBox .infoBox .row>i{font-style:normal;}
+.instrumentBox .infoBox .row em{font-style:normal;color:#4A4F58}
+.instrumentBox .infoBox .tit{color:#E15616;padding:1.3vw 0;line-height:4.7vw;}
+.instrumentBox .infoBox .share,.instrumentBox .infoBox .buy{display:none;}
+
+.detailInfo{background:#FFF;margin-bottom:2.6vw;}
+.detailInfo .tabTit{padding:1.5vw 3.3vw;}
+.detailInfo .tabTit span{display:inline-block;height:7.5vw;line-height:7.5vw;border-bottom:2px solid transparent;color:#93979F;font-size:3.4vw;margin-left:8vw;}
+.detailInfo .tabTit span.on{color:#E15621;border-color:#E15621}
+.detailInfo .tabTit span:first-child{margin-left:0;}
+.detailInfo .tabCon{padding:1.2vw 3.3vw 3.3vw;text-align:center;font-size:3.4vw;}
+.detailInfo .tabCon img{max-width:100%}
+.detailInfo .tabCon table{width:100%;text-align:left}
+
+.pageFloor{width:93.4vw;overflow:hidden;margin:0 auto;}
+.pageFloor .title{height:10vw;line-height:10vw;padding-left:10px;font-size:3.7vw;color:#4A4F58;font-weight:bold;text-align:center;}
+.pageFloor .content{width:100vw;}
+.pageFloor .content li{float:left;width:45.4vw;height:55.2vw;margin:0 2.6vw 2.6vw 0;background:#FFF}
+.pageFloor .content li img{display:block;width:45.4vw;height:45.4vw}
+.pageFloor .content li span{display:block;height:9.8vw;line-height:9.8vw;padding:0 1vw;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#93979F;font-size:3.1vw}
+
+.contactBox{width:100%;background:#FFF;margin: 0 auto 2.6vw;}
+.contactBox .tit{position:relative;width:100%;margin:0 auto;height:11.8vw}
+.contactBox .tit:before{content:'';position:absolute;left:0;top:5.9vw;width:100%;border-top:1px solid #FFE6DC}
+.contactBox .tit span{width:27.6vw;height:11.8vw;line-height:11.8vw;background:#FFF;position:absolute;top:0;left:50%;margin-left:-13.8vw;font-weight:bold;font-size:3.7vw;color:#2D3036;text-align:center}
+.contactBox .cont{width:100%;margin:0 auto;text-align:center}
+.contactBox .cont span{display:inline-block;width:100%;height:14vw;line-height:7vw;font-size:3.1vw;color:#2D3036;position:relative;text-align:left;padding-left:40vw;box-sizing:border-box;margin-bottom:2.6vw}
+.contactBox .cont span:before{width:9.4vw;height:9.4vw;position:absolute;left:28vw;top:2vw}
+.contactBox .cont .call:before{background-position:0% 41.5%}
+.contactBox .cont .phone:before{background-position:16% 41.5%}
+
+
+
+
+
+
+
+
+
 
-.recommendBox{margin-top:2vw;width:100%;background:#FFF}
-.recommendBox .hd{font-size:3.4vw;color:#E15621;font-weight:bold;padding:2.7vw;text-align:center}
-#productRecommend{width:100%;height:41.8vw;overflow:hidden;position:relative;box-sizing:border-box;padding:0 2.4vw}
-#productRecommend li{width:29.2vw!important;height:41.8vw;overflow:hidden;text-align:center;background:none}
-#productRecommend li .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;width:26.8vw;height:41.8vw;font-size:3.4vw}
-#productRecommend li .item img{display:block;width:100%;height:26.8vw}
-#productRecommend li .item span{color:#93979F;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:2.6vw}
-.mShopBox{box-sizing:border-box;background:#FFF;margin:2.6vw 0;line-height:7.5vw;font-size:3.4vw;padding:2vw 3.3vw}
-.mShopBox span{display:block;white-space:nowrap;color:#93979F}
-.mShopBox span em{white-space:normal;font-style:normal;line-height:4.5vw;display:inline-block;vertical-align:top;box-sizing:border-box;padding:1.5vw 0;width:76vw}
-.mShopBox span:first-child em{width:auto;margin-right:2vw;}
-.mShopBox .shop,.shopBox .heart{vertical-align:text-top}
-.mShopBox .shop:before{width:7.5vw;height:6vw;background-position:-1% 60%;margin-top:-1vw;}
-.mShopBox .heart:before{width:5.5vw;height:5.5vw;background-position:0% 36.5%}
-.mShopBox .name:after{content:'\276F';float:right;font-size:4vw;color:#707070}
 
-.detailBox{background:#FFF;margin-bottom: 2.7vw;}
-.detailBox .tabTit{text-align:justify;padding:1.5vw 3.3vw;line-height:0;font-size:0;}
-.detailBox .tabTit span{display:inline-block;height:7.5vw;line-height:7.5vw;border-bottom:2px solid transparent;color:#93979F;font-size:3.4vw}
-.detailBox .tabTit span.on{color:#E15621;border-color:#E15621}
-.detailBox .tabTit:after{content:'';display:inline-block;width:100%}
-.detailBox .tabCon{padding:1.2vw 3.3vw 3.3vw;text-align:center;font-size:3.4vw;}
-.detailBox .tabCon img{max-width:100%}
-.detailBox .tabCon table{width:100%;text-align:left}
-.detailBox .tabCon td{padding:1.5vw;line-height:5vw}
-.detailBox .tabCon td:nth-of-type(1){width:20%;color:#93979F}
-.detailBox .tabCon td:nth-of-type(2){width:80%;color:#4A4F58}
-.detailBox .comment{color:#93979F;padding:5vw 0}

src/main/resources/static/css/product/detail.h5.css

@@ -52,15 +52,15 @@ li{list-style:none}
 .mShopBox .heart:before{width:5.5vw;height:5.5vw;background-position:0% 36.5%}
 .mShopBox .name:after{content:'\276F';float:right;font-size:4vw;color:#707070}
 
-.detailBox{background:#FFF;margin-bottom: 2.7vw;}
-.detailBox .tabTit{text-align:justify;padding:1.5vw 3.3vw;line-height:0;font-size:0;}
-.detailBox .tabTit span{display:inline-block;height:7.5vw;line-height:7.5vw;border-bottom:2px solid transparent;color:#93979F;font-size:3.4vw}
-.detailBox .tabTit span.on{color:#E15621;border-color:#E15621}
-.detailBox .tabTit:after{content:'';display:inline-block;width:100%}
-.detailBox .tabCon{padding:1.2vw 3.3vw 3.3vw;text-align:center;font-size:3.4vw;}
-.detailBox .tabCon img{max-width:100%}
-.detailBox .tabCon table{width:100%;text-align:left}
-.detailBox .tabCon td{padding:1.5vw;line-height:5vw}
-.detailBox .tabCon td:nth-of-type(1){width:20%;color:#93979F}
-.detailBox .tabCon td:nth-of-type(2){width:80%;color:#4A4F58}
-.detailBox .comment{color:#93979F;padding:5vw 0}
+.productInfo{background:#FFF;margin-bottom: 2.7vw;}
+.productInfo .tabTit{padding:1.5vw 3.3vw;}
+.productInfo .tabTit span{display:inline-block;height:7.5vw;line-height:7.5vw;border-bottom:2px solid transparent;color:#93979F;font-size:3.4vw;margin-left:8vw;}
+.productInfo .tabTit span.on{color:#E15621;border-color:#E15621}
+.productInfo .tabTit span:first-child{margin-left:0;}
+.productInfo .tabCon{padding:1.2vw 3.3vw 3.3vw;text-align:center;font-size:3.4vw;}
+.productInfo .tabCon img{max-width:100%}
+.productInfo .tabCon table{width:100%;text-align:left}
+.productInfo .tabCon td{padding:1.5vw;line-height:5vw}
+.productInfo .tabCon td:nth-of-type(1){width:20%;color:#93979F}
+.productInfo .tabCon td:nth-of-type(2){width:80%;color:#4A4F58}
+.productInfo .comment{color:#93979F;padding:5vw 0}

src/main/resources/templates/instrument/detail.html

@@ -66,8 +66,8 @@
     <div class="contactBox">
         <div class="tit"><span>咨询 · 购买</span></div>
         <div class="cont">
-            <span class="icon call">0755-22907771转806<br>15338851365</span>
-            <span class="icon phone">产品设备：18948339365<br>商务合作：17318032647</span>
+            <span class="icon mIcon call">0755-22907771转806<br>15338851365</span>
+            <span class="icon mIcon phone">产品设备：18948339365<br>商务合作：17318032647</span>
         </div>
     </div>
 </div>