登录页面优化

src/views/system/loginmini/MiniLogin.vue

@@ -10,11 +10,11 @@
               <div class="aui-image-text">
                 <div>
                   <span class="introduce-text">哈尔滨师范大学</span>
-                <br>
+                  <br />
                   <span class="introduce-text">英语四六级综合管理平台</span>
-                <br>
-                <br>
-                <span class="introduce-text" style="font-size: 18px;">深入分析 多维展示</span>
+                  <br />
+                  <br />
+                  <span class="introduce-text" style="font-size: 18px">深入分析 多维展示</span>
                 </div>
               </div>
             </div>
@@ -62,7 +62,8 @@
                 <div class="aui-formButton">
                   <div class="aui-flex">
                     <a-button :loading="loginLoading" class="aui-link-login" type="primary" @click="loginHandleClick">
-                      {{ t('sys.login.loginButton') }}</a-button>
+                      {{ t('sys.login.loginButton') }}</a-button
+                    >
                   </div>
                   <div class="aui-flex">
                     <a class="aui-linek-code aui-flex-box" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</a>
@@ -84,12 +85,30 @@
       <MiniCodelogin ref="codeRef" @go-back="goBack" @success="handleSuccess" />
     </div>
     <!-- 第三方登录相关弹框 -->
-    <ThirdModal ref="thirdModalRef"></ThirdModal>
+    <ThirdModal ref="thirdModalRef" />
+    <div class="square">
+      <ul>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+    </div>
+    <div class="circle">
+      <ul>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+    </div>
   </div>
 </template>
 <script lang="ts" setup name="login-mini">
   import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
-  import { onMounted, reactive, ref, toRaw, unref } from 'vue';
+  import { defineComponent, onMounted, reactive, ref, toRaw, unref } from 'vue';
   import { useUserStore } from '/@/store/modules/user';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useI18n } from '/@/hooks/web/useI18n';
@@ -101,8 +120,8 @@
   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 { useDesign } from '/@/hooks/web/useDesign';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
 
   const { prefixCls } = useDesign('mini-login');
   const { notification, createMessage } = useMessage();
@@ -146,7 +165,6 @@
   const loginLoading = ref<boolean>(false);
   const { getIsMobile } = useAppInject();
 
-
   /**
    * 获取验证码
    */
@@ -282,8 +300,6 @@
     }
   }
 
-
-
   /**
    * 返回登录页面
    */
@@ -298,7 +314,7 @@
    */
   function handleSuccess(value) {
     Object.assign(formData, value);
-    Object.assign(phoneFormData, { mobile: "", smscode: "" });
+    Object.assign(phoneFormData, { mobile: '', smscode: '' });
     type.value = 'login';
     activeIndex.value = 'accountLogin';
     handleChangeCheckCode();
@@ -314,7 +330,6 @@
     }, 300);
   }
 
-
   onMounted(() => {
     //加载验证码
     handleChangeCheckCode();
@@ -414,7 +429,9 @@ html[data-theme='dark'] {
       .app-iconify {
         color: #fff !important;
       }
-    .aui-inputClear input,.aui-input-line input,.aui-choice{
+      .aui-inputClear input,
+      .aui-input-line input,
+      .aui-choice {
         color: #c9d1d9 !important;
       }
 
@@ -435,7 +452,8 @@ html[data-theme='dark'] {
       .aui-code-line {
         border-left: none !important;
       }
-    .ant-checkbox-inner,.aui-success h3{
+      .ant-checkbox-inner,
+      .aui-success h3 {
         border-color: #c9d1d9;
       }
       //update-begin---author:wangshuai ---date:20230828  for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------