fix: 后台管理登录页重构

src/views/system/login2/login.vue

@@ -1,448 +1,537 @@
 <template>
-  <div id="loginBoxSize">
-    <div class="login">
-      <div class="page-content">
-        <div class="page-header">
-          <img class="page-header-img" src="/@/assets/loginNew/logo.svg" alt="" />
-          <span class="page-header-title">BoundLink-Plate一体化管控平台</span>
-        </div>
-        <div class="login-form">
-          <a-form ref="formRef" :model="loginForm" :rules="rules">
-            <a-form-item name="loginName">
-              <a-input v-model:value.trim="loginForm.loginName" placeholder="请输入用户名" />
-            </a-form-item>
-            <a-form-item name="emailCode" v-if="emailCodeShowFlag">
-              <a-input-group compact>
-                <a-input style="width: calc(100% - 110px)" v-model:value="loginForm.emailCode" autocomplete="on" placeholder="请输入邮箱验证码" />
-                <a-button @click="sendSmsCode" class="code-btn" type="primary" :disabled="emailCodeButtonDisabled">
-                  {{ emailCodeTips }}
-                </a-button>
-              </a-input-group>
-            </a-form-item>
-            <a-form-item name="password">
-              <a-input-password
-                v-model:value="loginForm.password"
-                autocomplete="on"
-                :type="showPassword ? 'text' : 'password'"
-                placeholder="请输入密码"
-              />
-            </a-form-item>
-            <a-form-item name="captchaCode">
-              <div class="captchaCode-img">
-                <a-input v-model:value.trim="loginForm.captchaCode" placeholder="请输入验证码" />
-                <img :src="captchaBase64Image" @click="getCaptcha" />
-              </div>
-            </a-form-item>
-            <a-form-item>
-              <a-checkbox v-model:checked="rememberPwd">记住密码</a-checkbox>
-            </a-form-item>
-            <a-form-item>
-              <a-button style="width: 100%" @click="onLogin" type="primary" size="large">登录</a-button>
-            </a-form-item>
-          </a-form>
+  <div class="login">
+    <a-carousel autoplay class="carousel" dotsClass="dots" lazyLoad :autoplaySpeed="60000" adaptiveHeight>
+      <div>
+        <img :src="loginBg" class="img" alt="">
+      </div>
+      <div>
+        <img :src="loginBg" class="img" alt="">
+      </div>
+    </a-carousel>
+    <div class="login-box">
+      <div class="login-left">
+        <div class="login-left-box">
+          <img class="logo" :src="logo" alt="">
+          <div class="slogan">合作共赢 · 品质第一 </div>
+          <div class="type">研发设计/生产制造/工程管理/投资运营</div>
         </div>
       </div>
-    </div>
-
-    <div class="login-footer">
-      <div class="login-footer-item">
-        <img class="lft-icon" src="/@/assets/loginNew/shiming_icon.svg" alt="" />
-        <img class="lft-line" src="/@/assets/loginNew/line_icon.svg" alt="" />
-        <span class="lft-txt">团结</span>
-        <span class="lft-txt lft-dot">.</span>
-        <span class="lft-txt">进取</span>
-        <span class="lft-txt lft-dot">.</span>
-        <span class="lft-txt">务实</span>
-        <span class="lft-txt lft-dot">.</span>
-        <span class="lft-txt">创新</span>
+      <div class="login-right">
+        <div class="login-right-box">
+          <div class="login-right-title">
+            <span class="welcome">欢迎登录</span>内控系统管理平台
+          </div>
+          <div class="login-right-form">
+
+            <a-tabs v-model:activeKey="activeKey" class="tabs">
+              <a-tab-pane key="0" tab="账号登录" force-render>
+                <div class="login-form">
+                  <a-form ref="formRef" :model="loginForm" :rules="rules">
+                    <a-form-item name="loginName" class="form-item">
+                      <div class="label">
+                        账户
+                      </div>
+                      <a-input class="input" v-model:value.trim="loginForm.loginName" placeholder="请输入用户名">
+                        <template #prefix>
+                          <UserOutlined />
+                        </template>
+                      </a-input>
+                    </a-form-item>
+                    <a-form-item name="emailCode" class="form-item" v-if="emailCodeShowFlag" label="邮箱验证码">
+                      <a-input-group compact>
+                        <a-input style="width: calc(100% - 110px)" v-model:value="loginForm.emailCode" autocomplete="on"
+                          placeholder="请输入邮箱验证码" />
+                        <a-button @click="sendSmsCode" class="code-btn" type="primary"
+                          :disabled="emailCodeButtonDisabled">
+                          {{ emailCodeTips }}
+                        </a-button>
+                      </a-input-group>
+                    </a-form-item>
+                    <a-form-item name="password" class="form-item">
+                      <div class="label">
+                        密码
+                      </div>
+                      <a-input-password class="input" v-model:value="loginForm.password" autocomplete="on"
+                        :type="showPassword ? 'text' : 'password'" placeholder="请输入密码">
+                        <template #prefix>
+                          <SafetyOutlined />
+                        </template>
+                      </a-input-password>
+                    </a-form-item>
+                    <a-form-item name="captchaCode" class="form-item">
+                      <div class="label">
+                        验证码
+                      </div>
+                      <div class="captchaCode-img">
+                        <a-input v-model:value.trim="loginForm.captchaCode" class="input" placeholder="请输入验证码">
+                          <template #prefix>
+                            <SafetyOutlined />
+                          </template>
+                          <template #suffix>
+                            <img :src="captchaBase64Image" @click="getCaptcha" />
+                          </template>
+                        </a-input>
+                      </div>
+                    </a-form-item>
+                    <!-- <a-form-item>
+                      <a-checkbox v-model:checked="rememberPwd">记住密码</a-checkbox>
+                    </a-form-item> -->
+                    <a-form-item class="form-item">
+                      <div class="form-btn">
+                        <a-button class="btn" @click="onLogin" type="primary" size="large">登录</a-button>
+                      </div>
+                    </a-form-item>
+                  </a-form>
+                </div>
+              </a-tab-pane>
+              <a-tab-pane key="1" tab="扫码登录" force-render>
+                <div class="qrcode-login">
+                  <img class="img" :src="tip" alt="">
+                  <div class="code">
+                    <ddLogin />
+                    <!-- <a-qrcode value="https://www.antdv.com/" :size="250" /> -->
+                  </div>
+                </div>
+              </a-tab-pane>
+            </a-tabs>
+            <div class="login-right-bottom">如有疑问请致电：营销热线0532-88988868</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-  import { message } from 'ant-design-vue';
-  import { onMounted, onUnmounted, reactive, ref } from 'vue';
-  import { useRouter } from 'vue-router';
-  import { loginApi } from '/@/api/system/login-api';
-  import { SmartLoading } from '/@/components/framework/smart-loading';
-  import { LOGIN_DEVICE_ENUM } from '/@/constants/system/login-device-const';
-  import { useUserStore } from '/@/store/modules/system/user';
-  import loginQR from '/@/assets/images/login/login-qr.png';
-  import wechatIcon from '/@/assets/images/login/wechat-icon.png';
-  import aliIcon from '/@/assets/images/login/ali-icon.png';
-  import douyinIcon from '/@/assets/images/login/douyin-icon.png';
-  import qqIcon from '/@/assets/images/login/qq-icon.png';
-  import weiboIcon from '/@/assets/images/login/weibo-icon.png';
-  import feishuIcon from '/@/assets/images/login/feishu-icon.png';
-  import googleIcon from '/@/assets/images/login/google-icon.png';
-
-  import { buildRoutes } from '/@/router/index';
-  import { smartSentry } from '/@/lib/smart-sentry';
-  import { encryptData, decryptData } from '/@/lib/encrypt';
-  import { localSave, localRemove, localRead } from '/@/utils/local-util.js';
-  import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
-  import { Form } from 'ant-design-vue';
-  import useBsDict from "/@/utils/dict.js";
-
-  //--------------------- 登录表单 ---------------------------------
-
-  const loginForm = reactive({
-    loginName: 'admin',
-    password: '',
-    captchaCode: '',
-    captchaUuid: '',
-    loginDevice: LOGIN_DEVICE_ENUM.PC.value,
-  });
-  const rules = {
-    loginName: [{ required: true, message: '用户名不能为空' }],
-    password: [{ required: true, message: '密码不能为空' }],
-    captchaCode: [{ required: true, message: '验证码不能为空' }],
-  };
-
-  const showPassword = ref(false);
-  const router = useRouter();
-  const formRef = ref();
-  const rememberPwd = ref(false);
-
-  function readLocalRememberMe() {
-    const rememberMe = JSON.parse(localRead('rememberMe') || null);
-    if (rememberMe) {
-      rememberMe.password = rememberMe.password ? decryptData(rememberMe.password) : '';
-      loginForm.loginName = rememberMe.loginName;
-      loginForm.password = rememberMe.password;
-      rememberPwd.value = true;
-      // console.log('readLocalRememberMe', rememberMe);
+import { message } from 'ant-design-vue';
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { loginApi } from '/@/api/system/login-api';
+import { SmartLoading } from '/@/components/framework/smart-loading';
+import { LOGIN_DEVICE_ENUM } from '/@/constants/system/login-device-const';
+import { useUserStore } from '/@/store/modules/system/user';
+import loginBg from '/@/assets/images/login/loginbg.jpg'
+import tip from '/@/assets/images/login/tooltip.png'
+import logo from '/@/assets/images/login/logo1.png'
+import { buildRoutes } from '/@/router/index';
+import { smartSentry } from '/@/lib/smart-sentry';
+import { encryptData, decryptData } from '/@/lib/encrypt';
+import { localSave, localRemove, localRead } from '/@/utils/local-util.js';
+import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
+import { Form } from 'ant-design-vue';
+import useBsDict from "/@/utils/dict.js";
+import ddLogin from '/@/components/support/dd-login/index.vue'
+
+const activeKey = ref('0')
+
+//--------------------- 登录表单 ---------------------------------
+
+const loginForm = reactive({
+  loginName: 'admin',
+  password: '',
+  captchaCode: '',
+  captchaUuid: '',
+  loginDevice: LOGIN_DEVICE_ENUM.PC.value,
+});
+const rules = {
+  loginName: [{ required: true, message: '用户名不能为空' }],
+  password: [{ required: true, message: '密码不能为空' }],
+  captchaCode: [{ required: true, message: '验证码不能为空' }],
+};
+
+const showPassword = ref(false);
+const router = useRouter();
+const formRef = ref();
+// const rememberPwd = ref(false);
+
+// function readLocalRememberMe() {
+//   const rememberMe = JSON.parse(localRead('rememberMe') || null);
+//   if (rememberMe) {
+//     rememberMe.password = rememberMe.password ? decryptData(rememberMe.password) : '';
+//     loginForm.loginName = rememberMe.loginName;
+//     loginForm.password = rememberMe.password;
+//     rememberPwd.value = true;
+//     // console.log('readLocalRememberMe', rememberMe);
+//   }
+// }
+
+onMounted(() => {
+  // readLocalRememberMe();
+  document.onkeyup = (e) => {
+    if (e.keyCode === 13) {
+      onLogin();
     }
-  }
-
-  onMounted(() => {
-    readLocalRememberMe();
-    document.onkeyup = (e) => {
-      if (e.keyCode === 13) {
-        onLogin();
-      }
-    };
-  });
-
-  onUnmounted(() => {
-    document.onkeyup = null;
-  });
-
-  //登录
-  async function onLogin() {
-    formRef.value.validate().then(async () => {
-      try {
-        SmartLoading.show();
-        // 密码加密
-        let encryptPasswordForm = Object.assign({}, loginForm, {
-          password: encryptData(loginForm.password),
-        });
-        const res = await loginApi.login(encryptPasswordForm);
-        stopRefreshCaptchaInterval();
-
-        if (rememberPwd.value === true) {
-          localSave('rememberMe', JSON.stringify({ loginName: encryptPasswordForm.loginName, password: encryptPasswordForm.password }));
-        } else {
-          localRemove('rememberMe');
-        }
-
-        localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token ? res.data.token : '');
-        message.success('登录成功');
-
-        // 刷新本地缓存
-        await useBsDict.refresh();
-        //更新用户信息到pinia
-        useUserStore().setUserLoginInfo(res.data);
-        localSave('loginFrom', '0');
-        //构建系统的路由
-        buildRoutes();
-        router.push('/home');
-      } catch (e) {
-        if (e.data && e.data.code !== 0) {
-          loginForm.captchaCode = '';
-          getCaptcha();
-        }
-        smartSentry.captureError(e);
-      } finally {
-        SmartLoading.hide();
-      }
-    });
-  }
+  };
+});
 
-  //--------------------- 验证码 ---------------------------------
+onUnmounted(() => {
+  document.onkeyup = null;
+});
 
-  const captchaBase64Image = ref('');
-  async function getCaptcha() {
+//登录
+async function onLogin() {
+  formRef.value.validate().then(async () => {
     try {
-      let captchaResult = await loginApi.getCaptcha();
-      captchaBase64Image.value = captchaResult.data.captchaBase64Image;
-      loginForm.captchaUuid = captchaResult.data.captchaUuid;
-      beginRefreshCaptchaInterval(captchaResult.data.expireSeconds);
-    } catch (e) {
-      console.log(e);
-    }
-  }
-
-  let refreshCaptchaInterval = null;
-  function beginRefreshCaptchaInterval(expireSeconds) {
-    if (refreshCaptchaInterval === null) {
-      refreshCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
-    }
-  }
-
-  function stopRefreshCaptchaInterval() {
-    if (refreshCaptchaInterval != null) {
-      clearInterval(refreshCaptchaInterval);
-      refreshCaptchaInterval = null;
-    }
-  }
-
-  onMounted(() => {
-    getCaptcha();
-    getTwoFactorLoginFlag();
-  });
-  //--------------------- 邮箱验证码 ---------------------------------
-  const emailCodeShowFlag = ref(false);
-  let emailCodeTips = ref('获取邮箱验证码');
-  let emailCodeButtonDisabled = ref(false);
-  // 定时器
-  let countDownTimer = null;
-  // 开始倒计时
-  function runCountDown() {
-    emailCodeButtonDisabled.value = true;
-    let countDown = 60;
-    emailCodeTips.value = `${countDown}秒后重新获取`;
-    countDownTimer = setInterval(() => {
-      if (countDown > 1) {
-        countDown--;
-        emailCodeTips.value = `${countDown}秒后重新获取`;
+      SmartLoading.show();
+      // 密码加密
+      let encryptPasswordForm = Object.assign({}, loginForm, {
+        password: encryptData(loginForm.password),
+      });
+      const res = await loginApi.login(encryptPasswordForm);
+      stopRefreshCaptchaInterval();
+
+      if (rememberPwd.value === true) {
+        localSave('rememberMe', JSON.stringify({ loginName: encryptPasswordForm.loginName, password: encryptPasswordForm.password }));
       } else {
-        clearInterval(countDownTimer);
-        emailCodeButtonDisabled.value = false;
-        emailCodeTips.value = '获取验证码';
+        localRemove('rememberMe');
       }
-    }, 1000);
-  }
-  // 获取双因子登录标识
-  async function getTwoFactorLoginFlag() {
-    try {
-      let result = await loginApi.getTwoFactorLoginFlag();
-      emailCodeShowFlag.value = result.data;
-    } catch (e) {
-      smartSentry.captureError(e);
-    }
-  }
-  // 发送邮箱验证码
-  async function sendSmsCode() {
-    try {
-      SmartLoading.show();
-      let result = await loginApi.sendLoginEmailCode(loginForm.loginName);
-      message.success('验证码发送成功!请登录邮箱查看验证码~');
-      runCountDown();
+
+      localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token ? res.data.token : '');
+      message.success('登录成功');
+
+      // 刷新本地缓存
+      await useBsDict.refresh();
+      //更新用户信息到pinia
+      useUserStore().setUserLoginInfo(res.data);
+      localSave('loginFrom', '0');
+      //构建系统的路由
+      buildRoutes();
+      router.push('/home');
     } catch (e) {
+      if (e.data && e.data.code !== 0) {
+        loginForm.captchaCode = '';
+        getCaptcha();
+      }
       smartSentry.captureError(e);
     } finally {
       SmartLoading.hide();
     }
+  });
+}
+
+//--------------------- 验证码 ---------------------------------
+
+const captchaBase64Image = ref('');
+async function getCaptcha() {
+  try {
+    let captchaResult = await loginApi.getCaptcha();
+    captchaBase64Image.value = captchaResult.data.captchaBase64Image;
+    loginForm.captchaUuid = captchaResult.data.captchaUuid;
+    beginRefreshCaptchaInterval(captchaResult.data.expireSeconds);
+  } catch (e) {
+    console.log(e);
   }
-</script>
+}
 
-<style lang="scss" scoped>
-  .login {
-    height: calc(100vh - 66px);
-    width: 100%;
-    background-image: url('../../../assets/loginNew/login-background-new.png');
-    background-position: top center;
-    background-repeat: no-repeat;
-    position: relative;
-    background-size: 100% auto;
+let refreshCaptchaInterval = null;
+function beginRefreshCaptchaInterval(expireSeconds) {
+  if (refreshCaptchaInterval === null) {
+    refreshCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
   }
+}
 
-  .login-code {
-    width: 33%;
-    height: 38px;
-    float: right;
-
-    img {
-      cursor: pointer;
-      vertical-align: middle;
+function stopRefreshCaptchaInterval() {
+  if (refreshCaptchaInterval != null) {
+    clearInterval(refreshCaptchaInterval);
+    refreshCaptchaInterval = null;
+  }
+}
+
+onMounted(() => {
+  getCaptcha();
+  getTwoFactorLoginFlag();
+});
+//--------------------- 邮箱验证码 ---------------------------------
+const emailCodeShowFlag = ref(false);
+let emailCodeTips = ref('获取邮箱验证码');
+let emailCodeButtonDisabled = ref(false);
+// 定时器
+let countDownTimer = null;
+// 开始倒计时
+function runCountDown() {
+  emailCodeButtonDisabled.value = true;
+  let countDown = 60;
+  emailCodeTips.value = `${countDown}秒后重新获取`;
+  countDownTimer = setInterval(() => {
+    if (countDown > 1) {
+      countDown--;
+      emailCodeTips.value = `${countDown}秒后重新获取`;
+    } else {
+      clearInterval(countDownTimer);
+      emailCodeButtonDisabled.value = false;
+      emailCodeTips.value = '获取验证码';
     }
+  }, 1000);
+}
+// 获取双因子登录标识
+async function getTwoFactorLoginFlag() {
+  try {
+    let result = await loginApi.getTwoFactorLoginFlag();
+    emailCodeShowFlag.value = result.data;
+  } catch (e) {
+    smartSentry.captureError(e);
   }
-
-  .login-code-img {
-    height: 38px;
+}
+// 发送邮箱验证码
+async function sendSmsCode() {
+  try {
+    SmartLoading.show();
+    let result = await loginApi.sendLoginEmailCode(loginForm.loginName);
+    message.success('验证码发送成功!请登录邮箱查看验证码~');
+    runCountDown();
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    SmartLoading.hide();
   }
+}
+</script>
 
-  .page-content {
-    position: absolute;
-    width: 670px;
-    height: 618px;
-    top: 50%;
-    right: 208px;
-    transform: translateY(-50%);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .page-header {
-      display: flex;
-      padding: 25px 0;
-      align-items: center;
+<style lang="scss" scoped>
+.login {
+  height: 100vh;
+  width: 100vw;
+  // background-color: #e39f77;
 
-      .page-header-img {
-        width: 121px;
-        height: 67px;
-      }
+  .carousel {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 0;
 
-      .page-header-title {
-        color: #373737;
-        font-size: 36px;
-      }
+    .img {
+      height: 100vh;
+      width: 100vw;
     }
 
-    .login-form {
-      width: 595px;
-      height: 519px;
-      border-image-source: linear-gradient(180deg, #f5f5f5 10.81%, rgba(232, 232, 232, 0) 100%);
-      box-shadow: 0px 6px 4px 0px rgba(149, 149, 149, 0.25);
-      background: white;
-      border-radius: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .a-input {
-        height: 38px;
-
-        input {
-          height: 38px;
-        }
-      }
-
-      .input-icon {
-        height: 50px;
-        width: 16px;
-        margin: 0 5px 0 5px;
-      }
-
-      ::v-deep .Form.Item__content {
-        background: rgba(255, 255, 255, 1);
-      }
-
-      ::v-deep .a-input__inner {
-        // border: none;
-        border-radius: 5px;
-        box-shadow: 0px 4px 4px 0px rgba(214, 214, 214, 0.25);
-        border: 1px solid rgba(238, 238, 238, 1);
-        height: 50px;
-        line-height: 50px;
-      }
-
-      ::v-deep .a-input__clear {
-        height: 50px;
-        line-height: 50px;
-      }
+    :deep(.dots) {
+      width: 65%;
+    }
 
-      ::v-deep .a-input__clear {
-        font-size: 20px;
-      }
+    :deep(.dots li) {
+      height: 20px;
+      width: 20px;
+    }
 
-      ::v-deep .a-button--medium {
-        padding: 16px 20px;
-      }
+    :deep(.dots :not(.slick-active) button) {
+      height: 100%;
+      border-radius: 20px;
+    }
 
-      ::v-deep .Form.Item__error {
-        padding-top: 10px;
-      }
+    :deep(.dots .slick-active) {
+      width: 4%;
     }
-  }
 
-  #login_container {
-    margin: 0 auto;
-  }
+    :deep(.slick-active button) {
+      background-color: #2b69f8;
+      border-radius: 20px;
+      height: 100%;
+    }
 
-  /* 样式控制iframe的大小和位置 */
-  .wedelogin {
-    // width: 300px; /* 设置容器的宽度 */
-    // height: 300px; /* 设置容器的高度 */
-    // border: 1px solid #ccc; /* 边框样式 */
-    overflow: hidden;
-    /* 隐藏溢出的内容 */
-    margin: 0 auto;
   }
 
-  .scan-qrlogin {
-    width: 100%;
+  .login-box {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    // align-items: center;
+    gap: 60px;
+    height: 100%;
+    width: 100%;
 
-    .scan-qrlogin-item {
-      width: 100%;
+    .login-left {
       display: flex;
-      height: 35px;
-      cursor: pointer;
-      margin-bottom: 20px;
-      justify-content: center;
-
-      .sq-it {
-        // flex: 1;
+      flex-direction: column;
+      height: 35%;
+      width: 55%;
+      position: absolute;
+      left: 0;
+      top: 20%;
+      background: linear-gradient(to right, #FFFFFF, #99999900);
+      z-index: 1;
+      padding: 30px;
+
+      .login-left-box {
+        width: 46%;
+        height: 100%;
         display: flex;
-        width: 80px;
-        justify-content: center;
-        align-items: center;
-      }
+        flex-direction: column;
+        justify-content: space-evenly;
 
-      .sq-it_active {
-        color: #2b69f8;
-        border-bottom: 2px solid #2b69f8;
+        .logo {
+          height: 84px;
+          width: 240px;
+        }
+
+        .slogan {
+          font-size: 40px;
+          font-weight: 600;
+          font-family: 'PingFang SC';
+          color: #1C449B;
+        }
+
+        .type {
+          background-color: #1c449b;
+          padding: 8px 16px;
+          border-radius: 16px;
+          color: #FFFFFF;
+          font-size: 24px;
+          font-weight: 600;
+          font-family: 'PingFang SC';
+        }
       }
-    }
-  }
 
-  #loginBoxSize {
-    font-size: 10px;
+    }
 
-    .login-footer {
-      width: 100%;
-      height: 66px;
-      background: rgba(237, 237, 237, 0.5);
+    .login-right {
       display: flex;
-      justify-content: center;
+      flex-direction: column;
       align-items: center;
-
-      .login-footer-item {
+      height: 100%;
+      width: 40%;
+      position: absolute;
+      right: 0;
+      background-color: rgba(255, 255, 255, 0.6);
+      border-radius: 20px 0 0 20px;
+      backdrop-filter: blur(10px);
+
+      .login-right-box {
         display: flex;
-        align-items: center;
-
-        .lft-icon {
-          width: 24px;
-          height: 24px;
+        flex-direction: column;
+        gap: 20px;
+        position: absolute;
+        top: 12%;
+
+        .login-right-title {
+          font-size: 30px;
+          font-weight: 600;
+          width: 100%;
+          color: rgba(0, 0, 0, 1);
+          font-family: 'PingFang SC';
+
+          .welcome {
+            font-size: 48px;
+          }
         }
 
-        .lft-line {
-          width: 20px;
-          height: 19px;
-        }
-
-        .lft-txt {
-          color: #666;
-          font-size: 24px;
-          margin: 0 15px;
-          line-height: 66px;
-        }
-
-        .lft-dot {
-          position: relative;
-          top: -5px;
+        .login-right-form {
+          width: 600px;
+          height: 640px;
+          background-color: #ffffff;
+          box-shadow: 0px 6px 4px 0px rgba(149, 149, 149, 0.25);
+          border-radius: 8px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .tabs {
+            height: 90%;
+            width: 100%;
+            padding: 32px 32px 0 32px;
+            :deep(.ant-tabs-tab-active .ant-tabs-tab-btn){
+              color: #000;
+            }
+            :deep(.ant-tabs-nav-list :not(.ant-tabs-tab-active) .ant-tabs-tab-btn){
+              color: #9B9B9B;
+            }
+            :deep(.ant-tabs-nav::before) {
+              border: none;
+            }
+
+            :deep(.ant-tabs-tab-btn) {
+              font-size: 30px;
+            }
+
+            :deep(.ant-tabs-content) {
+              height: 100%;
+            }
+
+            .qrcode-login {
+              margin-top: 50px;
+
+              .img {
+                // width: 250px;
+                // height: 250px;
+                position: absolute;
+                right: 0;
+              }
+
+              .code {
+                position: absolute;
+                left: -10px;
+                top: 16px;
+              }
+            }
+
+            .login-form {
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 0 32px 0 16px;
+
+              .label {
+                font-size: 20px;
+                font-family: 'PingFang SC';
+                font-weight: 500;
+                margin-top: 16px;
+                margin-bottom: 8px;
+              }
+
+              .input {
+                height: 50px;
+                width: 100%;
+                font-size: 20px;
+                border: 1px solid rgba(238, 238, 238, 1);
+                box-shadow: 0px 4px 4px 0px rgba(214, 214, 214, 0.25);
+              }
+
+              .form-item {
+                margin: 0;
+
+                .form-btn {
+                  width: 80%;
+                  height: 50px;
+                  margin: 24px auto;
+
+                  .btn {
+                    height: 100%;
+                    width: 100%;
+                    font-size: 20px;
+
+                  }
+                }
+              }
+
+
+              :deep(.ant-form) {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+              }
+
+              :deep(.ant-form-item) {
+                margin-left: 20px;
+              }
+            }
+          }
+
+          .login-right-bottom {
+            width: 100%;
+            height: 10%;
+            text-align: center;
+            padding: 16px;
+            border-top: 1px dotted #DEDEDE;
+            color: #EF2F22;
+          }
         }
       }
-    }
-  }
 
-  .captchaCode-img {
-    display: flex;
-    height: 32px;
+    }
   }
+}
 </style>