登陆

src/pages/login/index.vue

@@ -1,55 +1,93 @@
 <template>
   <div class="login-container">
-    <t-space style="width: 350px">
-      <t-form
-        :data="formData"
-        ref="form"
-        @reset="onReset"
-        @submit="onSubmit"
-        :colon="true"
-        :labelWidth="80"
-        class="login-form"
-      >
-      <h2 class="login-title">登录</h2>
-        <t-form-item name="account">
-          <t-input
-            clearable
-            v-model="formData.account"
-            placeholder="请输入工号或学号"
+    <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="0"
           >
-            <desktop-icon slot:string="prefix-icon"></desktop-icon>
-          </t-input>
-        </t-form-item>
-        <t-form-item name="password">
-          <t-input
-            type="password"
-            clearable
-            v-model="formData.password"
-            placeholder="请输入密码"
-          >
-            <lock-on-icon slot:string="prefix-icon"></lock-on-icon>
-          </t-input>
-        </t-form-item>
-        <t-form-item>
-          <t-button theme="primary" type="submit" block>登录</t-button>
-        </t-form-item>
-      </t-form>
-    </t-space>
+            <h2 class="login-title">登录</h2>
+
+            <t-form-item name="account">
+              <t-input
+                clearable
+                v-model="formData.account"
+                placeholder="请输入工号或学号"
+              >
+                <desktop-icon slot:string="prefix-icon"></desktop-icon>
+              </t-input>
+            </t-form-item>
+            <t-form-item name="password">
+              <t-input
+                type="password"
+                clearable
+                v-model="formData.password"
+                placeholder="请输入密码"
+              >
+                <lock-on-icon slot:string="prefix-icon"></lock-on-icon>
+              </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 { 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("重置成功");
 };
@@ -63,8 +101,9 @@ const onSubmit = ({ validateResult, firstError }) => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .login-container {
+  display: flex;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -73,16 +112,28 @@ const onSubmit = ({ validateResult, firstError }) => {
   overflow: hidden;
 }
 .login-form {
-    width:450px;
-    margin:200px;
-    background-color:rgba(255,255,255,0.8);
-    padding:80px;
-    border-radius:20px;
+  width: 26%;
+  height: 40%;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 1.25rem;
 }
 .login-title {
-    text-align:center;
-    font-size:24px;
-    margin-bottom:40px;
-    color:#333
+  text-align: center;
+  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>