公众号推文

webchat-front-oauth/src/App.vue

@@ -3,9 +3,18 @@ import { RouterLink, RouterView } from 'vue-router'
 </script>
 
 <template>
-  <RouterView />
+  <div class="oauth-container">
+    <RouterView />
+  </div>
+  
 </template>
 
 <style scoped>
-
+.oauth-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
 </style>

webchat-front-oauth/src/assets/main.css

@@ -20,15 +20,6 @@ a,
   }
 }
 
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
+#app {
+  height: 100%;
+}

webchat-front-oauth/src/views/login.vue

@@ -1,4 +1,5 @@
 <template>
+
   <div class="login-container">
       <p class="login-form-title"><h2>统一登录</h2></p>
       <p class="login-form-title-l2"><h4>基于分布式WebSocket的在线IM对话软件</h4></p>
@@ -13,7 +14,7 @@
       <router-link :to="{ path: '/register', query: { call_back: callBackUrl } }"  tag="a">
         <a-button type="link" style="line-height: 40px; color: black;">注册新账号</a-button>
       </router-link>
-    </div>
+  </div>
 </template>
 
 <script setup>
@@ -40,7 +41,7 @@ const login = async () => {
         window.location.href = callBackUrl.value+'?oauthCode='+response.data.data;
       }
     } else {
-      message.error(response.data.msg);
+      message.error(response.data.msg, 60);
     }
   } catch (error) {
     // 处理错误，例如显示错误消息
@@ -61,7 +62,6 @@ const login = async () => {
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
-    margin-left: calc((100% - 40px) / 2);
     border: 1px solid #c0c5cd;
     padding: 40px;
   }

webchat-front-oauth/src/views/register.vue

@@ -157,7 +157,6 @@ const refreshPicCheckCode = async () => {
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
-  margin-left: calc((100% - 40px) / 2);
   border: 1px solid #c0c5cd;
   padding: 40px;
 }