Merge remote-tracking branch 'origin/developerB' into developerB

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

@@ -1,47 +1,47 @@
-@charset "utf-8";
-body{margin:0}
+@charset "utf-8";body{margin:0}
 h1,h2,h3,p{margin:0}
 a{text-decoration:none;color:#000}
 ul{margin:0;padding:0;list-style-type:none}
 .fl-left{float:left}
 .fl-right{float:right}
 .fl-clear::after{display:block;content:'';clear:both}
-.params{border-collapse:unset;border:0;width: 100%}
-.product-params .params tr td{border: 0}
+.params{border-collapse:unset;border:0;width:100%}
+.product-params .params tr td{border:0}
 .product-params .params tr td:nth-child(2n-1){color:#999999}
-
-
-
 @media screen and (min-width:768px){body{background-color:#F8F8F8}
 .inner{width:1184px;margin:0 auto}
 .container-header{width:100%;height:auto}
-.header-top{width:100%;height:80px;box-sizing:border-box;padding:23px 0;background-image:linear-gradient(270deg,#191919 0%,#464646 100%)}
+.header-top{width:100%;height:80px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:23px 0;background-image:-o-linear-gradient(right,#191919 0%,#464646 100%);background-image:-webkit-gradient(linear,right top,left top,from(#191919),to(#464646));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;margin-top:16px}
-.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{width:100%;height:120px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:20px 16px;background-color:#ffffff;-webkit-box-shadow:0 2px 10px #ebecef;box-shadow:0 2px 10px #ebecef}
 .container-content .content-top-left{width:50%;float:left;height:100%}
-.container-main{width:1184px;height:590px;margin:0 auto;padding:25px;background:#FFF;border-radius:2px;box-sizing:border-box}
-.container-main .img-box{float: left;position:relative;width:540px;height:540px;border:1px solid #ececec;box-sizing:border-box;overflow:hidden;}
+.container-main{width:1184px;height:590px;margin:0 auto;padding:25px;background:#FFF;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.container-main .img-box{float:left;position:relative;width:540px;height:540px;border:1px solid #ececec;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
 .container-main .img-box .origin-logo-box{text-align:center;width:140px;position:absolute;top:45px;left:26px;z-index:10}
 .container-main .img-box .product-brand{max-width:140px;height:auto}
 .container-main .img-box .product-img{width:100%;height:100%}
-.container-main .img-box .product-authorize{width:116px;height:116px;position:absolute;bottom:20px;right:30px;z-index:10}
-.product-desc{width:570px;line-height:30px;color:#101010;float: right;}
+.container-main .img-box .product-authorize{width:72px;height:72px;position:absolute;bottom:20px;right:30px;z-index:10}
+.product-desc{width:570px;line-height:30px;color:#101010;float:right}
+.product-desc h3{font-size:20px}
 .product-desc .pink-box{margin:30px 0;padding:10px 16px;background:rgb(251,241,242);color:#bc1724}
 .product-desc .pink-box a{color:#bc1724}
 .product-desc .default-box{padding:10px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}
 .product-desc .dls{color:#999}
 .product-desc .statement a{color:#bc1724}
-.product-desc .statement a::after{content:'?';display:inline-block;width:14px;height:14px;text-align:center;line-height:16px;font-size:14px;border:1px solid #bc1724;border-radius:50%;margin-left:5px}
+.product-desc .statement a .icon-wenhao{font-weight: bold;margin-left: 5px}
+/*.product-desc .statement a::after{content:'?';display:inline-block;width:14px;height:14px;text-align:center;line-height:16px;font-size:14px;border:1px solid #bc1724;border-radius:50%;margin-left:5px}*/
 .product-desc p{margin:30px 0}
-.product-params{width:1184px;margin:16px auto 0;padding:25px;background:#FFFFFF;box-sizing:border-box}
-.product-params .title{position:relative;padding-bottom:10px;border-bottom:2px solid #eee;box-sizing:border-box}
+.product-params{width:1184px;margin:16px auto 0;padding:25px;background:#FFFFFF;-webkit-box-sizing:border-box;box-sizing:border-box}
+.product-params .title{position:relative;padding-bottom:10px;border-bottom:1px solid #eee;-webkit-box-sizing:border-box;box-sizing:border-box}
 .product-params .title::after{content:'';display:block;position:absolute;bottom:-2px;left:0;width:72px;height:2px;background:#101010}
 .product-params .title span{font-size:18px;font-weight:bold}
-.product-params .pc-params li{float: left;width: 50%;margin: 30px 0}
-.product-params .pc-params li>div{float: left}
-.product-params .pc-params li .p-title{color: #999999}
+.product-params .p-content{color:#101010}
+.product-params .pc-params{margin-top:30px}
+.product-params .pc-params li{float:left;width:50%;margin:15px 0}
+.product-params .pc-params li>div{float:left}
+.product-params .pc-params li .p-title{color:#999999}
 .footer{margin-top:60px;padding:20px 0;background-color:#eee}
 .footer p{text-align:center;font-size:14px;color:#999}
 .footer p a{color:#999}
@@ -50,45 +50,20 @@ ul{margin:0;padding:0;list-style-type:none}
 .footer p a:hover{color:#F52E3E}
 .footer-mobile{display:none}
 .product-params .params.mobile{display:none}
-
 .statementModel{position:fixed;top:0;left:0;z-index:999;width:100%;height:100vh;background:rgba(0,0,0,.4)}
-.statementModel .model{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:620px;height:380px;border-radius:4px;background:#fff;overflow:hidden}
+.statementModel .model{position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);width:620px;height:380px;border-radius:4px;background:#fff;overflow:hidden}
 .statementModel .title{padding:15px 20px;background:#f1f1f1;font-size:18px}
 .statementModel .close{position:absolute;right:20px;top:10px;display:block;width:30px;height:30px;background:url(/img/quality/icon-close.png) no-repeat center;cursor:pointer}
 .statementModel .close:hover{background-image:url(/img/quality/icon-close-hover.png)}
-.statementModel .content{padding:15px;height:296px;overflow-y:scroll}
-.float-zplm{position: fixed;z-index: 99; bottom: 16%;right: 2%; width:90px;}
-.float-zplm img{width: 100%}
-
-/*授权证书*/
-.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,.3)}
-.sq-book-modal img{display: block;width: 622px;height: 467px;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);
-animation: showBig 1s ease;
-}
-@keyframes showBig {
-    from{
-        width: 0;
-        height: 0;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%,-50%)
-    }
-    to{
-        position: fixed;
-        width: 622px;
-        height: 467px;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%,-50%)
-    }
-}
-}
-
-@media screen and (max-width:768px){
-body{background: #fff}
+.statementModel .content{padding:15px;height:296px;overflow-y:scroll;line-height: 1.8;text-align: justify;text-indent: 2em}
+.float-zplm{position:fixed;z-index:99;bottom:16%;right:2%;width:90px}
+.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:997;top:0;left:0;background:rgba(0,0,0,.7);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.sq-book-img{width:622px;height:467px;-webkit-box-shadow:0 10px 28px rgba(255,199,30,.26);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){body{background:#fff}
 .container{font-size:3.6vw;color:#101010}
 .container-header{display:none}
 .container-content{width:100%}
@@ -97,52 +72,70 @@ body{background: #fff}
 .container-main .product-img{width:100vw}
 .container-main .img-box .origin-logo-box{position:absolute;top:4vw;left:4vw;max-width:30vw;text-align:center;z-index:9}
 .container-main .img-box .origin-logo-box img{max-width:30vw}
-.container-main .img-box .product-authorize{width:23vw;height:23vw;position:absolute;bottom:3.2vw;right:4vw}
+.container-main .img-box .product-authorize{width:13.8vw;height:13.8vw;position:absolute;bottom:3.2vw;right:4vw}
 .product-desc a{color:#bc1724}
-.product-desc h3{background:linear-gradient(to right,#101010,#404040);color:#fefefe;padding:4vw;font-size:4.4vw}
+.product-desc h3{background:-o-linear-gradient(left,#101010,#404040);background:-webkit-gradient(linear,left top,right top,from(#101010),to(#404040));background:linear-gradient(to right,#101010,#404040);color:#fefefe;padding:4vw;font-size:4.4vw}
 .product-desc .pink-box{padding:3.2vw 4vw;background:rgb(251,241,242);color:#bc1724;line-height:8vw}
 .product-desc .default-box{width:92.3vw;margin:0 auto;padding:3.2vw 0;border-bottom:0.4vw solid #eee;line-height:8vw}
-.product-desc .statement a::after{content:'?';display:inline-block;width:3vw;height:3vw;text-align:center;line-height:3vw;font-size:3vw;border:1px solid #bc1724;border-radius:50%;margin-left:1vw}
+.product-desc .statement a{display:block;padding-right:20px;width:23.6vw;}
+.product-desc .statement a .icon-wenhao{font-weight: bold;margin-left: 5px;}
 .product-desc p{padding:3.2vw 4vw;line-height:6vw}
 .product-desc .sn-number{padding:3.2vw 0;background:#f5f5f5}
 .product-desc .sn-number .item-row{background:rgb(251,241,242);padding:3.2vw 4vw}
 .product-params{padding:3.2vw 4vw}
 .product-params .title{padding:4vw 0;border-bottom:0.4vw solid #eee;font-size:4vw;font-weight:bold}
-.product-params .params{margin-top:3vw;border-spacing: 0 4vw}
-.product-params .params tr{line-height:6.6vw;}
+.product-params .params{margin-top:3vw;border-spacing:0 4vw}
+.product-params .params tr{line-height:6.6vw}
 .product-params .footer{display:none}
 .footer{display:none}
 .footer-mobile{padding:8vw 0 4vw;line-height:7vw;text-align:center;background:#f5f5f5}
 .footer-mobile p{color:#b2b2b2;font-size:2.4vw}
 .footer-mobile a{color:#f52e3e;font-size:3vw;font-weight:bold}
 .product-params .pc-params.pc{display:none}
-
 .statementModel{position:fixed;top:0;left:0;z-index:999;width:100%;height:100vh;background:rgba(0,0,0,.4)}
-.statementModel .model{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:86vw;height:128vw;border-radius:4px;background:#fff}
+.statementModel .model{position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);width:86vw;height:128vw;border-radius:4px;background:#fff}
 .statementModel .title{padding:4vw 5vw;background:#f1f1f1;font-size:4.6vw;text-align:center}
 .statementModel .close{position:absolute;right:0;top:-10vw;display:block;width:8.2vw;height:8.2vw;background:url(/img/quality/mb-close.png) no-repeat center;background-size:8.2vw;cursor:pointer}
-.statementModel .content{padding:4vw;height:100vw;overflow-y:scroll}
+.statementModel .content{padding:4vw;height:100vw;overflow-y:scroll;line-height: 1.8;text-align: justify;text-indent: 2em;}
+.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: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;-webkit-box-shadow:0 10px 28px rgba(255,199,30,.26);box-shadow:0 10px 28px rgba(255,199,30,.26)}
+.sq-book-img img{width:100%}
+}.myZoomIn{-webkit-animation:zoomIn 1s ease;animation:zoomIn 1s ease}
+.myZoomOut{-webkit-animation:zoomOut 1s ease;animation:zoomOut 1s ease}
+@-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}
+}
 
-.float-zplm{position: fixed;z-index: 99; bottom: 30vw;right: 3.4vw; width:15.7vw;}
-.float-zplm img{width: 100%}
-/*授权证书*/
-.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,.3)}
-.sq-book-modal img{display: block;width: 92vw;height: 69vw;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);
-animation: showBig 1s ease;}
+@font-face {font-family: "iconfont";
+  src: url('//at.alicdn.com/t/font_2466631_xct76hehlhc.eot?t=1617677320008'); /* IE9 */
+  src: url('//at.alicdn.com/t/font_2466631_xct76hehlhc.eot?t=1617677320008#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANIAAsAAAAABuwAAAL6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBeIIBATYCJAMICwYABCAFhG0HMBsnBhEVlClkXyTYnD24tgJVfeZWhGDmcRfFUCmL2UvWCFQafBMPfGvpn905gqC6S0qk+iILBBJI1SGB0DGmRA6NuKHL/dz8F0hxvMbmQL70qQly1JgC8ViccPc/pwUX4fveVZiQ7PPICuh+wpd3uZKDjY2ZkFNmc6RImHbGHmq9BsCYBfY/h0ubXmDzA+Uy17KoF2C8NcAx1x3ZHcgB+C3Da12Kh7yfgKIeY4RpvkgGyYvIsICwadhvIvmCUxT1SF6QbZgbhQtI+eRk8obz0e+H/8aGPIlMiuQs2ujtIJN+F2hMeqBlqEgE1nJ66ItIMQaRsKzRuECaBMdIFd1gNIhjZQZ+g1ZLqoWj/vOELJJeBg1gPhOLsx81PQER2hdh56QLiG2wTU+9W/buMnp/nv5e+fFm/PladjpHY/rT8FXLfy7RsP48+ba8f3rlhbE2t+NN6fqxbDrsN+8OdOu84Q2Q0v3bW2t/6PnDgHRSHk5yOicne0BwOuDkPS1kFdZ3wklZW2emXu+RzaDeqN5rzGw2toxCAHgvCg3oDbhGo4Kf1awXWSqNTt+/3aTvFE/+mjeVnrRa/a9BUZMevf2tOT6wzY7upZ4fvoC++CxkEmidIrHzd/+N4WPS2VXyuPOlCL5Nr7nI3joiw8zkb8oU+LmsgWXR4xBJ8pRMbEosytklAN2waEGs7X5MlXa9iT7IF1g6JHKakMobgozYMZBR0gdZeaaJUDRaZXFJB5YXYgGj3CEI6l4hUdUPqbp3ZMT+QEa3K2TVQx6KVoSONUuGBU+byrgU3MDqCN6aYsU0osWZfXS24ZLznIgwRk49D1i6WY5UMEZeYkK6c2wRBYopgjI6DMOQIGHycS26K5KUDEM1fZO+piijmYqhJYE2wMoR8KyRmJLVhVb5+T7k2AotcUdJl3oMsZTXObDozAHIijAeVPIoj6R2HDYhFKAwEgFlpEchDRKQNPfyoTWhcyf4EyUGrqSGCvXtxdHfrYEiIksC7ZbKbsfYXVImAwAA') format('woff2'),
+  url('//at.alicdn.com/t/font_2466631_xct76hehlhc.woff?t=1617677320008') format('woff'),
+  url('//at.alicdn.com/t/font_2466631_xct76hehlhc.ttf?t=1617677320008') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('//at.alicdn.com/t/font_2466631_xct76hehlhc.svg?t=1617677320008#iconfont') format('svg'); /* iOS 4.1- */
+}
 
-@keyframes showBig {
-    from{
-        width: 0;
-        height: 0;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%,-50%)
-    }
-    to{
-        width: 92vw;height: 69vw;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%)
-    }
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-wenhao:before {
+  content: "\e71d";
 }
+

src/main/resources/static/js/base.js

@@ -16,8 +16,9 @@ if(localStorage.getItem('userInfo')){
         GLOBAL_USER_IDENTITY = 1;
     }
 } else {
+    var pathname = window.location.pathname;
     var weChatLoginFlag = (Number(getBaseCookie("weChatAutoLogin"))===1 || Number(getBaseCookie("weChatAutoLogin"))===2);
-    if(!weChatLoginFlag){
+    if(pathname.indexOf('/product/auth/') === -1 && !weChatLoginFlag ){
         var userAgent = navigator.userAgent.toLowerCase();
         if (userAgent.match(/MicroMessenger/i)) {
             // 微信浏览器自动授权登录

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

@@ -15,7 +15,10 @@ var qualityAuthorize = new Vue({
         //声明内容
         statementContent:'',
         //控制授权证书是否弹出
-        isShowSqBookModal:false
+        isShowSqBookModal:false,
+        sqBookModal:'',
+        cmContent:'',
+        isCmComtent:false
     },
     filters:{
         snCode:function (code) {
@@ -45,10 +48,17 @@ var qualityAuthorize = new Vue({
         openStatementDialog:function(flag){
             if(flag === 1){
             //代理声明
+                this.isCmComtent = false;
                 this.statementContent = this.parameters.statementContent
             }else{
             //采美声明
-                this.statementContent = '采美声明！'
+                this.isCmComtent = true;
+                this.cmContent = `
+                <p>目前，在市面上经常发现不少伪劣医疗美容产品/仪器，让众多的消费者无法辨别产品/仪器的真假，并且给品牌方及品牌代理商造成不少困扰</p>
+                <p>为了提高消费者对产品/仪器的可信度。由彩美信息技术有限公司发起并提供技术支持，且得到各品牌与代理商的认可及授权后，共同打造正品
+                联盟平台。将产品/仪器的品牌授牌信息纳入到正品联盟平台。消费者可通过授权牌上二维码扫码得知该产品/仪器的品牌授权信息。通过这些信
+                息即可得知产品/仪器的真假，是否为品牌以及品牌代理商授权过的正品，从而解决消费者与品牌/品牌代理商的困扰。</p>
+                `;
             }
             this.showStatement = true;
         },
@@ -58,7 +68,7 @@ var qualityAuthorize = new Vue({
         },
         //授权证书影藏
         hideSqBookModal:function(){
-            this.isShowSqBookModal = false
+           this.isShowSqBookModal = false;
         }
     },
     // created:function() {
@@ -68,6 +78,9 @@ var qualityAuthorize = new Vue({
     //     })
     // }
     mounted:function () {
+        setBaseCookie("weChatAutoLogin", 2);
+        this.sqBookModal = $('#sq-book-modal');
+        console.log(1);
         //根据地址获取产品id
         var _that = this;
         var pathname = window.location.pathname;

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

@@ -44,9 +44,9 @@
                         <div class="item-row"><span class="dls">代理商：</span><span>{{parameters.agentName}}</span></div>
                         <div class="item-row statement">
                             <!-- 链接 -->
-                            <a :href="parameters.statementLink" v-if="parameters.statementType === 2">代理声明</a>
+                            <a :href="parameters.statementLink" v-if="parameters.statementType === 2">代理声明<i class="iconfont icon-wenhao"></i></a>
                             <!-- 弹窗 -->
-                            <a href="#" @click.prevent="openStatementDialog(1)" v-else>代理声明</a></div>
+                            <a href="#" @click.prevent="openStatementDialog(1)" v-else>代理声明<i class="iconfont icon-wenhao"></i></a></div>
                     </div>
                     <p>该仪器由{{parameters.agentName ? parameters.agentName : parameters.brandName}}授予{{parameters.authParty}}正品拥有</p>
                     <div class="pink-box sn-number">
@@ -86,20 +86,25 @@
         <div class="statementModel" v-show="showStatement" style="display: none">
             <div class="model"><i class="close" @click="closeStatementModel"></i>
                 <!-- 标题 -->
-                <div class="title">代理声明</div>
+                <div class="title">{{isCmComtent?'采美声明':'代理声明'}}</div>
                 <!-- 内容 -->
-                <div class="content">{{statementContent}}</div>
+                <div class="content" v-if="!isCmComtent">{{statementContent}}</div>
+                <div class="content" v-html="cmContent" else></div>
             </div>
         </div>
-        <div class="float-zplm"><a target="_blank" href="#"><img src="/img/quality/float-img.png"></a></div>
+        <div class="float-zplm"><a target="_blank" href="https://www-b.caimei365.com/topic.html?type=6&name=%E6%AD%A3%E5%93%81%E8%81%94%E7%9B%9F"><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>
 <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>
+</body>