diff --git a/src/views/sys/login/Login.vue b/src/views/sys/login/Login.vue
index a5c337567..abf1ef303 100644
--- a/src/views/sys/login/Login.vue
+++ b/src/views/sys/login/Login.vue
@@ -166,7 +166,7 @@
       }
 
       @media (max-width: @screen-sm) {
-        min-width: 260px;
+        min-width: 180px;
       }
     }
     .@{countdown-prefix-cls} input {
diff --git a/src/views/sys/login/LoginForm.vue b/src/views/sys/login/LoginForm.vue
index d775032b2..b3e4a60da 100644
--- a/src/views/sys/login/LoginForm.vue
+++ b/src/views/sys/login/LoginForm.vue
@@ -41,17 +41,17 @@
       </Button> -->
     </FormItem>
     <ARow class="enter-x">
-      <ACol :span="7">
+      <ACol :xs="24" :md="8">
         <Button block @click="setLoginState(LoginStateEnum.MOBILE)">
           {{ t('sys.login.mobileSignInFormTitle') }}
         </Button>
       </ACol>
-      <ACol :span="8" :offset="1">
+      <ACol :md="8" :xs="24" class="xs:my-2 md:my-0 xs:mx-0 md:mx-2">
         <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">
           {{ t('sys.login.qrSignInFormTitle') }}
         </Button>
       </ACol>
-      <ACol :span="7" :offset="1">
+      <ACol :md="7" :xs="24">
         <Button block @click="setLoginState(LoginStateEnum.REGISTER)">
           {{ t('sys.login.registerButton') }}
         </Button>