采美正品联盟路径

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

@@ -69,7 +69,6 @@
     .content-bottom .preview-info-msg .info-msg .icon:before{background-position: -93px -550px;width: 18px;height: 18px;left: 15px;top: 7px;position: absolute;}
 
 
-
 }
 
 
@@ -79,5 +78,53 @@
 * 移动端
 */
 @media screen and (max-width:768px){
+    .inner{width: 100%;}
+    .container-header{width: 100%;height: auto;}
+    .header-bottom{width: 100%;height: 13.4vw;}
+    .bottom_nav{width: 13.4vw;height: 13.4vw;float: left;box-sizing: border-box;padding: 3.5vw;}
+    .bottom_nav .icon_nav{display: block;}
+    .bottom_nav .icon_nav:before{content: '';display: block;width: 6.4vw;height: 6.4vw;background-position: 0 0;}
+    .bottom_nav .header-nav-tabs{display: none;}
+    .bottom_logo{width:73.2vw;height: 13.4vw;float: left; box-sizing: border-box;padding: 3.75vw 0;}
+    .bottom_logo a{width: 23.8vw;height: 5.9vw;display: block;margin: 0 auto;}
+    .bottom_logo a img{width: 23.8vw;height: 5.9vw;display: block;}
+    .bottom_use{width: 13.4vw;height: 13.4vw;float: right;box-sizing: border-box;padding: 3.5vw;}
+    .bottom_use .icon_nav{display: block;}
+    .bottom_use .icon_nav:before{content: '';display: block;width: 6.4vw;height: 6.4vw;background-position:-8.6vw  0;}
+    .header-bottom-msg{width: 100%;height: 13.4vw;background-color: #fef6f3;float: left;box-sizing: border-box;position: relative;padding-left: 8vw;}
+    .header-bottom-msg .icon-msg{width: 8vw;height: 13.4vw;display: block;position: absolute;left: 0;top: 0;}
+    .header-bottom-msg .icon-msg:before{width: 6.4vw;height: 6.4vw;display: block;background-position: -85.1vw -43.7vw;}
+    .header-bottom-msg p{display: inline-block;padding-top: 2vw;line-height:4.7vw;font-size: 3vw;color: #E15616;box-sizing: border-box;height: 100%;padding-right: 2vw;}
+    .container-content{width: 100%;height: auto;float: left;}
+    .content-top{width: 100%;height: 28vw;float: left;background-color: #ffffff;box-sizing: border-box;padding: 4vw 3.2vw;border-bottom: 1px solid #EFEFEF;}
+    .content-top .content-top-left{width:100%;height: 20vw;float: left;}
+    .content-top .content-logo{width: 26.4vw;height: 20vw;float: left;}
+    .content-top .content-logo img{width: 26.4vw;height: 20vw;display: block;}
+    .content-top .content-mssg{width: 63.6vw;height: 20vw;float: left;margin-left: 3.2vw;}
+    .content-top .content-mssg .mssg-name{width: 100%;height: 8.9vw;float: left;line-height: 8.9vw;font-size: 3.8vw;color: #333333;font-weight: bold;}
+    .content-top .content-mssg .mssg-labels{width: 100%;height: 20px;float: left;}
+    .content-top .content-mssg .mssg-labels span{width: 24.2vw;height: 5.4vw;background-image: linear-gradient(270deg,#c1821a 0%, #f7cd7e 100%);border-radius: 0.2vw 2.7vw 0.2vw 2.7vw;font-size: 2vw;line-height: 5.4vw;text-align: center;color: #FFFFFF;display: inline-block;float: left;}
+    .content-bottom{width: 100%;height: auto;float: left;box-sizing: border-box;background-color: #ffffff;padding-bottom: 8vw;}
+    .swiper-pagination{width: 11vw;height: 5.6vw;border-radius: 0 5.5vw 5.5vw  0;background-color: rgba(51, 51, 51, 0.24);right: 0;z-index: 99999;color: #FFFFFF;}
+    .content-bottom .preview-info{width: 100%;height: auto;float: left;padding: 0 3.2vw;box-sizing: border-box;}
+    .content-bottom .preview-info-title{width: 100%;height:35.4vw;border-bottom: 1px dashed #e2e7ef;box-sizing: border-box;padding: 2.5vw 0 0 0;}
+    .content-bottom .title-label{width: 100%;height:10.4vw;float: left;}
+    .content-bottom .title-label p{float: left;line-height: 10.4vw;font-size: 3vw;color: #9aa5b5;text-align: left;}
+    .content-bottom .title-label .icon-author{width:  10.4vw;height:  10.4vw;display: block;float: left;margin-left: 3.2vw;}
+    .content-bottom .title-name{width: 100%;height: auto;line-height: 5.5vw;font-size: 4.2vw;color: #333333;font-weight: bold;text-align: left;float: left;}
+    .content-bottom .title-p{width: 100%;height: 7.5vw;line-height: 7.5vw;float: left;}
+    .content-bottom .title-p span{font-size: 3.4vw;line-height: 7.5vw;}
+    .content-bottom .title-p span.label{color: #9aa5b5;}
+    .content-bottom .title-p span.labal{color: #333333;}
+    .content-bottom .title-w{width: 100%;height: 5.6vw;float: left;}
+    .content-bottom .title-w .title-w-bao{width: 5.6vw;height: 5.6vw;display: block;float: left;}
+    .content-bottom .title-w a{width: 23.2vw;height: 5.2vw;display: block;float: left;margin-left:1vw;background-color: #fff8e8;border-radius: 0.2vw;text-align: center;font-size: 2vw;line-height: 5.2vw;color: #d8a245;}
+    .content-bottom .preview-info-details{width: 100%;height: auto;float: left;padding-top: 2vw;}
+    .content-bottom .preview-info-details .details-p{width: 100%;height: 7.5vw;line-height:7.5vw;float: left;}
+    .content-bottom .preview-info-details .details-p span{font-size: 3.4vw;line-height: 7.5vw;}
+    .content-bottom .preview-info-details .details-p span.label{color: #9aa5b5;}
+    .content-bottom .preview-info-details .details-p span.labal{color: #333333;}
+    .content-bottom .preview-button{width: 100%;height: 11.2vw;float: left;margin-top: 2vw;}
+    .content-bottom .preview-button a{width: 100%;height: 11.2vw;display: block;background-color: #d8d8d8;border-radius: 0.4vw;line-height: 11.2vw;font-size: 3.4vw;color: #ffffff;text-align: center;}
 
 }

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

@@ -8,12 +8,12 @@
 </head>
 <body>
 <!--美博会专题-->
-<div class="container" id="qualityAuthorize">
+<div class="container" id="qualityAuthorize" v-cloak>
     <input type="hidden" th:value="${spiServer}" id="spiServer">
     <input type="hidden" th:value="${agent}" id="userAgent">
     <div class="container-header clear">
-        <div class="header-top">采美正品联盟</div>
-        <div class="header-bottom">
+        <div class="header-top" v-if="isPC">采美正品联盟</div>
+        <div class="header-bottom" v-if="isPC">
             <div class="inner">
                 <div class="logo">
                     <a href="/index.html">
@@ -38,6 +38,28 @@
                 </div>
             </div>
         </div>
+        <div class="header-bottom" v-if="!isPC">
+            <div class="bottom_nav">
+                <i class="mIcon icon_nav"></i>
+                <div class="header-nav-tabs">
+                    <div class="item-nav" v-for="(item, index) in tabsList"  :class="current==index?'addImg':''" :key="index">
+                        <a href="javascript:void(0)">{{ item.text }}</a>
+                    </div>
+                </div>
+            </div>
+            <div class="bottom_logo">
+                <a href="/index.html">
+                    <img src="/img/base/logo.png" alt="">
+                </a>
+            </div>
+            <div class="bottom_use">
+                <i class="mIcon icon_nav"></i>
+            </div>
+        </div>
+        <div class="header-bottom-msg" v-if="!isPC">
+            <i class="mIcon icon-msg"></i>
+            <p>请仔细比对仪器上的序列号与SN码是否一致，您也可前往官方防伪网站查看更多信息。</p>
+        </div>
     </div>
     <div class="container-content clear">
         <div class="inner">
@@ -53,7 +75,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="content-top-right">
+                <div class="content-top-right" v-if="isPC">
                     <div class="content-button">
                         <a href="javascript:void(0)">查看下一个(0)</a>
                     </div>
@@ -72,7 +94,7 @@
                             </li>
                         </ul>
                     </div>
-                    <div id="swiperImage" class="CM____pic_thumb swiper-container" v-if="(!isPC)">
+                    <div class="CM____pic_thumb swiper-container" id="swiperImage"  v-else>
                         <ul class="swiper-wrapper clear preview-thumb-ul">
                             <li class="swiper-slide mfc"v-for="(item, index) in previewThumb" :class="current==index?'addImg':''" :key="index" :data-src="item" @click="ImgList(item,index)">
                                 <img :src="item">
@@ -90,7 +112,8 @@
                     <div class="preview-info-title">
                         <div class="title-label">
                             <p>该仪器由西安柏恩美业有限公司购买</p>
-                            <img class="icon-author" src="/img/quality/icon-author.png" alt="">
+                            <img class="icon-author" src="/img/quality/icon-author.png" alt="" v-if="isPC">
+                            <img class="icon-author" src="/img/quality/icon-h5-author.png" alt="" v-if="!isPC">
                         </div>
                         <div class="title-name">M22 AOPT超光子王者之冠</div>
                         <div class="title-p">
@@ -98,7 +121,8 @@
                             <span class="labal">V2**********9678</span>
                         </div>
                         <div class="title-w">
-                            <img class="title-w-bao" src="/img/quality/icon-bao.png" alt="">
+                            <img class="title-w-bao" src="/img/quality/icon-bao.png" alt="" v-if="isPC">
+                            <img class="title-w-bao" src="/img/quality/icon-h5-bao.png" alt="" v-if="!isPC">
                             <a href="javascript:void(0)">官方防伪网站</a>
                         </div>
                     </div>
@@ -128,12 +152,15 @@
                             <span class="labal">515-1565nm</span>
                         </div>
                     </div>
-                    <div class="preview-info-msg">
+                    <div class="preview-info-msg" v-if="isPC">
                         <div class="info-msg">
                             <i class="icon icon-msg"></i>
                             请仔细比对仪器上的序列号与SN码是否一致，您也可前往官方防伪网站查看更多信息。
                         </div>
                     </div>
+                    <div class="preview-button" v-if="!isPC">
+                        <a href="javascript:void(0)">查看下一个(0)</a>
+                    </div>
                 </div>
             </div>
         </div>