调整样式

src/components/MinProLogin.vue

@@ -39,8 +39,13 @@
       <div v-if="selectedTab === 'wechat'">
         <div class="qr-code" id="login_container">
           <img style="cursor: pointer;width:310px" :src="state.loginimg" />
+          <transition name="fade">
+            <div v-if="state.scanSuccess" class="overlay">
+              {{scanError}}
+            </div>
+          </transition>
         </div>
-        <div v-if="scanError" class="error-message">{{ scanError }}</div>
+        <!-- <div v-if="scanError" class="error-message">{{ scanError }}</div> -->
       </div>
     </div>
   </div>
@@ -70,7 +75,8 @@ export default {
       captchaImage: '',
       codeId: "",
       loginimg: "",
-      usercode: ""
+      usercode: "",
+      scanSuccess:false
     });
     // 切换标签页
     const switchTab = (tab) => {
@@ -168,7 +174,9 @@ export default {
         }
         if (message.status == 1)//开始扫码登录
         {
-          scanError.value = '已扫码等待授权...'
+          scanError.value = '已扫码成功,等待授权..'
+          state.scanSuccess = true;
+          
         } if (message.status == 2)//授权成功
         {
           scanError.value = '授权成功'
@@ -420,6 +428,8 @@ export default {
 </script>
 
 <style scoped>
+
+
 .login-container {
   display: flex;
   justify-content: center;
@@ -433,6 +443,8 @@ export default {
   /* 设置为相对定位，以支持绝对定位的子元素 */
   padding-bottom: 60px;
   /* 为底部版权信息预留空间 */
+
+  
 }
 
 .login-box {
@@ -568,5 +580,28 @@ button:disabled {
     border-radius: 4px;
     border: 1px solid #ccc;
   }
+  /* 添加样式 */
+.overlay {
+  position: absolute;
+  top: 33%;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 }
 </style>