diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index 0eaac8b12e..ab22917677 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -31,6 +31,7 @@
         >
           <a-input
             v-model="userInfo.username"
+            class="login-input"
             :max-length="64"
             size="large"
             :placeholder="
@@ -49,6 +50,7 @@
         >
           <a-input-password
             v-model="userInfo.password"
+            class="login-password-input"
             :placeholder="t('login.form.password.placeholder')"
             allow-clear
             :max-length="64"
@@ -266,4 +268,37 @@
   :deep(.arco-divider-text) {
     padding: 0 8px !important;
   }
+  .login-input {
+    padding-right: 0;
+    padding-left: 0;
+    width: 336px;
+    height: 36px;
+  }
+  .login-input :deep(.arco-input) {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+  .login-password-input {
+    position: relative;
+    padding-right: 0;
+    padding-left: 0;
+    width: 336px;
+    height: 36px;
+  }
+  .login-password-input :deep(.arco-input) {
+    padding-right: 50px;
+    padding-left: 10px;
+  }
+  .login-password-input :deep(.arco-input-clear-btn) {
+    position: absolute;
+    top: 10px;
+    float: right;
+    margin-left: 290px;
+  }
+  .login-password-input :deep(.arco-input-suffix) {
+    position: absolute;
+    top: 10px;
+    float: right;
+    margin-left: 300px;
+  }
 </style>