登录页样式优化

src/components/LoginForm/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { FormInstance, FormRules } from "element-plus";
 import useUserStore from "@/store/modules/user";
-import { ref, useTemplateRef, onMounted,onUnmounted } from "vue";
+import { ref, useTemplateRef, onMounted, onUnmounted } from "vue";
 
 defineOptions({
   name: "LoginForm",
@@ -68,7 +68,7 @@ function refreshCaptcha() {
     randnum;
   form.value.captchaId = randnum;
 }
-function handleEnter (e:any) {
+function handleEnter(e: any) {
   // console.log(e)
   // console.log(e)
   if (e.keyCode == 13 || e.keyCode == 108) {
@@ -119,7 +119,7 @@ function handleLogin() {
   color: #3275ff;
 }
 
-.title {
+.title1 {
   position: relative;
   margin-bottom: 56px;
   font-size: 36px;
@@ -141,20 +141,16 @@ function handleLogin() {
 }
 
 .loginCSS {
-  padding: 2px;
+  font-weight: 400;
   font-size: 20px;
-  background: linear-gradient(91deg, #4fcaff 0%, #2b62ff 100%);
+  color: #fff;
+  height: 50px;
+  background: linear-gradient( 91deg, #4FCAFF 0%, #2B62FF 100%);
 }
 </style>
 <template>
-  <ElForm
-    ref="formRef"
-    :model="form"
-    :rules="rules"
-    class="min-h-500px w-full flex-col-stretch-center"
-    style="padding: 81px 75px;"
-    size="large"
-  >
+  <ElForm ref="formRef" :model="form" :rules="rules" class="min-h-500px w-full flex-col-stretch-center"
+    style="padding: 81px 75px;" size="large">
     <!-- <div class="mb-6">
       <HTabList v-model="type" :options="[
         { label: '账号密码登录', value: 'default' },
@@ -165,92 +161,64 @@ function handleLogin() {
       <!-- <h3 class="mb-8 text-xl color-[var(--el-text-color-primary)] font-bold">
         欢迎使用 {{ title }} ! 👋🏻
       </h3> -->
-      <div class="title strong">
+      <div class="title1 strong">
         <span>登录</span>
         <div class="tag"></div>
       </div>
       <div>
         <ElFormItem prop="system">
-          <ElInput
-            v-model="form.system"
-            placeholder="输入租户编码"
-            type="text"
-            tabindex="1"
-          >
+          <ElInput v-model="form.system" placeholder="输入租户编码" type="text" tabindex="1">
             <template #prefix>
-              <el-icon><Postcard /></el-icon>
+              <el-icon>
+                <Postcard />
+              </el-icon>
             </template>
           </ElInput>
         </ElFormItem>
         <ElFormItem prop="userName">
-          <ElInput
-            v-model="form.userName"
-            placeholder="手机号或工号"
-            type="text"
-            tabindex="1"
-            maxlength="11"
-          >
+          <ElInput v-model="form.userName" placeholder="手机号或工号" type="text" tabindex="1" maxlength="11">
             <template #prefix>
-              <el-icon><User /></el-icon>
+              <el-icon>
+                <User />
+              </el-icon>
             </template>
           </ElInput>
         </ElFormItem>
         <ElFormItem prop="passWord">
-          <ElInput
-            v-model="form.passWord"
-            type="password"
-            placeholder="登录密码"
-            tabindex="2"
-            show-password
-            @keyup.enter="handleLogin"
-          >
+          <ElInput v-model="form.passWord" type="password" placeholder="登录密码" tabindex="2" show-password
+            @keyup.enter="handleLogin">
             <template #prefix>
-              <el-icon><Lock /></el-icon>
+              <el-icon>
+                <Lock />
+              </el-icon>
             </template>
           </ElInput>
         </ElFormItem>
 
         <ElFormItem prop="captcha" style="margin-bottom: 0;">
           <ElCol :md="14" :sm="14" :xs="14">
-            <ElInput
-              v-model="form.captcha"
-              placeholder="验证码"
-              type="text"
-              tabindex="3"
-            >
+            <ElInput v-model="form.captcha" placeholder="验证码" type="text" tabindex="3">
               <template #prefix>
-                <el-icon><CircleCheck /></el-icon>
+                <el-icon>
+                  <CircleCheck />
+                </el-icon>
               </template>
             </ElInput>
           </ElCol>
           <ElCol :md="10" :sm="10" :xs="10" flex>
-            <img
-              style="width: 100%; height: 32px; margin-left: 20px;"
-              class="pointer"
-              :src="captchaSrc"
-              @click="refreshCaptcha"
-            />
+            <img style="width: 100%; height: 32px; margin-left: 20px;" class="pointer" :src="captchaSrc"
+              @click="refreshCaptcha" />
           </ElCol>
         </ElFormItem>
       </div>
       <div class="mb-17 flex-center-between">
-        <ElCheckbox v-model="remember"> 记住密码 </ElCheckbox>
-        <ElLink
-          type="primary"
-          :underline="false"
-          @click="emits('onResetPassword', form.userName)"
-        >
+        <ElCheckbox v-model="remember" style="color: #666;"> <span style="font-size: 14px;">记住账号</span></ElCheckbox>
+        <ElLink  style="font-size: 14px;color: #3275FF;" :underline="false" @click="emits('onResetPassword', form.userName)">
           忘记密码
         </ElLink>
       </div>
-      <ElButton
-        class="loginCSS"
-        :loading="loading"
-        type="primary"
-        @keydown.enter="handleEnter"
-        style="width: 100%;"
-        @click.prevent="handleLogin"
-      >
+      <ElButton class="loginCSS" text bg :loading="loading" @keydown.enter="handleEnter"
+        @click.prevent="handleLogin">
         登录
       </ElButton>
       <!-- <div class="mt-4 flex-center gap-2 text-sm color-[var(--el-text-color-secondary)]">
@@ -262,10 +230,7 @@ function handleLogin() {
     </template>
     <template v-else-if="type === 'qrcode'">
       <div class="flex-col-center">
-        <el-image
-          src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png"
-          class="h-[250px] w-[250px]"
-        />
+        <el-image src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png" class="h-[250px] w-[250px]" />
         <div class="mt-2 op-50">请使用微信扫码登录</div>
       </div>
     </template>