正品联盟页面兼容性调整

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

@@ -71,63 +71,11 @@ ul{margin:0;padding:0;list-style-type:none}
 .float-zplm img{width: 100%}
 
 /*授权证书*/
+.close{position: absolute;display: block;width: 32px;height: 32px;background: url(/img/quality/mb-close.png) no-repeat center;cursor:pointer;z-index: 999;background-size: 32px;right: 0;top: -50px;}
 .container-main .sq-book{position:absolute;width: 149px;height: 112px;bottom:20px;left:30px;z-index:10;}
-.sq-book-modal{width: 100%;height: 100vh;position: fixed;z-index: 9999;top: 0;left: 0;background: rgba(0,0,0,.7)}
-.sq-book-modal img{display: block;width: 622px;height: 467px;position: fixed;top: 50%;left: 50%;
--webkit-transform: translate(-50%,-50%);
-transform: translate(-50%,-50%);
--ms-transform: translate(-50%,-50%);
--webkit-animation: showBig 1s ease;
-        animation: showBig 1s ease;
-}
-@-webkit-keyframes showBig {
-    from{
-        width: 0;
-        height: 0;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        -webkit-transform: translate(-50%,-50%);
-        transform: translate(-50%,-50%);
-        -moz-transform:translate(-50%,-50%);
-        -ms-transform: translate(-50%,-50%);
-    }
-    to{
-        width: 622px;
-        height: 467px;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        -webkit-transform: translate(-50%,-50%);
-        transform: translate(-50%,-50%);
-        -moz-transform:translate(-50%,-50%);
-        -ms-transform: translate(-50%,-50%);
-    }
-}
-@keyframes showBig {
-    from{
-        width: 0;
-        height: 0;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        -webkit-transform: translate(-50%,-50%);
-        transform: translate(-50%,-50%);
-        -moz-transform:translate(-50%,-50%);
-        -ms-transform: translate(-50%,-50%);
-    }
-    to{
-        width: 622px;
-        height: 467px;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        -webkit-transform: translate(-50%,-50%);
-        transform: translate(-50%,-50%);
-        -moz-transform:translate(-50%,-50%);
-        -ms-transform: translate(-50%,-50%);
-    }
-}
+.sq-book-modal{width: 100%;height: 100vh;position: fixed;z-index: 997;top: 0;left: 0;background: rgba(0,0,0,.7);display: flex;justify-content: center;align-items: center}
+.sq-book-img{width: 622px;height: 467px;box-shadow: 0 10px 28px rgba(255,199,30,.26);position: fixed;left: 0;right: 0;margin: 0 auto;top: 20%;z-index: 998}
+.sq-book-img img{width:100%;height: auto}
 }
 
 @media screen and (max-width:768px){
@@ -169,64 +117,75 @@ body{background: #fff}
 .float-zplm{position: fixed;z-index: 99; bottom: 30vw;right: 3.4vw; width:15.7vw;}
 .float-zplm img{width: 100%}
 /*授权证书*/
+.close{position: absolute;display: block;width: 7.2vw;height: 7.2vw;background: url(/img/quality/mb-close.png) no-repeat center;cursor:pointer;z-index: 999;background-size: 7.2vw;right: 0;top:-11.5vw;}
 .container-main .sq-book{position:absolute;width: 27.2vw;height: 20.6vw;bottom:4.1vw;left:4vw;z-index:10;}
-.sq-book-modal{width: 100%;height: 100vh;position: fixed;z-index: 9999;top: 0;left: 0;background: rgba(0,0,0,.7)}
-.sq-book-modal img{display: block;width: 92vw;height: 69vw;position: fixed;top: 41.2vw;left: 50%;
--webkit-transform: translateX(-50%);
-        transform: translateX(-50%);
-        -moz-transform:translateX(-50%);
-        -ms-transform: translateX(-50%);/*
--webkit-animation: showBig 1s ease;
-        animation: showBig 1s ease;*/}
-
-@-webkit-keyframes showBig {
-    from{
-        width: 0;
-        height: 0;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        -webkit-transform: translate(-50%,-50%);
-        transform: translate(-50%,-50%);
-        -moz-transform:translate(-50%,-50%);
-        -ms-transform: translate(-50%,-50%);
-    }
-    to{
-        width: 92vw;
-        height: 69vw;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        -webkit-transform: translate(-50%,-50%);
-        transform: translate(-50%,-50%);
-        -moz-transform:translate(-50%,-50%);
-        -ms-transform: translate(-50%,-50%);
-    }
+.sq-book-modal{width: 100%;height: 100vh;position: fixed;z-index: 997;top: 0;left: 0;background: rgba(0,0,0,.7)}
+.sq-book-img{z-index: 998;display: block;width: 92vw;height: 69vw;position: fixed;top: 41.2vw;left: 0;right:0;margin:0 auto;box-shadow: 0 10px 28px rgba(255,199,30,.26);
+}
+.sq-book-img img{width:100%;}
+}
+
+.myZoomIn{
+    animation: zoomIn 1s ease;
+}
+.myZoomOut{
+    animation: zoomOut 1s ease;
 }
 
-@keyframes showBig {
-    from{
-        width: 0;
-        height: 0;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        -webkit-transform: translate(-50%,-50%);
-        transform: translate(-50%,-50%);
-        -moz-transform:translate(-50%,-50%);
-        -ms-transform: translate(-50%,-50%);
-    }
-    to{
-        width: 92vw;
-        height: 69vw;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        -webkit-transform: translate(-50%,-50%);
-        transform: translate(-50%,-50%);
-        -moz-transform:translate(-50%,-50%);
-        -ms-transform: translate(-50%,-50%);
-    }
+@-webkit-keyframes zoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3)
+  }
+
+  50% {
+    opacity: 1
+  }
 }
 
+@keyframes zoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3)
+  }
+
+  50% {
+    opacity: 1
+  }
+}
+
+
+
+@-webkit-keyframes zoomOut {
+  0% {
+    opacity: 1
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3)
+  }
+
+  to {
+    opacity: 0
+  }
+}
+
+@keyframes zoomOut {
+  0% {
+    opacity: 1
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3)
+  }
+
+  to {
+    opacity: 0
+  }
 }

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

@@ -15,7 +15,8 @@ var qualityAuthorize = new Vue({
         //声明内容
         statementContent:'',
         //控制授权证书是否弹出
-        isShowSqBookModal:false
+        isShowSqBookModal:false,
+        sqBookModal:''
     },
     filters:{
         snCode:function (code) {
@@ -58,7 +59,7 @@ var qualityAuthorize = new Vue({
         },
         //授权证书影藏
         hideSqBookModal:function(){
-            this.isShowSqBookModal = false
+           this.isShowSqBookModal = false;
         }
     },
     // created:function() {
@@ -69,6 +70,7 @@ var qualityAuthorize = new Vue({
     // }
     mounted:function () {
         setBaseCookie("weChatAutoLogin", 2);
+        this.sqBookModal = $('#sq-book-modal');
         console.log(1);
         //根据地址获取产品id
         var _that = this;

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

@@ -94,9 +94,13 @@
         <div class="float-zplm"><a target="_blank" href="/index.html"><img src="/img/quality/float-img.png"></a></div>
 
         <!--授权图模态框-->
-        <div class="sq-book-modal" @click="hideSqBookModal" v-show="isShowSqBookModal">
-            <img :src="parameters.certificateImage">
-        </div>
+        <div class="sq-book-modal" @click="hideSqBookModal" v-show="isShowSqBookModal" id="sq-book-modal"></div>
+        <transition enter-active-class="myZoomIn" leave-active-class="myZoomOut">
+            <div class="sq-book-img myZoomIn"  v-show="isShowSqBookModal">
+                    <i class="close" @click="hideSqBookModal"></i>
+                    <img :src="parameters.certificateImage">
+            </div>
+        </transition>
     </template>
 </div><!-- 引入底部 -->
 <template th:replace="components/foot-link"></template>