微信引导页二维码和样式

src/views/GoXCX.vue

@@ -3,7 +3,9 @@
     <Title @goback="goback" show_back="true" arrowColor="black"></Title>
     <div class="page-banner">
       <img class="bg" src="../images/GoXCX/bg_code.jpg">
-      <img class="qrcode" :src="qrcode">
+      <div class="qrcode-container">
+        <img class="qrcode" src="../images/GoXCX/qrcode_img.jpg">
+      </div>
     </div>
     <div class="tip-title">如何完成打卡？</div>
     <div class="tip-content">1、识别上方二维码，打开「运动打卡」小程序</div>
@@ -22,7 +24,6 @@
     },
     data() {
       return {
-        qrcode: '1231231231231'
       };
     },
     methods: {
@@ -46,16 +47,22 @@
         height: 6.4rem;
         display: block;
       }
-      .qrcode {
+      .qrcode-container {
         width: 3.36rem;
         height: 3.36rem;
-        background: #fff;
-        border-radius: 50%;
-        overflow: hidden;
         position: absolute;
         top: 1.82rem;
         left: 50%;
         transform: translateX(-50%);
+        background: #fff;
+        border-radius: 50%;
+        overflow: hidden;
+        padding: .16rem;
+        box-sizing: border-box;
+        .qrcode {
+          width: 100%;
+          height: 100%;
+        }
       }
     }
     .tip-title {