修改登录页面二维码展示

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>
@@ -27,21 +29,27 @@
                 <p><b>人工咨询</b>扫左侧码，进入手机端-我的-页面底部“联系我们”</p>
             </div>
             <div class="right">
-                <p><b>网站备案</b>© 2012-2025 something ,  <a href="" >Inc. All rights 测试</a></p>
+                <p><b>网站备案</b>© 2012-2025 something , <a href="">Inc. All rights 测试</a></p>
                 <p></p>
             </div>
         </div>
     </div>
 </template>
 <script>
+import VueQr from 'vue-qr'
 export default {
+    components: {
+        VueQr
+    },
     data() {
         return {
-            checked:false
+            url: 'https://example.com',
+            logoUrl: '/path/to/logo.png',
+            checked: false
         }
     },
     methods: {
-        jumpDoc(){
+        jumpDoc() {
 
         }
     }
@@ -74,7 +82,8 @@ export default {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    .title{
+
+    .title {
         font-family: Microsoft YaHei;
         font-size: 22px;
         font-weight: bold;
@@ -83,7 +92,8 @@ export default {
         letter-spacing: 0.08em;
         color: #1E2226;
     }
-    .sub_title{
+
+    .sub_title {
         font-family: Microsoft YaHei;
         font-size: 12px;
         font-weight: normal;
@@ -93,7 +103,8 @@ export default {
         margin-top: 32px;
         margin-bottom: 12px;
     }
-    .img{
+
+    .img {
         width: 192px;
         height: 192px;
         background: #006AFF;
@@ -102,7 +113,8 @@ export default {
     }
 }
 
-.attention ,.tip{
+.attention,
+.tip {
     font-size: 12px;
     font-weight: normal;
     line-height: 13px;
@@ -110,7 +122,8 @@ export default {
     color: #626573;
     text-align: center;
     display: flex;
-    justify-content: center;    
+    justify-content: center;
+
     b {
         font-size: 12px;
         font-weight: normal;
@@ -122,9 +135,11 @@ export default {
         }
     }
 }
-.attention{
+
+.attention {
     margin-bottom: 12px;
 }
+
 @media(max-width: 1420px) {
     .index_rootContainer {
         margin-right: 102px
@@ -141,7 +156,8 @@ export default {
     height: 192px;
     box-sizing: border-box;
     gap: 72px;
-    b{
+
+    b {
         font-size: 12px;
         font-weight: bold;
         line-height: 13px;
@@ -149,25 +165,30 @@ export default {
         color: #1E2226;
     }
 
-    .left{
+    .left {
         gap: 12px;
-        div{
+
+        div {
             display: flex;
             flex-direction: column;
             gap: 8px;
             text-align: left;
         }
-        img{
+
+        img {
             width: 97px;
             height: 100px;
         }
     }
-    .center,.right{
+
+    .center,
+    .right {
         display: flex;
         flex-direction: column;
         gap: 24px;
         text-align: left;
-        p{
+
+        p {
             display: flex;
             gap: 8px;
         }