采美正品联盟

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

@@ -0,0 +1,83 @@
+@charset "utf-8";
+/**
+* PC端
+*/
+@media screen and (min-width:768px){
+    .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;}
+    .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-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;}
+    .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;}
+    .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 .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;}
+    .content-bottom .preview-banner-small .item {width: 78px;height: 78px;margin-right: 9px;float: left;background-color: #fff;cursor: pointer;list-style: none;border: 1px solid #FFFFFF;}
+    .content-bottom .preview-banner-small .item:last-child {margin-right: 0;}
+    .content-bottom .preview-banner-small .item img {width: 100%;height: 100%;display: block;-moz-transition: .5s;-webkit-transition: .5s;transition: .5s;opacity: .5;}
+    .content-bottom .preview-banner-small .item.on {border-color: #e15616;}
+    .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-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;}
+    .content-bottom .title-label .icon-author{width: 47px;height: 47px;display: block;float: left;margin-left: 16px;}
+    .content-bottom .title-name{width: 100%;height: auto;line-height: 24px;font-size: 18px;color: #333333;font-weight: bold;text-align: left;float: left;}
+    .content-bottom .title-p{width: 100%;height: 44px;line-height: 44px;float: left;}
+    .content-bottom .title-p span{font-size: 14px;line-height: 44px;}
+    .content-bottom .title-p span.label{color: #9aa5b5;}
+    .content-bottom .title-p span.labal{color: #333333;}
+    .content-bottom .title-w{width: 100%;height: 24px;float: left;}
+    .content-bottom .title-w .title-w-bao{width: 24px;height: 24px;display: block;float: left;}
+    .content-bottom .title-w a{width: 104px;height: 24px;display: block;float: left;margin-left: 3px;background-color: #fff8e8;border-radius: 2px;text-align: center;font-size: 14px;line-height: 24px;color: #d8a245;}
+    .content-bottom .preview-info-details{width: 100%;height: auto;float: left;}
+    .content-bottom .preview-info-details .details-p{width: 100%;height: 40px;line-height: 40px;float: left;}
+    .content-bottom .preview-info-details .details-p span{font-size: 14px;line-height: 40px;}
+    .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-info-msg{width: 100%;height: 32px;float: left;margin-top: 25px;}
+    .content-bottom .preview-info-msg .info-msg{width: 588px;height: 32px;border-radius: 2px;background-color: #fef6f3;position: relative;font-size: 14px;line-height: 32px;text-align: center;padding-left: 16px;color: #e15616;}
+    .content-bottom .preview-info-msg .info-msg .icon:before{background-position: -93px -550px;width: 18px;height: 18px;left: 15px;top: 7px;position: absolute;}
+
+
+
+}
+
+
+
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+
+}

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

@@ -0,0 +1,62 @@
+/**
+ *Created by ZHJY on 2021/03/12.
+ */
+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'
+        ],
+        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: {
+
+
+    },
+    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);
+    }
+});

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

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网--采美正品联盟-正品授权-官方防伪网站</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/product/qualityauthorize.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!--美博会专题-->
+<div class="container" id="qualityAuthorize">
+    <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="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>
+    <div class="container-content clear">
+        <div class="inner">
+            <div class="content-top">
+                <div class="content-top-left">
+                    <div class="content-logo">
+                        <img src="/img/quality/logo.png" alt="">
+                    </div>
+                    <div class="content-mssg">
+                        <div class="mssg-name">上海品辉医疗正品授权</div>
+                        <div class="mssg-labels">
+                            <span>正品联盟成员</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="content-top-right">
+                    <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 id="swiperImage" class="CM____pic_thumb swiper-container" v-if="(!isPC)">
+                        <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="">
+                        </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="">
+                            <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">
+                        <div class="info-msg">
+                            <i class="icon icon-msg"></i>
+                            请仔细比对仪器上的序列号与SN码是否一致，您也可前往官方防伪网站查看更多信息。
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 引入底部 -->
+<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>