修改登录页面二维码展示

package.json

@@ -15,6 +15,7 @@
     "regenerator-runtime": "^0.14.1",
     "vue": "^2.6.14",
     "vue-clickaway": "^2.2.2",
+    "vue-qr": "^4.0.9",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },

src/views/login.vue

@@ -4,9 +4,11 @@
             <div class="index_rootContainer">
                 <b class="title">扫码登录</b>
                 <p class="sub_title mt32">打开 <b>微信</b> 扫码登录</p>
-                <div class="img mb32">
-                    
+                <div class=" mb32">
+                    <vue-qr :text="url" :size="192" :dot-scale="1"></vue-qr>
                 </div>
+                <!-- :logo-src="logoUrl"
+                :logo-scale="0.2" -->
                 <div class="attention gap10">
                     <el-checkbox v-model="checked"></el-checkbox>
                     <b>登录即代表同意 <a @click="jumpDoc">《用户协议》</a>和 <a @click="jumpDoc">《隐私条款》</a></b>
@@ -34,9 +36,15 @@
     </div>
 </template>
 <script>
+import VueQr from 'vue-qr'
 export default {
+    components: {
+        VueQr
+    },
     data() {
         return {
+            url: 'https://example.com',
+            logoUrl: '/path/to/logo.png',
             checked: false
         }
     },
@@ -74,6 +82,7 @@ export default {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
+
     .title {
         font-family: Microsoft YaHei;
         font-size: 22px;
@@ -83,6 +92,7 @@ export default {
         letter-spacing: 0.08em;
         color: #1E2226;
     }
+
     .sub_title {
         font-family: Microsoft YaHei;
         font-size: 12px;
@@ -93,6 +103,7 @@ export default {
         margin-top: 32px;
         margin-bottom: 12px;
     }
+
     .img {
         width: 192px;
         height: 192px;
@@ -102,7 +113,8 @@ export default {
     }
 }
 
-.attention ,.tip{
+.attention,
+.tip {
     font-size: 12px;
     font-weight: normal;
     line-height: 13px;
@@ -111,6 +123,7 @@ export default {
     text-align: center;
     display: flex;
     justify-content: center;
+
     b {
         font-size: 12px;
         font-weight: normal;
@@ -122,9 +135,11 @@ export default {
         }
     }
 }
+
 .attention {
     margin-bottom: 12px;
 }
+
 @media(max-width: 1420px) {
     .index_rootContainer {
         margin-right: 102px
@@ -141,6 +156,7 @@ export default {
     height: 192px;
     box-sizing: border-box;
     gap: 72px;
+
     b {
         font-size: 12px;
         font-weight: bold;
@@ -151,22 +167,27 @@ export default {
 
     .left {
         gap: 12px;
+
         div {
             display: flex;
             flex-direction: column;
             gap: 8px;
             text-align: left;
         }
+
         img {
             width: 97px;
             height: 100px;
         }
     }
-    .center,.right{
+
+    .center,
+    .right {
         display: flex;
         flex-direction: column;
         gap: 24px;
         text-align: left;
+
         p {
             display: flex;
             gap: 8px;