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

src/pages/login/index.vue

@@ -1,16 +1,19 @@
 <template>
   <div class="login-container">
-    <t-space style="width: 350px">
+    <div style="width: 100%" class="login-right">
+      <div class="login-form">
+        <div class="login-box">
           <t-form
             :data="formData"
+            :rules="rules"
             ref="form"
             @reset="onReset"
             @submit="onSubmit"
             :colon="true"
-        :labelWidth="80"
-        class="login-form"
+            :labelWidth="0"
           >
             <h2 class="login-title">登录</h2>
+
             <t-form-item name="account">
               <t-input
                 clearable
@@ -31,28 +34,60 @@
               </t-input>
             </t-form-item>
             <t-form-item>
-          <t-button theme="primary" type="submit" block @click="Login"
-            >登录</t-button
-          >
+              <t-button theme="primary" type="submit" block>登录</t-button>
             </t-form-item>
           </t-form>
-    </t-space>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { MessagePlugin } from "tdesign-vue-next";
-import { reactive } from "vue";
-import { reqLogin } from "@/api/login/index";
+import { reactive, ref } from "vue";
 // 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;
-  margin: 200px;
+  width: 26%;
+  height: 40%;
   background-color: rgba(255, 255, 255, 0.8);
-  padding: 80px;
-  border-radius: 20px;
+  border-radius: 1.25rem;
 }
 .login-title {
   text-align: center;
-  font-size: 24px;
-  margin-bottom: 40px;
+  font-size: 1.5rem;
+  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>