perf: 登录页手机登录和账号登录更换为图标形式

@@ -54,9 +54,17 @@
         </Button>
       </ACol> -->
       <ACol :md="11" :xs="24">
-        <Button block @click="setLoginState(LoginStateEnum.MOBILE)">
+        <!-- <Button block @click="setLoginState(LoginStateEnum.MOBILE)">
           {{ t('sys.login.mobileSignInFormTitle') }}
-        </Button>
+        </Button> -->
+        <div class="flex justify-center cursor-pointer">
+          <div
+            @click="setLoginState(LoginStateEnum.MOBILE)"
+            class="flex justify-center icon-button"
+          >
+            <phone-filled :style="{ fontSize: '18px' }" />
+          </div>
+        </div>
       </ACol>
     </ARow>
   </Form>
@@ -65,14 +73,13 @@
   import { reactive, ref, unref, computed } from 'vue';
   import { Checkbox, Form, Input, Row, Col, Button } from 'ant-design-vue';
   import LoginFormTitle from './LoginFormTitle.vue';
-
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useMessage } from '/@/hooks/web/useMessage';
-
   import { useUserStore } from '/@/store/modules/user';
   import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
   import { getPlatForm } from '/@/api/oem';
   import { createLocalStorage, createSessionStorage } from '/@/utils/cache';
+  import { PhoneFilled } from '@ant-design/icons-vue';
 
   const ACol = Col;
   const ARow = Row;
@@ -147,3 +154,13 @@
     loading.value = false;
   }
 </script>
+
+<style lang="less" scoped>
+  .icon-button {
+    align-items: center;
+    border-radius: 50%;
+    background-color: #f7f7f7;
+    width: 2.8rem;
+    height: 2.8rem;
+  }
+</style>

@@ -24,9 +24,14 @@
         <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
           {{ t('sys.login.loginButton') }}
         </Button>
-        <Button size="large" block class="mt-4" @click="handleBackLogin">
+        <!-- <Button size="large" block class="mt-4" @click="handleBackLogin">
           {{ t('sys.login.backSignIn') }}
-        </Button>
+        </Button> -->
+        <div class="flex justify-center cursor-pointer mt-4">
+          <div @click="handleBackLogin" class="flex justify-center icon-button">
+            <contacts-filled :style="{ fontSize: '18px' }" />
+          </div>
+        </div>
       </FormItem>
     </Form>
   </template>
@@ -41,6 +46,7 @@
   import { SendLoginSmsCode } from '/@/api/sys/user';
   import { useUserStore } from '/@/store/modules/user';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { ContactsFilled } from '@ant-design/icons-vue';
   const { notification } = useMessage();
 
   const FormItem = Form.Item;
@@ -95,3 +101,12 @@
     }
   }
 </script>
+<style lang="less" scoped>
+  .icon-button {
+    align-items: center;
+    border-radius: 50%;
+    background-color: #f7f7f7;
+    width: 2.8rem;
+    height: 2.8rem;
+  }
+</style>