refactor(ui): 登录页重构

gpt-vue/projects/vue-admin/src/views/LoginView.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { reactive } from "vue";
 import { useRoute } from "vue-router";
-import { IconUser, IconLock } from "@arco-design/web-vue/es/icon";
 import { useAuthStore } from "@/stores/auth";
 import useRequest from "@/composables/useRequest";
 
@@ -23,70 +22,141 @@ async function handleSubmit({ errors, values }: any) {
 }
 </script>
 <template>
-  <div class="login-wrapper public-bg">
+  <div class="bg">
-    <div class="login-container">
+    <div class="content">
-      <div class="login-box">
+      <!-- 左侧图片 -->
-        <AForm :model="formData" size="large" @submit="handleSubmit">
+      <span class="left">
-          <h1 class="title">ChatGPT Plus Admin</h1>
+        <img src="/left-img.png" alt="" style="width: 468px" />
-          <AFormItem
+      </span>
-            hide-label
+      <!-- 表单 -->
-            field="username"
+      <div class="right-content">
-            :rules="[{ required: true, message: '请输入用户名' }]"
+        <div class="form-box">
+          <div class="title">ChatGPT Plus Admin</div>
+          <a-form
+              ref="formRef"
+              :model="formData"
+              class="form"
+              size="medium"
+              auto-label-width
+              @submit="handleSubmit"
           >
-            <AInput v-model="formData.username" placeholder="用户名">
+            <a-space direction="vertical" style="width: 100%">
-              <template #prefix>
+              <a-form-item
-                <IconUser />
+                  field="username"
-              </template>
+                  label="账号"
-            </AInput>
+                  hide-label
-          </AFormItem>
+                  hide-asterisk
-          <AFormItem
+                  :rules="[{ required: true, message: '请输入您的账号' }]"
-            hide-label
+              >
-            field="password"
+                <a-input
-            :rules="[{ required: true, message: '请输入密码' }]"
+                    v-model="formData.username"
-          >
+                    placeholder="请输入您的账号"
-            <AInputPassword v-model="formData.password" placeholder="密码">
+                    class="input"
-              <template #prefix>
+                ></a-input>
-                <IconLock />
+              </a-form-item>
-              </template>
+              <a-form-item
-            </AInputPassword>
+                  field="password"
-          </AFormItem>
+                  label="密码"
-          <AFormItem hide-label>
+                  hide-label
-            <AButton type="primary" long html-type="submit" :loading="loading">
+                  hide-asterisk
-              登录
+                  :rules="[{ required: true, message: '请输入您的密码' }]"
-            </AButton>
+              >
-          </AFormItem>
+                <a-input-password
-        </AForm>
+                    v-model="formData.password"
+                    placeholder="请输入您的密码"
+                    class="input"
+                >
+                </a-input-password>
+              </a-form-item>
+            </a-space>
+            <a-form-item hide-label>
+              <a-button :disabled="loading" html-type="submit" long type="primary" class="sign-in-btn">
+                登录
+              </a-button>
+            </a-form-item>
+          </a-form>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <style lang="less" scoped>
-.login-wrapper {
+.bg {
-  .login-container {
+  width: 100%;
-    display: flex;
+  height: 100vh;
-    width: 1000px;
+  background: linear-gradient(133deg, #ffffff 0%, #dde8fe 100%);
-    height: 500px;
+  display: flex;
-    align-items: center;
+  justify-content: center;
-    justify-content: right;
+  align-items: center;
-    background-color: #ffffff;
+  overflow: auto;
-    background-image: url("/login-content.png");
+}
-    background-size: contain;
+
-    background-repeat: no-repeat;
+.content {
-    background-position: left;
+  width: 1080px;
-    border-radius: 40px;
+  height: 557px;
-    .login-box {
+  display: flex;
-      display: flex;
+}
-      width: 50%;
+
-      height: 100%;
+.left {
-      padding: 20px;
+  width: 540px;
-      border-radius: 40px;
+  height: 557px;
-      align-items: center;
+  background: #2670fe;
-      justify-content: center;
+  border-radius: 16px 0 0 16px;
-      box-sizing: border-box;
+  display: flex;
-      .title {
+  justify-content: center;
-        text-align: center;
+  align-items: center;
-      }
+}
-    }
+
-  }
+.right-content {
+  width: 540px;
+  height: 557px;
+  background: #ffffff;
+  border-radius: 0 16px 16px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 800;
+  color: #333333;
+  line-height: 35px;
+  letter-spacing: 1px;
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.form-box {
+  display: flex;
+  flex-direction: column;
+  width: 438px;
+  padding: 58px 0;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.form {
+  flex: 1;
+  justify-content: space-between;
+}
+
+.input {
+  border-radius: 10px 10px 10px 10px;
+  height: 60px;
+  border: 2px solid #e5e6eb;
+}
+
+.captcha-image {
+  //width: 100%;
+  //height: 100%;
+  cursor: pointer;
+}
+
+.sign-in-btn {
+  height: 60px;
+  font-weight: 500;
+  line-height: 33px;
+  font-size: 28px;
+  border-radius: 10px 10px 10px 10px;
 }
 </style>