正品联盟相关页面

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

@@ -3,39 +3,33 @@
 * PC端
 */
 @media screen and (min-width:768px){
+    body{background-color: #FFFFFF;}
     .inner{width: 1184px;margin: 0 auto;}
     .container-header{width: 100%;height: auto;}
-    .header-top{width: 100%;height: 56px;line-height: 56px;text-align: center;font-size: 18px;color: #333;font-weight: bold;}
-    .header-bottom{width: 100%;height: 83px;float: left;background-color: #ffffff;}
-    .header-bottom .logo{width: 178px;height: 44px;float: left;margin-top: 20px;}
-    .header-bottom .logo a{width: 100%;height: 100%;display: block;}
-    .header-bottom .logo img{width: 100%;height: 100%;display: block;}
-    .header-bottom .header-right{width:auto ;float: right;padding: 0 16px;box-sizing: border-box;margin-top: 29px;}
-    .header-bottom .header-right .header-nav{float: left;margin-right: 24px;line-height: 54px;font-size: 15px;color: #333333;font-weight: bold;position: relative;}
-    .header-bottom .header-right .header-nav a{width: 100%;height: 54px;display: block;position: relative;padding-right: 30px;text-align: center;}
-    .header-bottom .header-right .header-nav .icon:before{background-position: -93px 7px;width: 20px;height: 32px;right: 20px;top: 10px;position: absolute;}
-    .header-bottom .header-right .header-nav-tabs{width: 144px;height: 402px;position: absolute;bottom: -402px;left: -20px;background-color: #FFFFFF;display: none;}
-    .header-bottom .header-right .header-nav:hover .header-nav-tabs{display: block;}
-    .header-bottom .header-right .header-nav-tabs .item-nav{width: 100%;height: 48px;float: left;}
-    .header-bottom .header-right .header-nav-tabs .item-nav a{width: 100%;height: 100%;display: block;font-size: 16px;text-align: center;line-height: 48px;padding-right: 0;}
-    .header-bottom .header-right .header-nav-tabs .item-nav:hover a{background-color: #fef6f3;}
-    .header-bottom .header-right .header-use{float: right;line-height: 54px;font-size: 15px;font-weight: bold;color: #333333;text-align: right;}
+    .header-top{width: 100%;height: 80px;box-sizing: border-box;padding:23px 0;background-image: linear-gradient(270deg, #191919 0%, #464646 100%);}
+    .header-top .logo{width: 98px;height: 34px;float: left;}
+    .header-top .logo img{width: 98px;height: 34px;display: block;}
     .container-content{width: 100%;height: auto;float: left;margin-top: 16px;}
-    .container-content .content-top{width: 100%;height: 120px;box-sizing: border-box;padding: 20px 16px;background-color: #ffffff;}
+    .container-content .content-top{width: 100%;height: 120px;box-sizing: border-box;padding: 20px 16px;background-color: #ffffff;box-shadow: 0 2px 10px #ebecef;}
     .container-content .content-top-left{width: 50%;float: left;height: 100%;}
-    .container-content .content-top-right{width: 50%;float: right;height: 100%;box-sizing: border-box;padding: 18px 0;}
-    .container-content .content-button{width: 168px;height: 44px;float: right;}
-    .container-content .content-button a{width: 100%;height: 100%;display: block;text-align: center;font-size: 16px;background-color:  #d8d8d8;border-radius: 2px;color: #FFFFFF;line-height: 44px;}
+    #swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{position:absolute;top:50%;margin-top:-34px;display:block;width:44px;height:68px;line-height:68px;background:rgba(51,51,51,.16);color:#FFF;font-size:40px;text-align:center;border-radius:2px}
+    #swiper-container .swiper-button-prev{left:5px;right:auto}
+    #swiper-container .swiper-button-next{left:auto;right:5px}
+    #swiper-container .swiper-button-prev:after{content:"\276C"}
+    #swiper-container .swiper-button-next:after{content:"\276D"}
+    #swiper-container .swiper-button-prev:hover,#swiper-container .swiper-button-next:hover{background:rgba(255,230,220,.6)}
     .container-content .content-logo{width: 112px;height: 80px;float: left;box-sizing: border-box;border: 1px solid #f5f5f5;border-radius: 2px;}
     .container-content .content-logo img{width: 100%;height: 100%;border-radius: 2px;display: block;}
     .container-content .content-mssg{width:300px ;float: left;margin-left: 16px;}
     .container-content .mssg-name{width: 100%;height: 48px;line-height: 48px;font-size: 18px;color: #333333;font-weight: bold;text-align: left;}
     .container-content .mssg-labels{width: 100%;height: 20px;float: left;}
-    .container-content .mssg-labels span{width: 88px;height: 20px;background-image: linear-gradient(270deg,#c1821a 0%, #f7cd7e 100%);border-radius: 2px 8px 2px 8px;font-size: 12px;line-height: 20px;text-align: center;color: #FFFFFF;display: inline-block;float: left;}
-    .container-content .content-bottom{width: 100%;height: auto;background-color: #FFFFFF;float: left;margin-top: 20px;box-sizing: border-box;padding: 16px;}
-    .content-bottom .preview-banner {width: 452px;height: 545px;float: left;position: relative;}
+    .container-content .mssg-labels .tabs{width: 104px;height: 24px;margin-right: 12px;border-radius: 2px;font-size: 12px;line-height: 24px;text-align: center;color: #FFFFFF;display: inline-block;float: left;}
+    .container-content .mssg-labels .tabs.zp{background-image: linear-gradient(270deg,#c1821a 0%, #f7cd7e 100%);}
+    .container-content .mssg-labels .tabs.sq{background-image: linear-gradient(270deg, #374972 0%, #84a6f6 100%);}
+    .container-content .content-bottom{width: 100%;height: 660px;background-color: #FFFFFF;float: left;margin-top: 20px;box-sizing: border-box;padding: 16px;}
+    .content-bottom .preview-banner {width: 660px;height: 660px;float: left;position: relative;}
     .content-bottom .preview-info.active {opacity: 1;}
-    .content-bottom .preview-banner-big {width: 452px;height: 452px;float: left;border: 1px solid #e4e4e4;}
+    .content-bottom .preview-banner-big {width: 660px;height: 452px;float: left;border: 1px solid #e4e4e4;}
     .content-bottom .preview-banner-big .preview-img {width: 100%;height: 100%;display: block;}
     .content-bottom .preview-banner-big span {display: none;position: absolute;left: 0;top: 0;width: 215px;height: 215px;border: 1px solid #aaa;background: rgba(255, 208, 22, 0.4);opacity: .5;filter: alpha(opacity:50);cursor: move;}
     .content-bottom .preview-banner-small {width: 100%;height: 98px;padding: 10px;float: left;box-sizing:border-box;}
@@ -46,7 +40,7 @@
     .content-bottom .preview-banner-small .item.on img {opacity: 1;}
     .content-bottom .preview-box {display: none;overflow: hidden;position: absolute;right: -555px;top: 0;width: 548px;height: 548px;border: 1px solid #e4e4e4;z-index: 9999;background: #FFFFFF;}
     .content-bottom .preview-box img {width: 1096px;height: 1096px;margin-right: 10px;display: block;max-width:none;}
-    .content-bottom .preview-info {width: 650px;height: 545px;float: left;margin-left: 24px;}
+    .content-bottom .preview-info {width: 508px;height: 660px;float: left;margin-left: 16px;}
     .content-bottom .preview-info-title{width: 100%;height: 155px;border-bottom: 1px dashed #e2e7ef;}
     .content-bottom .title-label{width: 100%;height: 47px;float: left;}
     .content-bottom .title-label p{float: left;line-height: 47px;font-size: 14px;color: #9aa5b5;text-align: left;}

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

@@ -5,58 +5,102 @@ var qualityAuthorize = new Vue({
     el:"#qualityAuthorize",
     data: {
         previewBigimage:'',
-        previewThumb:[
-            '/img/quality/product-01.png',
-            '/img/quality/product-02.png',
-            '/img/quality/product-03.png',
-            '/img/quality/product-04.png'
+        dataList:[
+            {
+                previewThumb:[
+                    '/img/quality/product-01.png',
+                    '/img/quality/product-02.png',
+                    '/img/quality/product-03.png',
+                    '/img/quality/product-04.png'
+                ],
+                product:{
+                    name:'日本氢气护肤仪店用氢水保湿抗炎延缓衰老',
+                    number:'V2**********9678',
+                    brand:'品辉国际',
+                    achz:'AC100-240V,50Hz-60Hz',
+                    xhgl:'130（Max）',
+                    HydroDome:'LED光线',
+                    size:'340mm(W)*430mm(D)*275mm(H）',
+                    kg:'12kg'
+                }
+            },
+            {
+                previewThumb:[
+                    '/img/quality/product-01.png',
+                    '/img/quality/product-02.png',
+                    '/img/quality/product-03.png',
+                    '/img/quality/product-04.png'
+                ],
+                product:{
+                    name:'日本氢气护肤仪店用氢水保湿抗炎延缓衰老',
+                    number:'V2**********9678',
+                    brand:'品辉国际',
+                    achz:'AC100-240V,50Hz-60Hz',
+                    xhgl:'130（Max）',
+                    HydroDome:'LED光线',
+                    size:'340mm(W)*430mm(D)*275mm(H）',
+                    kg:'12kg'
+                }
+            }
         ],
+
         previewParams:[],
         current:0,
-        tabsList:[
-            {text:'产品',link:'/product/instrument.html?id=287&name=产品'},
-            {text:'仪器',link:'/product/instrument.html?id=286&name=仪器'},
-            {text:'信息平台',link:'/info/center-3-1.html?name=信息平台'},
-            {text:'直播',link:'https://wx.vzan.com/plug-ins/?v=637429463853329710#/FixupIndex/399803126?shareuid=0&name=%E9%87%87%E7%BE%8ELIVE'},
-            {text:'二手市场',link:'/flea-market/list.html?name=二手市场'},
-            {text:'正品联盟',link:'/topic.html?type=6&name=正品联盟'},
-            {text:'品牌招商',link:'/investment.html?name=品牌招商'},
-            {text:'维修',link:'/flea-market/list.html?name=二手市场'}
-        ]
     },
     filters: {
 
 
     },
     methods: {
-
+        SwiperBanner: function(){
+            setTimeout(function(){
+                if (isPC) {
+                    $('#swiper-container').slide({
+                        mainCell:".swiper-wrapper-banner",
+                        titCell:".swiper-pagination-banner span",
+                        effect: "leftLoop",
+                        prevCell:".swiper-button-prev",
+                        nextCell:".swiper-button-next",
+                        interTime: 3000,
+                        autoPlay: false,
+                        autoPage: false,
+                        trigger: "mouseover"
+                    });
+                    var swiper = new Swiper('#swiper-container2', {
+                        loop : true,
+                        autoplay: {
+                            delay: 3000,
+                            disableOnInteraction: false
+                        },
+                        pagination: {
+                            el: '.swiper-pagination',
+                            clickable :true
+                        }
+                    });
+                } else {
+                    var swiper = new Swiper('#swiper-container', {
+                        loop : true,
+                        autoplay: {
+                            delay: 3000,
+                            disableOnInteraction: false
+                        },
+                        navigation: {
+                            nextEl: '.swiper-button-next',
+                            prevEl: '.swiper-button-prev'
+                        },
+                        pagination: {
+                            el: '.swiper-pagination',
+                            clickable :true
+                        }
+                    });
+                }
+            },300);
+        },
 
     },
     mounted: function () {
-        this.previewBigimage = this.previewThumb[0];
-        setTimeout(function(){
-            if (isPC) {
-                var magnifier = new ImageMagnifier(
-                    '#imgShown #CM____pic_thumb li'
-                    ,'#imgShown .bigImage'
-                    ,'#imgShown .preview-box'
-                    ,'#imgShown .mask'
-                    ,'#imgShown .bigitem'
-                    ,"on"
-                ).init();
-            } else {
-                var swiper = new Swiper('#swiperImage', {
-                    loop : true,
-                    autoplay: {
-                        delay: 2000,
-                        disableOnInteraction: false
-                    },
-                    pagination: {
-                        el: '.swiper-pagination',
-                        type: 'fraction'
-                    }
-                });
-            }
-        },500);
+
+        // this.previewBigimage = this.previewThumb[0];
+        this.SwiperBanner();
     }
 });

src/main/resources/static/js/supplier/list.js

@@ -17,6 +17,7 @@ var supplierList = new Vue({
     computed: {
         pageTotal: function () {
             var total = Math.ceil(this.listRecord / this.params.size);
+            console.log(total)
             return total > 0 ? total : 1;
         },
         showPageBtn: function () {
@@ -57,6 +58,7 @@ var supplierList = new Vue({
             }, function (r) {
                 if (r.code === 0 && r.data) {
                     var result = JSON.parse(r.data);
+                    console.log(result);
                     _self.listRecord = result.total;
                     var resultData = [];
                     result.items.map(function (su) {

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

@@ -12,58 +12,15 @@
     <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" v-if="isPC">采美正品联盟</div>
-        <div class="header-bottom" v-if="isPC">
+        <div class="header-top" v-if="isPC">
             <div class="inner">
-                <div class="logo">
-                    <a href="/index.html">
-                        <img src="/img/base/logo.png" alt="">
-                    </a>
-                </div>
-                <div class="header-right">
-                    <div class="header-nav">
-                        <a href="javascript:void(0)">
-                            <i class="icon icon-nav"></i>
-                            采美商城
-                        </a>
-                        <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="header-use">
-                        <a href="javascript:void(0)">个人中心</a>
-                    </div>
-                </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 class="logo"><img src="/img/quality/icon-logo.png" alt=""></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">
-            <div class="content-top">
+        <div class="content-top">
+            <div class="inner">
                 <div class="content-top-left">
                     <div class="content-logo">
                         <img src="/img/quality/logo.png" alt="">
@@ -71,97 +28,88 @@
                     <div class="content-mssg">
                         <div class="mssg-name">上海品辉医疗正品授权</div>
                         <div class="mssg-labels">
-                            <span>正品联盟成员</span>
+                            <span class="tabs zp">正品联盟成员</span>
+                            <span class="tabs sq">授权产品(2个）</span>
                         </div>
                     </div>
                 </div>
-                <div class="content-top-right" v-if="isPC">
-                    <div class="content-button">
-                        <a href="javascript:void(0)">查看下一个(0)</a>
-                    </div>
-                </div>
             </div>
-            <div class="content-bottom">
-                <div class="preview-banner clearfix" id="imgShown" >
-                    <div class="preview-banner-big bigImage" v-if="isPC">
-                        <img class="preview-img" :src="previewBigimage" >
-                        <span class="mask"></span>
-                    </div>
-                    <div class="preview-banner-small" id="CM____pic_thumb" v-if="isPC">
-                        <ul class="preview-thumb-ul">
-                            <li class="item" v-for="(item, index) in previewThumb"  :class="current==index?'addImg':''" :key="index" :data-src="item" @click="ImgList(item,index)">
-                                <img :src="item">
-                            </li>
-                        </ul>
-                    </div>
-                    <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">
-                            </li>
-                        </ul>
-                        <div class="swiper-pagination mfc"></div>
-                    </div>
-                    <div class="preview-box" id="mag" v-if="isPC">
-                        <div class="bigitem">
-                            <img id="magnifierImg" :src="previewBigimage"/>
-                        </div>
-                    </div>
-                </div>
-                <div class="preview-info">
-                    <div class="preview-info-title">
-                        <div class="title-label">
-                            <p>该仪器由西安柏恩美业有限公司购买</p>
-                            <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">
-                            <span class="label">SN码：</span>
-                            <span class="labal">V2**********9678</span>
-                        </div>
-                        <div class="title-w">
-                            <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>
-                    <div class="preview-info-details">
-                        <div class="details-p">
-                            <span class="label">型号：</span>
-                            <span class="labal">R100E</span>
-                        </div>
-                        <div class="details-p">
-                            <span class="label">品牌：</span>
-                            <span class="labal">上海品辉</span>
-                        </div>
-                        <div class="details-p">
-                            <span class="label">出厂年月：</span>
-                            <span class="labal">2017年12月6日</span>
-                        </div>
-                        <div class="details-p">
-                            <span class="label">产品尺寸：</span>
-                            <span class="labal">长*宽*高 30*29.5*12.5</span>
-                        </div>
-                        <div class="details-p">
-                            <span class="label">能量源：</span>
-                            <span class="labal">激光</span>
-                        </div>
-                        <div class="details-p">
-                            <span class="label">波长：</span>
-                            <span class="labal">515-1565nm</span>
-                        </div>
-                    </div>
-                    <div class="preview-info-msg" v-if="isPC">
-                        <div class="info-msg">
-                            <i class="icon icon-msg"></i>
-                            请仔细比对仪器上的序列号与SN码是否一致，您也可前往官方防伪网站查看更多信息。
+        </div>
+        <div class="content-bottom">
+            <div id="swiper-container" class="swiper-container">
+                <ul class="swiper-wrapper swiper-wrapper-banner">
+                    <li class="swiper-slide mfc" v-for="item in dataList">
+                        <div class="inner">
+                            <div class="preview-banner clearfix" id="imgShown" >
+                                <div id="swiper-container2" class="swiper-container">
+                                    <ul class="swiper-wrapper swiper-wrapper-banner1">
+                                        <li class="swiper-slide mfc" v-for="image in item.previewThumb">
+                                            <img :src="image">
+                                        </li>
+                                    </ul>
+                                    <div class="swiper-pagination swiper-pagination-banner1 mfc"><span v-if="isPC" v-for="i in item.previewThumb.length"></span></div>
+                                </div>
+                            </div>
+                            <div class="preview-info">
+                                <div class="preview-info-title">
+                                    <div class="title-label">
+                                        <p>该仪器由西安柏恩美业有限公司购买</p>
+                                        <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">
+                                        <span class="label">SN码：</span>
+                                        <span class="labal">V2**********9678</span>
+                                    </div>
+                                    <div class="title-w">
+                                        <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>
+                                <div class="preview-info-details">
+                                    <div class="details-p">
+                                        <span class="label">型号：</span>
+                                        <span class="labal">R100E</span>
+                                    </div>
+                                    <div class="details-p">
+                                        <span class="label">品牌：</span>
+                                        <span class="labal">上海品辉</span>
+                                    </div>
+                                    <div class="details-p">
+                                        <span class="label">出厂年月：</span>
+                                        <span class="labal">2017年12月6日</span>
+                                    </div>
+                                    <div class="details-p">
+                                        <span class="label">产品尺寸：</span>
+                                        <span class="labal">长*宽*高 30*29.5*12.5</span>
+                                    </div>
+                                    <div class="details-p">
+                                        <span class="label">能量源：</span>
+                                        <span class="labal">激光</span>
+                                    </div>
+                                    <div class="details-p">
+                                        <span class="label">波长：</span>
+                                        <span class="labal">515-1565nm</span>
+                                    </div>
+                                </div>
+                                <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>
-                    <div class="preview-button" v-if="!isPC">
-                        <a href="javascript:void(0)">查看下一个(0)</a>
-                    </div>
-                </div>
+                    </li>
+                </ul>
+                <div class="swiper-pagination swiper-pagination-banner mfc"><span v-if="isPC" v-for="i in dataList.length"></span></div>
+                <a class="swiper-button-prev" href="javascript:void(0)"></a>
+                <a class="swiper-button-next" href="javascript:void(0)"></a>
             </div>
         </div>
     </div>
@@ -169,7 +117,6 @@
 
 <!-- 引入底部 -->
 <template th:replace="components/foot-link"></template>
-<script charset="utf-8" type="text/javascript" src="/lib/magnifier.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/product/qualityauthorize.js(v=${version})}"></script>
 </body>