diff --git a/clientarea/hgcloud/css/login.css b/clientarea/hgcloud/css/login.css
index e23d475..b096396 100644
--- a/clientarea/hgcloud/css/login.css
+++ b/clientarea/hgcloud/css/login.css
@@ -438,23 +438,35 @@
   background: #0E42D2 !important;
 }
 
-/* 切换登录方式按钮 */
-.pass-btn {
-  width: 100%;
-  height: 42px;
-  margin-left: 0 !important;
-  margin-top: 10px;
-  background: transparent !important;
-  border: 1px solid rgba(255, 255, 255, 0.08) !important;
-  border-radius: 8px !important;
-  color: rgba(139, 148, 158, 0.8) !important;
-  font-size: 14px !important;
-  transition: all 0.2s;
+/* 登录方式切换 Tab（密码/验证码） */
+.login-type-tabs {
+  display: flex;
+  gap: 0;
+  margin-bottom: 20px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 6px;
+  padding: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.04);
 }
 
-.pass-btn:hover {
+.login-type-tab {
+  flex: 1;
+  padding: 8px 0;
+  color: rgba(139, 148, 158, 0.6);
+  cursor: pointer;
+  font-size: 13px;
+  text-align: center;
+  transition: all 0.25s ease;
+  border-radius: 4px;
+}
+
+.login-type-tab:hover {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.login-type-tab.active {
   color: #FFFFFF !important;
-  border-color: rgba(22, 93, 255, 0.3) !important;
+  background: rgba(22, 93, 255, 0.12) !important;
 }
 
 /* ---- 第三方登录 ---- */
diff --git a/clientarea/hgcloud/login.php b/clientarea/hgcloud/login.php
index 1b799db..f340892 100644
--- a/clientarea/hgcloud/login.php
+++ b/clientarea/hgcloud/login.php
@@ -81,6 +81,11 @@
                   {{ lang.login_phone }}
                 </div>
               </div>
+              <!-- 登录方式切换 Tab -->
+              <div class="login-type-tabs" v-if="isShowChangeTpyeBtn && !isShowQrCode">
+                <div class="login-type-tab" :class="isPassOrCode ? 'active' : null" @click="isPassOrCode ? null : changeLoginType()">密码登录</div>
+                <div class="login-type-tab" :class="!isPassOrCode ? 'active' : null" @click="!isPassOrCode ? null : changeLoginType()">验证码登录</div>
+              </div>
               <div class="form-main">
                 <template v-if="!isShowQrCode">
                   <div class="form-item">
@@ -161,14 +166,6 @@
                 <div class="form-item" v-if="!isShowQrCode">
                   <el-button type="primary" :loading="loginLoading" class="login-btn" @click="doLogin">{{ lang.login }}
                   </el-button>
-                  <!-- 登录方式切换 -->
-                  <template v-if="isShowChangeTpyeBtn">
-                    <el-button v-if="isPassOrCode " class="pass-btn"
-                      @click="changeLoginType">{{ lang.login_code_login }}
-                    </el-button>
-                    <el-button v-else class="pass-btn" @click="changeLoginType">{{ lang.login_pass_login }}
-                    </el-button>
-                  </template>
                 </div>
                 <!-- 三方登录 -->
                 <template v-if="commonData.oauth && commonData.oauth?.length > 0">