style: improve layout and styling of QR code components and login card

--bug=1059979 --user=王孝刚 【应用】应用开启登录认证，企业微信的登录二维码没有左右居中 https://www.tapd.cn/62980211/s/1749294

Author: wxg0103

ui/src/views/chat/user-login/index.vue

@@ -48,7 +48,7 @@
         <PasswordAuth></PasswordAuth>
       </el-card>
 
-      <el-card class="login-card" v-else>
+      <el-card class="login-card" v-else style="--el-card-padding: 0">
         <h2 class="mb-24" v-if="!showQrCodeTab && (loginMode === 'LDAP' || loginMode === 'LOCAL')">
           {{ loginMode == 'LOCAL' ? $t('views.login.title') : loginMode }}
         </h2>

ui/src/views/chat/user-login/scanCompinents/QrCodeTab.vue

@@ -2,7 +2,7 @@
   <el-tabs v-model="activeKey" @tab-change="selectTab">
     <template v-for="item in tabs" :key="item.key">
       <el-tab-pane :label="item.value" :name="item.key">
-        <div class="text-center mt-16" v-if="item.key === activeKey">
+        <div class="text-center" v-if="item.key === activeKey">
           <component
             :is="defineAsyncComponent(() => import(`./${item.key}QrCode.vue`))"
             :config="config"

ui/src/views/chat/user-login/scanCompinents/wecomQrCode.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="wecom-qr" class="wecom-qr" style="margin-left: 50px"></div>
+  <div id="wecom-qr" class="wecom-qr flex"></div>
 </template>
 
 <script lang="ts" setup>
@@ -80,8 +80,10 @@ init()
 </script>
 
 <style scoped lang="scss">
-.wecom-qr {
+#wecom-qr {
   margin-top: -20px;
   height: 331px;
+  justify-content: center;
+
 }
 </style>

ui/src/views/login/scanCompinents/wecomQrCode.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="wecom-qr" class="wecom-qr" style="margin-left: 50px"></div>
+  <div id="wecom-qr" class="wecom-qr flex"></div>
 </template>
 
 <script lang="ts" setup>
@@ -72,8 +72,10 @@ init()
 </script>
 
 <style scoped lang="scss">
-.wecom-qr {
+#wecom-qr {
   margin-top: -20px;
   height: 331px;
+  justify-content: center;
+
 }
 </style>