Sfoglia il codice sorgente

正品联盟公众号二维码

yuwenjun 3 anni fa
parent
commit
0e01e53403

+ 8 - 1
src/main/resources/static/css/product/qualityauthorize.css

@@ -70,6 +70,10 @@ ul{margin:0;padding:0;list-style-type:none}
 .not-found {height: calc(100vh - 80px); display: flex;justify-content: center;align-items: center;flex-direction: column;}
 .not-found img{}
 .not-found p{font-size: 20px;color: #a8a8a8;padding: 60px;text-align: center;}
+.qrCodeImage{ width: 160px; position: fixed;right: 0 ; bottom: 80px;padding: 15px;border-radius: 4px; background: #fff;}
+.qrCodeImage img{ width: 100%; display: block;}
+.qrCodeImage .foot-text{text-align: center;font-size: 14px;line-height: 1.4}
+.qrCodeImage .closeHandle{ display: block;font-size: 26px;position: absolute;left: 0;top: -10px; color: #333;cursor: pointer}
 }
 
 @media screen and (max-width:768px){body{background:#fff}
@@ -117,7 +121,10 @@ ul{margin:0;padding:0;list-style-type:none}
 .not-found{width:100vw;padding-top: 40vw;text-align: center}
 .not-found img{width: 30vw}
 .not-found p{font-size: 4vw;margin-top: 6vw;color: #a8a8a8}
-
+.qrCodeImage{position: fixed;padding: 2vw; bottom: 30vw;right: 1vw; width: 30vw; background: #fff;box-shadow: -2px 2px 4px rgba(0,0,0,.05);border-radius: 4px; }
+.qrCodeImage img{ width: 100%;  display: block;}
+.qrCodeImage .foot-text{text-align: center;font-size: 3vw;line-height: 1.4}
+.qrCodeImage .closeHandle{ display: block;font-size: 6vw;position: absolute;left: 0;top: -2vw; color: #333;cursor: pointer}
 
 }.myZoomIn{-webkit-animation:zoomIn 1s ease;animation:zoomIn 1s ease}
 .myZoomOut{-webkit-animation:zoomOut 1s ease;animation:zoomOut 1s ease}

+ 6 - 1
src/main/resources/static/js/product/qualityauthorize.js

@@ -20,7 +20,8 @@ var qualityAuthorize = new Vue({
         cmContent:'',
         isCmComtent:false,
         message:'',
-        isLoading:false
+        isLoading:false,
+        showQrcodeImage:true
     },
     filters:{
         snCode:function (code) {
@@ -79,6 +80,10 @@ var qualityAuthorize = new Vue({
         //授权证书影藏
         hideSqBookModal:function(){
            this.isShowSqBookModal = false;
+        },
+        //关闭微信二维码
+        handleColseQrCodeImage: function(){
+            this.showQrcodeImage = false
         }
     },
     // created:function() {

+ 9 - 0
src/main/resources/templates/product/qualityauthorize.html

@@ -107,6 +107,15 @@
                                    href="https://www-b.caimei365.com/topic-6.html?name=%E6%AD%A3%E5%93%81%E8%81%94%E7%9B%9F"><img
                 src="/img/quality/float-img.png"></a></div>
 
+        <!-- 微信二维码 -->
+        <div class="qrCodeImage" v-if="showQrcodeImage && parameters.qrCodeImage">
+            <span class="closeHandle" @click="handleColseQrCodeImage">&times;</span>
+            <img :src="parameters.qrCodeImage" alt="公众号"/>
+            <div class="foot-text">
+                <div v-if="!isPC">长按识别</div>
+                <div>关注公众号了解更多</div>
+            </div>
+        </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">