diff --git a/src/assets/loginmini/icon/stage2.png b/src/assets/loginmini/icon/stage2.png
new file mode 100644
index 0000000..1de580b
Binary files /dev/null and b/src/assets/loginmini/icon/stage2.png differ
diff --git a/src/views/system/loginmini/MiniLogin.vue b/src/views/system/loginmini/MiniLogin.vue
index e2994ea..dad5dc7 100644
--- a/src/views/system/loginmini/MiniLogin.vue
+++ b/src/views/system/loginmini/MiniLogin.vue
@@ -1,138 +1,141 @@
 <template>
-  <div :class="prefixCls" class="login-background-img">
-    <AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false"/>
-    <AppDarkModeToggle class="absolute top-3 right-7 enter-x" />
-    <div class="aui-logo" v-if="!getIsMobile">
-      <div>
-        <h3>
-          <!-- <img :src="logoImg" alt="jeecg" /> -->
-        </h3>
+  <div :class="prefixCls" class="login-page">
+    <!-- 背景装饰层 -->
+    <div class="bg-decoration">
+      <div class="circle circle-1"></div>
+      <div class="circle circle-2"></div>
+      <div class="circle circle-3"></div>
+      <div class="bg-grid"></div>
+    </div>
+
+    <!-- 顶部工具栏 -->
+    <div class="top-bar">
+      <AppLocalePicker class="top-bar-item" :showText="false" />
+      <AppDarkModeToggle class="top-bar-item" />
+    </div>
+
+    <!-- 顶部大标题 -->
+    <div v-show="type === 'login'" class="page-title-bar">
+      <h1 class="page-title-main">农业面源污染监测管理平台</h1>
+    </div>
+
+    <!-- 登录主体 -->
+    <div v-show="type === 'login'" class="login-wrapper">
+      <!-- 左侧图片展示区 -->
+      <div class="brand-side">
+        <img :src="adTextImg" class="brand-image" alt="监测站点" />
       </div>
-    </div>
-    <div v-else class="aui-phone-logo">
-      <!-- <img :src="logoImg" alt="jeecg" /> -->
-    </div>
-    <div v-show="type === 'login'">
-      <div class="aui-content">
-        <div class="aui-container">
-          <div class="aui-form">
-            <div class="aui-image">
-              <div class="aui-image-text">
-                <img :src="adTextImg" />
-              </div>
-            </div>
-            <div class="aui-formBox">
-              <div class="aui-formWell">
-                <div class="aui-flex aui-form-nav investment_title">
-                  <div class="aui-flex-box" :class="activeIndex === 'accountLogin' ? 'activeNav on' : ''" @click="loginClick('accountLogin')"
-                    >{{ t('sys.login.signInFormTitle') }}
-                  </div>
-                  <!-- <div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')"
-                    >{{ t('sys.login.mobileSignInFormTitle') }}
-                  </div> -->
-                </div>
-                <div class="aui-form-box" style="height: 180px">
-                  <a-form ref="loginRef" :model="formData" v-if="activeIndex === 'accountLogin'" @keyup.enter.native="loginHandleClick">
-                    <div class="aui-account">
-                      <div class="aui-inputClear">
-                        <i class="icon icon-code"></i>
-                        <a-form-item>
-                          <a-input class="fix-auto-fill" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
-                        </a-form-item>
-                      </div>
-                      <div class="aui-inputClear">
-                        <i class="icon icon-password"></i>
-                        <a-form-item>
-                          <a-input class="fix-auto-fill" type="password" :placeholder="t('sys.login.password')" v-model:value="formData.password" />
-                        </a-form-item>
-                      </div>
-                      <div class="aui-inputClear">
-                        <i class="icon icon-code"></i>
-                        <a-form-item>
-                          <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
-                        </a-form-item>
-                        <div class="aui-code">
-                          <img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" @click="handleChangeCheckCode" />
-                          <img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" />
-                        </div>
-                      </div>
-                      <div class="aui-flex">
-                        <div class="aui-flex-box">
-                          <div class="aui-choice">
-                            <a-input class="fix-auto-fill" type="checkbox" v-model:value="rememberMe" />
-                            <span style="margin-left: 5px">{{ t('sys.login.rememberMe') }}</span>
-                          </div>
-                        </div>
-                        <div class="aui-forget">
-                          <!-- <a @click="forgetHandelClick"> {{ t('sys.login.forgetPassword') }}</a> -->
-                        </div>
-                      </div>
-                    </div>
-                  </a-form>
-                  <a-form v-else ref="phoneFormRef" :model="phoneFormData" @keyup.enter.native="loginHandleClick">
-                    <div class="aui-account phone">
-                      <div class="aui-inputClear phoneClear">
-                        <a-input class="fix-auto-fill" :placeholder="t('sys.login.mobile')" v-model:value="phoneFormData.mobile" />
-                      </div>
-                      <div class="aui-inputClear">
-                        <a-input class="fix-auto-fill" :maxlength="6" :placeholder="t('sys.login.smsCode')" v-model:value="phoneFormData.smscode" />
-                        <div v-if="showInterval" class="aui-code" @click="getLoginCode">
-                          <a>{{ t('component.countdown.normalText') }}</a>
-                        </div>
-                        <div v-else class="aui-code">
-                          <span class="aui-get-code code-shape">{{ t('component.countdown.sendText', [unref(timeRuning)]) }}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </a-form>
-                </div>
-                <div class="aui-formButton">
-                  <div class="aui-flex">
-                    <a-button :loading="loginLoading" class="aui-link-login aui-flex-box" type="primary" @click="loginHandleClick">
-                      {{ t('sys.login.loginButton') }}</a-button>
-                  </div>
-                  <!-- <div class="aui-flex">
-                    <a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a>
-                  </div>
-                  <div class="aui-flex">
-                    <a class="aui-linek-code aui-flex-box" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</a>
-                  </div> -->
-                </div>
-              </div>
-              <!-- <a-form @keyup.enter.native="loginHandleClick">
-                <div class="aui-flex aui-third-text">
-                  <div class="aui-flex-box aui-third-border">
-                    <span>{{ t('sys.login.otherSignIn') }}</span>
-                  </div>
-                </div>
-                <div class="aui-flex" :class="`${prefixCls}-sign-in-way`">
-                  <div class="aui-flex-box">
-                    <div class="aui-third-login">
-                      <a title="github" @click="onThirdLogin('github')"><GithubFilled /></a>
-                    </div>
-                  </div>
-                  <div class="aui-flex-box">
-                    <div class="aui-third-login">
-                      <a title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>
-                    </div>
-                  </div>
-                  <div class="aui-flex-box">
-                    <div class="aui-third-login">
-                      <a title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a>
-                    </div>
-                  </div>
-                  <div class="aui-flex-box">
-                    <div class="aui-third-login">
-                      <a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a>
-                    </div>
-                  </div>
-                </div>
-              </a-form> -->
+
+      <!-- 右侧登录表单区 -->
+      <div class="form-side">
+        <div class="form-container">
+          <div class="form-header">
+            <h2>欢迎登录</h2>
+            <p>请使用您的账号登录系统</p>
+          </div>
+
+          <!-- Tab 切换 -->
+          <div class="form-tabs">
+            <div class="tab-item" :class="{ active: activeIndex === 'accountLogin' }" @click="loginClick('accountLogin')">
+              {{ t('sys.login.signInFormTitle') }}
+              <span v-if="activeIndex === 'accountLogin'" class="tab-indicator"></span>
             </div>
           </div>
+
+          <!-- 账号登录 -->
+          <a-form v-if="activeIndex === 'accountLogin'" ref="loginRef" :model="formData" class="login-form" @keyup.enter.native="loginHandleClick">
+            <div class="form-field">
+              <div class="input-wrapper">
+                <span class="input-icon">
+                  <UserOutlined />
+                </span>
+                <a-input class="fix-auto-fill custom-input" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
+              </div>
+            </div>
+
+            <div class="form-field">
+              <div class="input-wrapper">
+                <span class="input-icon">
+                  <LockOutlined />
+                </span>
+                <a-input
+                  class="fix-auto-fill custom-input"
+                  type="password"
+                  :placeholder="t('sys.login.password')"
+                  v-model:value="formData.password"
+                />
+              </div>
+            </div>
+
+            <div class="form-field">
+              <div class="input-wrapper captcha-wrapper">
+                <span class="input-icon">
+                  <SafetyOutlined />
+                </span>
+                <a-input class="fix-auto-fill custom-input" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
+                <div class="captcha-img" @click="handleChangeCheckCode">
+                  <img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" />
+                  <img v-else :src="codeImg" />
+                </div>
+              </div>
+            </div>
+
+            <div class="form-options">
+              <div class="remember-me">
+                <a-checkbox v-model:checked="rememberMe">
+                  {{ t('sys.login.rememberMe') }}
+                </a-checkbox>
+              </div>
+              <div class="forgot-link">
+              </div>
+            </div>
+
+            <a-button :loading="loginLoading" class="login-btn" type="primary" @click="loginHandleClick">
+              {{ t('sys.login.loginButton') }}
+            </a-button>
+          </a-form>
+
+          <!-- 手机登录 -->
+          <a-form v-else ref="phoneFormRef" :model="phoneFormData" class="login-form" @keyup.enter.native="loginHandleClick">
+            <div class="form-field">
+              <div class="input-wrapper">
+                <span class="input-icon">
+                  <MobileOutlined />
+                </span>
+                <a-input class="fix-auto-fill custom-input" :placeholder="t('sys.login.mobile')" v-model:value="phoneFormData.mobile" />
+              </div>
+            </div>
+
+            <div class="form-field">
+              <div class="input-wrapper">
+                <span class="input-icon">
+                  <MessageOutlined />
+                </span>
+                <a-input
+                  class="fix-auto-fill custom-input"
+                  :maxlength="6"
+                  :placeholder="t('sys.login.smsCode')"
+                  v-model:value="phoneFormData.smscode"
+                />
+                <div v-if="showInterval" class="sms-btn" @click="getLoginCode">
+                  {{ t('component.countdown.normalText') }}
+                </div>
+                <div v-else class="sms-btn disabled">
+                  {{ t('component.countdown.sendText', [unref(timeRuning)]) }}
+                </div>
+              </div>
+            </div>
+
+            <a-button :loading="loginLoading" class="login-btn" type="primary" @click="loginHandleClick">
+              {{ t('sys.login.loginButton') }}
+            </a-button>
+          </a-form>
+
         </div>
       </div>
     </div>
+
+    <!-- 其他视图 -->
     <div v-show="type === 'forgot'" :class="`${prefixCls}-form`">
       <MiniForgotpad ref="forgotRef" @go-back="goBack" @success="handleSuccess" />
     </div>
@@ -142,416 +145,819 @@
     <div v-show="type === 'codeLogin'" :class="`${prefixCls}-form`">
       <MiniCodelogin ref="codeRef" @go-back="goBack" @success="handleSuccess" />
     </div>
-    <!-- 第三方登录相关弹框 -->
-    <ThirdModal ref="thirdModalRef"></ThirdModal>
+
+    <ThirdModal ref="thirdModalRef" />
   </div>
 </template>
+
 <script lang="ts" setup name="login-mini">
-  import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
-  import { computed, onMounted, reactive, ref, toRaw, unref } from 'vue';
-  import codeImg from '/@/assets/images/checkcode.png';
-  import { Rule } from '/@/components/Form';
-  import { useUserStore } from '/@/store/modules/user';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { SmsEnum } from '/@/views/sys/login/useLogin';
-  import ThirdModal from '/@/views/sys/login/ThirdModal.vue';
-  import MiniForgotpad from './MiniForgotpad.vue';
-  import MiniRegister from './MiniRegister.vue';
-  import MiniCodelogin from './MiniCodelogin.vue';
-  import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
-  import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
-  import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
-  import { useLocaleStore } from '/@/store/modules/locale';
-  import { useDesign } from "/@/hooks/web/useDesign";
-  import { useAppInject } from "/@/hooks/web/useAppInject";
-  import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';
+import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
+import { computed, onMounted, reactive, ref, toRaw, unref } from 'vue';
+import { UserOutlined, LockOutlined, SafetyOutlined, MobileOutlined, MessageOutlined } from '@ant-design/icons-vue';
+import codeImg from '/@/assets/images/checkcode.png';
+import { Rule } from '/@/components/Form';
+import { useUserStore } from '/@/store/modules/user';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { SmsEnum } from '/@/views/sys/login/useLogin';
+import ThirdModal from '/@/views/sys/login/ThirdModal.vue';
+import MiniForgotpad from './MiniForgotpad.vue';
+import MiniRegister from './MiniRegister.vue';
+import MiniCodelogin from './MiniCodelogin.vue';
+import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
+import adTextImg from '/@/assets/loginmini/icon/stage2.png';
+import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
+import { useLocaleStore } from '/@/store/modules/locale';
+import { useDesign } from '/@/hooks/web/useDesign';
+import { useAppInject } from '/@/hooks/web/useAppInject';
+import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';
 
-  const IconFont = createFromIconfontCN({
-    scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
-  });
-  const { prefixCls } = useDesign('mini-login');
-  const { notification, createMessage } = useMessage();
-  const userStore = useUserStore();
-  const { t } = useI18n();
-  const localeStore = useLocaleStore();
-  const showLocale = localeStore.getShowPicker;
-  const randCodeData = reactive<any>({
-    randCodeImage: '',
-    requestCodeSuccess: false,
-    checkKey: null,
-  });
-  const rememberMe = ref<string>('0');
-  //手机号登录还是账号登录
-  const activeIndex = ref<string>('accountLogin');
-  const type = ref<string>('login');
-  //账号登录表单字段
-  const formData = reactive<any>({
-    inputCode: '',
-    username: '',
-    password: '',
-  });
-  //手机登录表单字段
-  const phoneFormData = reactive<any>({
-    mobile: '',
-    smscode: '',
-  });
-  const loginRef = ref();
-  //第三方登录弹窗
-  const thirdModalRef = ref();
-  //扫码登录
-  const codeRef = ref();
-  //是否显示获取验证码
-  const showInterval = ref<boolean>(true);
-  //60s
-  const timeRuning = ref<number>(60);
-  //定时器
-  const timer = ref<any>(null);
-  //忘记密码
-  const forgotRef = ref();
-  //注册
-  const registerRef = ref();
-  const loginLoading = ref<boolean>(false);
-  const { getIsMobile } = useAppInject();
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
+});
+const { prefixCls } = useDesign('mini-login');
+const { notification, createMessage } = useMessage();
+const userStore = useUserStore();
+const { t } = useI18n();
+const localeStore = useLocaleStore();
+const showLocale = localeStore.getShowPicker;
+const randCodeData = reactive<any>({
+  randCodeImage: '',
+  requestCodeSuccess: false,
+  checkKey: null,
+});
+const rememberMe = ref<string>('0');
+//手机号登录还是账号登录
+const activeIndex = ref<string>('accountLogin');
+const type = ref<string>('login');
+//账号登录表单字段
+const formData = reactive<any>({
+  inputCode: '',
+  username: '',
+  password: '',
+});
+//手机登录表单字段
+const phoneFormData = reactive<any>({
+  mobile: '',
+  smscode: '',
+});
+const loginRef = ref();
+//第三方登录弹窗
+const thirdModalRef = ref();
+//扫码登录
+const codeRef = ref();
+//是否显示获取验证码
+const showInterval = ref<boolean>(true);
+//60s
+const timeRuning = ref<number>(60);
+//定时器
+const timer = ref<any>(null);
+//忘记密码
+const forgotRef = ref();
+//注册
+const registerRef = ref();
+const loginLoading = ref<boolean>(false);
+const { getIsMobile } = useAppInject();
 
-  defineProps({
-    sessionTimeout: {
-      type: Boolean,
-    },
+defineProps({
+  sessionTimeout: {
+    type: Boolean,
+  },
+});
+
+/**
+ * 获取验证码
+ */
+function handleChangeCheckCode() {
+  formData.inputCode = '';
+
+  randCodeData.checkKey = 1629428467008;
+  getCodeInfo(randCodeData.checkKey).then((res) => {
+    randCodeData.randCodeImage = res;
+    randCodeData.requestCodeSuccess = true;
   });
+}
 
-  /**
-   * 获取验证码
-   */
-  function handleChangeCheckCode() {
-    formData.inputCode = '';
+/**
+ * 切换登录方式
+ */
+function loginClick(type) {
+  activeIndex.value = type;
+}
 
-    randCodeData.checkKey = 1629428467008;
-    getCodeInfo(randCodeData.checkKey).then((res) => {
-      randCodeData.randCodeImage = res;
-      randCodeData.requestCodeSuccess = true;
+/**
+ * 账号或者手机登录
+ */
+async function loginHandleClick() {
+  if (unref(activeIndex) === 'accountLogin') {
+    accountLogin();
+  } else {
+    //手机号登录
+    phoneLogin();
+  }
+}
+
+async function accountLogin() {
+  if (!formData.username) {
+    createMessage.warn(t('sys.login.accountPlaceholder'));
+    return;
+  }
+  if (!formData.password) {
+    createMessage.warn(t('sys.login.passwordPlaceholder'));
+    return;
+  }
+  try {
+    loginLoading.value = true;
+    const { userInfo } = await userStore.login(
+      toRaw({
+        password: formData.password,
+        username: formData.username,
+        captcha: formData.inputCode,
+        checkKey: randCodeData.checkKey,
+        mode: 'none',
+      })
+    );
+    if (userInfo) {
+      notification.success({
+        message: t('sys.login.loginSuccessTitle'),
+        description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
+        duration: 3,
+      });
+    }
+  } catch (error) {
+    notification.error({
+      message: t('sys.api.errorTip'),
+      description: error.message || t('sys.login.networkExceptionMsg'),
+      duration: 3,
     });
+    handleChangeCheckCode();
+  } finally {
+    loginLoading.value = false;
   }
+}
 
-  /**
-   * 切换登录方式
-   */
-  function loginClick(type) {
-    activeIndex.value = type;
+/**
+ * 手机号登录
+ */
+async function phoneLogin() {
+  if (!phoneFormData.mobile) {
+    createMessage.warn(t('sys.login.mobilePlaceholder'));
+    return;
   }
-
-  /**
-   * 账号或者手机登录
-   */
-  async function loginHandleClick() {
-    if (unref(activeIndex) === 'accountLogin') {
-      accountLogin();
-    } else {
-      //手机号登录
-      phoneLogin();
-    }
+  if (!phoneFormData.smscode) {
+    createMessage.warn(t('sys.login.smsPlaceholder'));
+    return;
   }
-
-  async function accountLogin() {
-    if (!formData.username) {
-      createMessage.warn(t('sys.login.accountPlaceholder'));
-      return;
-    }
-    if (!formData.password) {
-      createMessage.warn(t('sys.login.passwordPlaceholder'));
-      return;
-    }
-    try {
-      loginLoading.value = true;
-      const { userInfo } = await userStore.login(
-        toRaw({
-          password: formData.password,
-          username: formData.username,
-          captcha: formData.inputCode,
-          checkKey: randCodeData.checkKey,
-          mode: 'none', //不要默认的错误提示
-        })
-      );
-      if (userInfo) {
-        notification.success({
-          message: t('sys.login.loginSuccessTitle'),
-          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
-          duration: 3,
-        });
-      }
-    } catch (error) {
-      notification.error({
-        message: t('sys.api.errorTip'),
-        description: error.message || t('sys.login.networkExceptionMsg'),
+  try {
+    loginLoading.value = true;
+    const { userInfo }: any = await userStore.phoneLogin({
+      mobile: phoneFormData.mobile,
+      captcha: phoneFormData.smscode,
+      mode: 'none',
+    });
+    if (userInfo) {
+      notification.success({
+        message: t('sys.login.loginSuccessTitle'),
+        description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
         duration: 3,
       });
-      handleChangeCheckCode();
-    } finally {
-      loginLoading.value = false;
+    }
+  } catch (error) {
+    notification.error({
+      message: t('sys.api.errorTip'),
+      description: error.message || t('sys.login.networkExceptionMsg'),
+      duration: 3,
+    });
+  } finally {
+    loginLoading.value = false;
+  }
+}
+
+/**
+ * 获取手机验证码
+ */
+async function getLoginCode() {
+  if (!phoneFormData.mobile) {
+    createMessage.warn(t('sys.login.mobilePlaceholder'));
+    return;
+  }
+  const result = await getCaptcha({ mobile: phoneFormData.mobile, smsmode: SmsEnum.FORGET_PASSWORD });
+  if (result) {
+    const TIME_COUNT = 60;
+    if (!unref(timer)) {
+      timeRuning.value = TIME_COUNT;
+      showInterval.value = false;
+      timer.value = setInterval(() => {
+        if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
+          timeRuning.value = timeRuning.value - 1;
+        } else {
+          showInterval.value = true;
+          clearInterval(unref(timer));
+          timer.value = null;
+        }
+      }, 1000);
     }
   }
+}
 
-  /**
-   * 手机号登录
-   */
-  async function phoneLogin() {
-    if (!phoneFormData.mobile) {
-      createMessage.warn(t('sys.login.mobilePlaceholder'));
-      return;
-    }
-    if (!phoneFormData.smscode) {
-      createMessage.warn(t('sys.login.smsPlaceholder'));
-      return;
-    }
-    try {
-      loginLoading.value = true;
-      const { userInfo }: any = await userStore.phoneLogin({
-        mobile: phoneFormData.mobile,
-        captcha: phoneFormData.smscode,
-        mode: 'none', //不要默认的错误提示
-      });
-      if (userInfo) {
-        notification.success({
-          message: t('sys.login.loginSuccessTitle'),
-          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
-          duration: 3,
-        });
-      }
-    } catch (error) {
-      notification.error({
-        message: t('sys.api.errorTip'),
-        description: error.message || t('sys.login.networkExceptionMsg'),
-        duration: 3,
-      });
-    } finally {
-      loginLoading.value = false;
-    }
-  }
+/**
+ * 第三方登录
+ * @param type
+ */
+function onThirdLogin(type) {
+  thirdModalRef.value.onThirdLogin(type);
+}
 
-  /**
-   * 获取手机验证码
-   */
-  async function getLoginCode() {
-    if (!phoneFormData.mobile) {
-      createMessage.warn(t('sys.login.mobilePlaceholder'));
-      return;
-    }
-    const result = await getCaptcha({ mobile: phoneFormData.mobile, smsmode: SmsEnum.FORGET_PASSWORD });
-    if (result) {
-      const TIME_COUNT = 60;
-      if (!unref(timer)) {
-        timeRuning.value = TIME_COUNT;
-        showInterval.value = false;
-        timer.value = setInterval(() => {
-          if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
-            timeRuning.value = timeRuning.value - 1;
-          } else {
-            showInterval.value = true;
-            clearInterval(unref(timer));
-            timer.value = null;
-          }
-        }, 1000);
-      }
-    }
-  }
+/**
+ * 忘记密码
+ */
+function forgetHandelClick() {
+  type.value = 'forgot';
+  setTimeout(() => {
+    forgotRef.value.initForm();
+  }, 300);
+}
 
-  /**
-   * 第三方登录
-   * @param type
-   */
-  function onThirdLogin(type) {
-    thirdModalRef.value.onThirdLogin(type);
-  }
+/**
+ * 返回登录页面
+ */
+function goBack() {
+  activeIndex.value = 'accountLogin';
+  type.value = 'login';
+}
 
-  /**
-   * 忘记密码
-   */
-  function forgetHandelClick() {
-    type.value = 'forgot';
-    setTimeout(() => {
-      forgotRef.value.initForm();
-    }, 300);
-  }
+/**
+ * 忘记密码/注册账号回调事件
+ * @param value
+ */
+function handleSuccess(value) {
+  Object.assign(formData, value);
+  Object.assign(phoneFormData, { mobile: "", smscode: "" });
+  type.value = 'login';
+  activeIndex.value = 'accountLogin';
+  handleChangeCheckCode();
+}
 
-  /**
-   * 返回登录页面
-   */
-  function goBack() {
-    activeIndex.value = 'accountLogin';
-    type.value = 'login';
-  }
+/**
+ * 注册
+ */
+function registerHandleClick() {
+  type.value = 'register';
+  setTimeout(() => {
+    registerRef.value.initForm();
+  }, 300);
+}
 
-  /**
-   * 忘记密码/注册账号回调事件
-   * @param value
-   */
-  function handleSuccess(value) {
-    Object.assign(formData, value);
-    Object.assign(phoneFormData, { mobile: "", smscode: "" });
-    type.value = 'login';
-    activeIndex.value = 'accountLogin';
-    handleChangeCheckCode();
-  }
+/**
+ * 注册
+ */
+function codeHandleClick() {
+  type.value = 'codeLogin';
+  setTimeout(() => {
+    codeRef.value.initFrom();
+  }, 300);
+}
 
-  /**
-   * 注册
-   */
-  function registerHandleClick() {
-    type.value = 'register';
-    setTimeout(() => {
-      registerRef.value.initForm();
-    }, 300);
-  }
-
-  /**
-   * 注册
-   */
-  function codeHandleClick() {
-    type.value = 'codeLogin';
-    setTimeout(() => {
-      codeRef.value.initFrom();
-    }, 300);
-  }
-
-  onMounted(() => {
-    //加载验证码
-    handleChangeCheckCode();
-  });
+onMounted(() => {
+  //加载验证码
+  handleChangeCheckCode();
+});
 </script>
 
 <style lang="less" scoped>
-  @import '/@/assets/loginmini/style/home.less';
-  @import '/@/assets/loginmini/style/base.less';
+/* ========== 页面容器 ========== */
+.login-page {
+  position: relative;
+  min-height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  background: linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 40%, #ecfdf5 100%);
+}
 
-  :deep(.ant-input:focus) {
-    box-shadow: none;
-  }
-  .aui-get-code {
-    float: right;
-    position: relative;
-    z-index: 3;
-    background: #ffffff;
-    color: #1573e9;
-    border-radius: 100px;
-    padding: 5px 16px;
-    margin: 7px;
-    border: 1px solid #1573e9;
-    top: 12px;
+/* ========== 背景装饰 ========== */
+.bg-decoration {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.circle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.5;
+  filter: blur(60px);
+}
+
+.circle-1 {
+  width: 500px;
+  height: 500px;
+  background: #60a5fa;
+  top: -150px;
+  right: -100px;
+  animation: float 8s ease-in-out infinite;
+}
+
+.circle-2 {
+  width: 400px;
+  height: 400px;
+  background: #34d399;
+  bottom: -120px;
+  left: -80px;
+  animation: float 10s ease-in-out infinite reverse;
+}
+
+.circle-3 {
+  width: 300px;
+  height: 300px;
+  background: #a78bfa;
+  top: 40%;
+  left: 50%;
+  opacity: 0.3;
+  animation: float 12s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(30px, -30px); }
+}
+
+.bg-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+/* ========== 顶部工具栏 ========== */
+.top-bar {
+  position: absolute;
+  top: 20px;
+  right: 24px;
+  z-index: 100;
+  display: flex;
+  gap: 12px;
+}
+
+.top-bar-item {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(8px);
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.top-bar-item:hover {
+  background: rgba(255, 255, 255, 0.95);
+  transform: scale(1.05);
+}
+
+/* ========== 顶部大标题 ========== */
+.page-title-bar {
+  position: relative;
+  z-index: 10;
+  text-align: center;
+  padding: 40px 24px 0;
+}
+
+.page-title-main {
+  font-size: clamp(24px, 3.2vw, 44px);
+  font-weight: 700;
+  letter-spacing: 4px;
+  color: #0f172a;
+  margin: 0;
+  line-height: 1.3;
+  background: linear-gradient(90deg, #1e40af, #0891b2, #059669);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ========== 登录主体 ========== */
+.login-wrapper {
+  position: relative;
+  z-index: 10;
+  min-height: calc(100vh - 140px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  gap: 0;
+}
+
+/* ========== 左侧图片展示区 ========== */
+.brand-side {
+  flex: 1;
+  max-width: 520px;
+  min-height: 520px;
+  border-radius: 24px 0 0 24px;
+  background: linear-gradient(160deg, #1e40af 0%, #0891b2 50%, #059669 100%);
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(6, 78, 100, 0.25);
+}
+
+.brand-side::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image:
+    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+}
+
+.brand-side::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+  background-size: 30px 30px;
+}
+
+.brand-image {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  min-height: 520px;
+  object-fit: contain;
+  display: block;
+}
+
+/* ========== 右侧表单区 ========== */
+.form-side {
+  width: 460px;
+  min-height: 520px;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20px);
+  border-radius: 0 24px 24px 0;
+  padding: 48px 44px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  border-left: none;
+}
+
+.form-container {
+  width: 100%;
+}
+
+.form-header {
+  margin-bottom: 28px;
+}
+
+.form-header h2 {
+  font-size: 26px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 6px 0;
+}
+
+.form-header p {
+  font-size: 14px;
+  color: #64748b;
+  margin: 0;
+}
+
+/* Tabs */
+.form-tabs {
+  display: flex;
+  gap: 32px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.tab-item {
+  position: relative;
+  padding: 12px 0;
+  font-size: 15px;
+  color: #64748b;
+  cursor: pointer;
+  transition: color 0.3s;
+  font-weight: 500;
+}
+
+.tab-item.active {
+  color: #0f172a;
+  font-weight: 600;
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #3b82f6, #06b6d4);
+  border-radius: 2px 2px 0 0;
+}
+
+/* Form */
+.login-form {
+  width: 100%;
+}
+
+.form-field {
+  margin-bottom: 18px;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: #f1f5f9;
+  border: 1.5px solid transparent;
+  border-radius: 12px;
+  padding: 0 14px;
+  transition: all 0.3s;
+  height: 46px;
+}
+
+.input-wrapper:focus-within {
+  background: #fff;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+.input-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  color: #94a3b8;
+  font-size: 17px;
+}
+
+.input-wrapper:focus-within .input-icon {
+  color: #3b82f6;
+}
+
+.custom-input {
+  flex: 1;
+  height: 44px !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  font-size: 14px;
+  color: #1e293b;
+}
+
+.custom-input::placeholder {
+  color: #94a3b8;
+}
+
+.custom-input:focus {
+  outline: none;
+  box-shadow: none !important;
+}
+
+/* 验证码 */
+.captcha-wrapper {
+  padding-right: 4px;
+}
+
+.captcha-img {
+  width: 110px;
+  height: 36px;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #e2e8f0;
+  flex-shrink: 0;
+  border: 1px solid #cbd5e1;
+}
+
+.captcha-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 手机验证码按钮 */
+.sms-btn {
+  flex-shrink: 0;
+  font-size: 13px;
+  color: #3b82f6;
+  cursor: pointer;
+  padding: 6px 10px;
+  border-radius: 6px;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.sms-btn:hover {
+  background: #eff6ff;
+}
+
+.sms-btn.disabled {
+  color: #94a3b8;
+  cursor: not-allowed;
+}
+
+/* 选项行 */
+.form-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  font-size: 13px;
+}
+
+.remember-me :deep(.ant-checkbox-inner) {
+  border-radius: 4px;
+  border-color: #cbd5e1;
+}
+
+.remember-me :deep(.ant-checkbox-checked .ant-checkbox-inner) {
+  background-color: #3b82f6;
+  border-color: #3b82f6;
+}
+
+.forgot-link a {
+  color: #3b82f6;
+  cursor: pointer;
+}
+
+.forgot-link a:hover {
+  text-decoration: underline;
+}
+
+/* 登录按钮 */
+.login-btn {
+  width: 100%;
+  height: 48px;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+  border-radius: 12px !important;
+  background: linear-gradient(90deg, #3b82f6, #06b6d4) !important;
+  border: none !important;
+  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
+  transition: all 0.3s;
+}
+
+.login-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5) !important;
+}
+
+.login-btn:active {
+  transform: translateY(0);
+}
+
+/* ========== 响应式 ========== */
+@media (max-width: 900px) {
+  .page-title-bar {
+    padding: 28px 20px 0;
   }
 
-  .aui-get-code:hover {
-    color: #1573e9;
+  .login-wrapper {
+    flex-direction: column;
+    padding: 16px;
+    min-height: auto;
   }
 
-  .code-shape {
-    border-color: #dadada !important;
-    color: #aaa !important;
+  .brand-side {
+    max-width: 100%;
+    width: 100%;
+    min-height: 280px;
+    border-radius: 20px 20px 0 0;
   }
 
-  :deep(.jeecg-dark-switch){
-    position:absolute;
-    margin-right: 10px;
+  .brand-image {
+    min-height: 280px;
   }
-  .aui-link-login{
-    height: 42px;
-    padding: 10px 15px;
-    font-size: 14px;
-    border-radius: 8px;
-    margin-top: 15px;
-    margin-bottom: 8px;
+
+  .form-side {
+    width: 100%;
+    min-height: auto;
+    border-radius: 0 0 20px 20px;
+    padding: 32px 24px;
   }
-  .aui-phone-logo{
-    position: absolute;
-    margin-left: 10px;
-    width: 60px;
-    top:2px;
-    z-index: 4;
+}
+
+@media (max-width: 480px) {
+  .page-title-bar {
+    padding: 20px 16px 0;
   }
-  .top-3{
-    top: 0.45rem;
+
+  .page-title-main {
+    letter-spacing: 2px;
   }
+
+  .login-wrapper {
+    padding: 12px;
+  }
+
+  .brand-side {
+    min-height: 200px;
+  }
+
+  .brand-image {
+    min-height: 200px;
+  }
+
+  .form-side {
+    padding: 24px 20px;
+  }
+
+  .form-header h2 {
+    font-size: 22px;
+  }
+}
 </style>
 
 <style lang="less">
 @prefix-cls: ~'@{namespace}-mini-login';
-@dark-bg: #293146;
+@dark-bg: #0f172a;
 
 html[data-theme='dark'] {
   .@{prefix-cls} {
-    background-color: @dark-bg !important;
-    background-image: none;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
 
-    &::before {
-      background-image: url(/@/assets/svg/login-bg-dark.svg);
-    }
-    .aui-inputClear{
-      background-color: #232a3b !important;
-    }
-    .ant-input,
-    .ant-input-password {
-      background-color: #232a3b !important;
+    .circle-1 { background: #1e40af; opacity: 0.3; }
+    .circle-2 { background: #0f766e; opacity: 0.3; }
+    .circle-3 { background: #7c3aed; opacity: 0.2; }
+
+    .page-title-main {
+      background: linear-gradient(90deg, #60a5fa, #22d3ee, #34d399);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
 
-    .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
-      border: 1px solid #4a5569 !important;
+    .brand-side {
+      background: linear-gradient(160deg, #1e3a8a 0%, #0e7490 50%, #047857 100%) !important;
     }
 
-    &-form {
-      background: @dark-bg !important;
+    .form-side {
+      background: rgba(30, 41, 59, 0.9) !important;
+      border-color: rgba(51, 65, 85, 0.6) !important;
     }
 
-    .app-iconify {
-      color: #fff !important;
-    }
-    .aui-inputClear input,.aui-input-line input,.aui-choice{
-      color: #c9d1d9 !important;
+    .form-header h2 { color: #f1f5f9 !important; }
+    .form-header p { color: #94a3b8 !important; }
+    .tab-item { color: #94a3b8 !important; }
+    .tab-item.active { color: #f1f5f9 !important; }
+
+    .input-wrapper { background: #1e293b !important; }
+    .input-wrapper:focus-within {
+      background: #0f172a !important;
+      border-color: #3b82f6 !important;
+      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
     }
 
-    .aui-formBox{
-      background-color: @dark-bg !important;
-    }
-    .aui-third-text span{
-      background-color: @dark-bg !important;
-    }
-    .aui-form-nav .aui-flex-box{
-      color: #c9d1d9 !important;
+    .custom-input { color: #f1f5f9 !important; }
+    .input-icon { color: #64748b !important; }
+    .input-wrapper:focus-within .input-icon { color: #3b82f6 !important; }
+
+    .captcha-img {
+      background: #334155;
+      border-color: #475569;
     }
 
-    .aui-formButton .aui-linek-code{
-      background:  @dark-bg !important;
-      color: white !important;
+    .remember-me :deep(.ant-checkbox-inner) {
+      background-color: transparent !important;
+      border-color: #475569 !important;
     }
-    .aui-code-line{
-      border-left: none !important;
+
+    .sms-btn { color: #60a5fa; }
+    .sms-btn.disabled { color: #64748b; }
+
+    .top-bar-item {
+      background: rgba(51, 65, 85, 0.8);
+      color: #e2e8f0;
     }
-    .ant-checkbox-inner,.aui-success h3{
-      border-color: #c9d1d9;
+
+    .top-bar-item:hover {
+      background: rgba(71, 85, 105, 0.9);
+    }
+
+    .tab-indicator {
+      background: linear-gradient(90deg, #60a5fa, #22d3ee);
     }
   }
 
   input.fix-auto-fill,
   .fix-auto-fill input {
-    -webkit-text-fill-color: #c9d1d9 !important;
-    box-shadow: inherit !important;
-  }
-
-  &-sign-in-way {
-    .anticon {
-      font-size: 22px !important;
-      color: #888 !important;
-      cursor: pointer !important;
-
-      &:hover {
-        color: @primary-color !important;
-      }
-    }
-  }
-  .ant-divider-inner-text {
-    font-size: 12px !important;
-    color: @text-color-secondary !important;
-  }
-  .aui-third-login a{
-    background: transparent;
+    -webkit-text-fill-color: #f1f5f9 !important;
   }
 }
 </style>