登录ui调整

src/views/login/forget-pwd.vue

@@ -12,32 +12,27 @@
           v-model="formData.mobileNumber"
           clearable
           placeholder="请输入你的手机号"
-          size="large"
+          size="medium"
         >
-          <template #prefix-icon>
-            <CallIcon />
-          </template>
         </t-input>
       </t-form-item>
       <t-form-item name="code">
         <div class="flex items-center">
           <t-input
-            style="width: 170px"
+            style="width: 162px"
             v-model="formData.code"
             clearable
             placeholder="验证码"
-            size="large"
+            size="medium"
           >
-            <template #prefix-icon>
-              <MobileIcon />
-            </template>
           </t-input>
           <t-button
-            class="m-l-20px"
-            style="width: 110px"
+            class="m-l-16px"
+            variant="outline"
+            style="width: 102px"
             :loading="loading"
-            @click="getCode"
             :disabled="isActive"
+            @click="getCode"
             >{{ isActive ? lastSeconds + 's' : '获取验证码' }}</t-button
           >
         </div>
@@ -48,11 +43,8 @@
           type="password"
           clearable
           placeholder="请输入新密码"
-          size="large"
+          size="medium"
         >
-          <template #prefix-icon>
-            <LockOnIcon />
-          </template>
         </t-input>
       </t-form-item>
       <t-form-item name="repeatPassword">
@@ -61,18 +53,15 @@
           type="password"
           clearable
           placeholder="请再次输入新密码"
-          size="large"
+          size="medium"
         >
-          <template #prefix-icon>
-            <ArrowTriangleUpIcon />
-          </template>
         </t-input>
       </t-form-item>
       <t-button
         block
         class="m-t-30px"
         @click="submitHandle"
-        size="large"
+        size="medium"
         theme="primary"
         >保 存</t-button
       >
@@ -82,12 +71,6 @@
 
 <script setup name="ForgetPwd">
 import { reactive, ref } from 'vue';
-import {
-  CallIcon,
-  MobileIcon,
-  LockOnIcon,
-  ArrowTriangleUpIcon,
-} from 'tdesign-icons-vue-next';
 import { clear } from '@/utils/tool';
 import { useIntervalFn } from '@vueuse/core';
 import { MessagePlugin } from 'tdesign-vue-next';

src/views/login/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="login flex justify-center items-center h-full">
     <img class="logo" src="../../assets/imgs/login_logo.png" />
-    <div class="login-bg flex justify-center items-center">
+    <div class="login-bg">
       <div class="login-bg-inner-box text-center">
-        <img src="../../assets/imgs/login_bg_inner.png" />
         <div class="title1">欢 迎 使 用</div>
         <div class="title2">项目质量控制管理平台</div>
       </div>
@@ -20,13 +19,13 @@
           返回登录
         </t-button>
         <!-- <t-button
-          v-else
-          variant="outline"
-          @click="loginType = loginType === 'ACCOUNT' ? 'PHONE' : 'ACCOUNT'"
-        >
-          <template #icon><SwapRightIcon /></template>
-          {{ loginType === 'ACCOUNT' ? '手机号' : '账号' }}登录
-        </t-button> -->
+            v-else
+            variant="outline"
+            @click="loginType = loginType === 'ACCOUNT' ? 'PHONE' : 'ACCOUNT'"
+          >
+            <template #icon><SwapRightIcon /></template>
+            {{ loginType === 'ACCOUNT' ? '手机号' : '账号' }}登录
+          </t-button> -->
       </div>
       <div class="title2" v-if="forgetStatus">{{ `请输入新的账号与密码` }}</div>
       <div class="title2" v-else>{{
@@ -46,12 +45,9 @@
               v-model="formData.loginName"
               clearable
               placeholder="请输入手机号码"
-              size="large"
+              size="medium"
               @enter="loginHandle"
             >
-              <template #prefix-icon>
-                <MobileIcon />
-              </template>
             </t-input>
           </t-form-item>
 
@@ -61,12 +57,9 @@
               type="password"
               clearable
               placeholder="请输入密码"
-              size="large"
+              size="medium"
               @enter="loginHandle"
             >
-              <template #prefix-icon>
-                <lock-on-icon />
-              </template>
             </t-input>
           </t-form-item>
         </t-form>
@@ -84,11 +77,8 @@
               v-model="formData2.mobileNumber"
               clearable
               placeholder="请输入你的手机号"
-              size="large"
+              size="medium"
             >
-              <template #prefix-icon>
-                <CallIcon />
-              </template>
             </t-input>
           </t-form-item>
           <t-form-item name="code">
@@ -98,11 +88,8 @@
                 v-model="formData2.code"
                 clearable
                 placeholder="验证码"
-                size="large"
+                size="medium"
               >
-                <template #prefix-icon>
-                  <MobileIcon />
-                </template>
               </t-input>
               <t-button
                 class="m-l-20px"
@@ -115,14 +102,14 @@
             </div>
           </t-form-item>
         </t-form>
-        <t-link theme="primary" class="m-t-20px" @click="forgetStatus = true"
+        <t-link theme="primary" class="m-t-28px" @click="forgetStatus = true"
           >忘记密码</t-link
         >
         <t-button
           block
-          class="m-t-30px"
+          class="m-t-28px"
           @click="loginHandle"
-          size="large"
+          size="medium"
           theme="primary"
           >登 录</t-button
         >
@@ -134,15 +121,8 @@
 </template>
 
 <script setup name="Login">
-import { ref, reactive, computed, watch } from 'vue';
-import {
-  DesktopIcon,
-  LockOnIcon,
-  RollbackIcon,
-  SwapRightIcon,
-  CallIcon,
-  MobileIcon,
-} from 'tdesign-icons-vue-next';
+import { ref, reactive } from 'vue';
+import { RollbackIcon } from 'tdesign-icons-vue-next';
 import { useRoute, useRouter } from 'vue-router';
 import { useUserStore, useAppStore } from '@/store';
 import { MessagePlugin } from 'tdesign-vue-next';
@@ -285,20 +265,15 @@ const findSuccess = () => {
     position: absolute;
   }
   .login-bg {
-    position: absolute;
-    top: 80px;
-    bottom: 80px;
-    left: 0;
-    width: 70%;
-    z-index: 99;
-    background: url(../../assets//imgs/login_bg_grid.png) center center
-      no-repeat;
-    background-size: contain;
+    width: 488px;
+    height: 586px;
+    background: url(../../assets//imgs/login_bg.png);
+    background-size: 100% 100%;
+    position: relative;
     .login-bg-inner-box {
-      img {
-        height: 260px;
-        margin-bottom: 20px;
-      }
+      position: absolute;
+      bottom: 114px;
+      width: 100%;
       .title1 {
         font-size: 32px;
         color: #262626;
@@ -314,30 +289,37 @@ const findSuccess = () => {
     }
   }
   .login-box {
-    width: 350px;
+    width: 344px;
     background: #fff;
     box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
     border-radius: 8px;
     border: 1px solid #e5e6eb;
-    padding: 24px;
-    position: absolute;
-    left: 60%;
-    z-index: 101;
+    padding: 32px;
+    position: relative;
     .title1 {
       span {
-        font-size: 20px;
+        font-size: 24px;
         font-weight: bold;
         color: #262626;
         line-height: 32px;
       }
     }
     .title2 {
-      font-size: 14px;
+      font-size: 16px;
       color: #8c8c8c;
       line-height: 24px;
       margin-top: 4px;
       margin-bottom: 28px;
+      font-weight: 400;
     }
   }
+  .login-form {
+    .t-form__item:not(:last-of-type) {
+      margin-bottom: 28px;
+    }
+  }
+  :deep(.t-button--variant-outline:hover) {
+    background-color: #e8f3ff;
+  }
 }
 </style>