Merge branch 'dev' of https://gitea.dykj.co/sundongyu/dykj-college-back-office-management-system into dev

src/pages/login/index.vue

@@ -1,58 +1,93 @@
 <template>
   <div class="login-container">
-    <t-space style="width: 350px">
+    <div style="width: 100%" class="login-right">
-      <t-form
+      <div class="login-form">
-        :data="formData"
+        <div class="login-box">
-        ref="form"
+          <t-form
-        @reset="onReset"
+            :data="formData"
-        @submit="onSubmit"
+            :rules="rules"
-        :colon="true"
+            ref="form"
-        :labelWidth="80"
+            @reset="onReset"
-        class="login-form"
+            @submit="onSubmit"
-      >
+            :colon="true"
-        <h2 class="login-title">登录</h2>
+            :labelWidth="0"
-        <t-form-item name="account">
-          <t-input
-            clearable
-            v-model="formData.account"
-            placeholder="请输入工号或学号"
           >
-            <desktop-icon slot:string="prefix-icon"></desktop-icon>
+            <h2 class="login-title">登录</h2>
-          </t-input>
+
-        </t-form-item>
+            <t-form-item name="account">
-        <t-form-item name="password">
+              <t-input
-          <t-input
+                clearable
-            type="password"
+                v-model="formData.account"
-            clearable
+                placeholder="请输入工号或学号"
-            v-model="formData.password"
+              >
-            placeholder="请输入密码"
+                <desktop-icon slot:string="prefix-icon"></desktop-icon>
-          >
+              </t-input>
-            <lock-on-icon slot:string="prefix-icon"></lock-on-icon>
+            </t-form-item>
-          </t-input>
+            <t-form-item name="password">
-        </t-form-item>
+              <t-input
-        <t-form-item>
+                type="password"
-          <t-button theme="primary" type="submit" block @click="Login"
+                clearable
-            >登录</t-button
+                v-model="formData.password"
-          >
+                placeholder="请输入密码"
-        </t-form-item>
+              >
-      </t-form>
+                <lock-on-icon slot:string="prefix-icon"></lock-on-icon>
-    </t-space>
+              </t-input>
+            </t-form-item>
+            <t-form-item>
+              <t-button theme="primary" type="submit" block>登录</t-button>
+            </t-form-item>
+          </t-form>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { MessagePlugin } from "tdesign-vue-next";
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
-import { reqLogin } from "@/api/login/index";
 // import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue";
 
 const INITIAL_DATA = {
   account: "",
   password: "",
 };
+const from = ref();
 const formData = reactive({
   ...INITIAL_DATA,
 });
+
+const rules = reactive({
+  account: [
+    {
+      required: true,
+      message: "必须填写",
+    },
+    {
+      min: 10,
+      message: "输入不正确",
+    },
+    {
+      max: 10,
+      message: "输入不正确",
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: "密码必填",
+    },
+    {
+      len: 8,
+      message: "请输入 8 位密码",
+    },
+    {
+      pattern: /[A-Z]+/,
+      message: "密码必须包含大写字母",
+    },
+  ],
+});
+
 const onReset = () => {
   MessagePlugin.success("重置成功");
 };
@@ -72,6 +107,7 @@ const Login = async () => {
 
 <style lang="less" scoped>
 .login-container {
+  display: flex;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -80,16 +116,28 @@ const Login = async () => {
   overflow: hidden;
 }
 .login-form {
-  width: 450px;
+  width: 26%;
-  margin: 200px;
+  height: 40%;
   background-color: rgba(255, 255, 255, 0.8);
-  padding: 80px;
+  border-radius: 1.25rem;
-  border-radius: 20px;
 }
 .login-title {
   text-align: center;
-  font-size: 24px;
+  font-size: 1.5rem;
-  margin-bottom: 40px;
+  margin-bottom: 4rem;
   color: #333;
 }
+.login-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.login-right {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>