登录样式

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/login.vue

@@ -1,22 +1,24 @@
 <template>
   <div class="loginView w-screen h-screen overflow-hidden flex">
-    <div class="w-1/5 h-1/2 bg-white m-auto border-t-8 border-blue-400 shadow-xl rounded-md pl-9 pr-9">
+    <div class="w-96 bg-white m-auto border-t-8 border-blue-400 shadow-xl rounded-md pl-9 pr-9">
       <div class="m-auto pt-4">
         <img class="w-1/5 h-1/5 m-auto" :src="loginLogo" alt="">
       </div>
       <h2 class="text-xl text-center pt-4 font-bold">客户管家</h2>
-      <div class="pt-4">
-        <el-input :prefix-icon="UserFilled" size="large" class="mt-2" v-model="username" placeholder="账号/手机号" />
-        <el-input :prefix-icon="Lock" show-password size="large" class="mt-6" v-model="password" placeholder="密码" />
+      <el-form class="pt-4" ref="ruleFormRef" :model="ruleForm">
+        <el-input :prefix-icon="UserFilled" size="large" class="mt-2" v-model="ruleForm.username"
+          placeholder="账号/手机号" />
+        <el-input :prefix-icon="Lock" show-password size="large" class="mt-6" v-model="ruleForm.password"
+          placeholder="密码" />
         <div class="pt-6">
           <el-button type="primary" size="large" class="w-full" :loading="loginLoading" @click="login">登录</el-button>
         </div>
-      </div>
+      </el-form>
       <el-divider content-position="center">或</el-divider>
       <div class="m-auto mb-5">
         <img class="w-9 m-auto p-1 rounded-full border-blue-300 border-2 cursor-pointer" :src="qiyeweixin" alt="">
       </div>
-      <div class="flex justify-between">
+      <div class="flex justify-between pb-5">
         <div class="cursor-pointer text-blue-400 hover:text-blue-300">联系客服</div>
         <div class="flex justify-around">
           <div class="mr-4 cursor-pointer text-blue-400 hover:text-blue-300">使用说明</div>
@@ -32,12 +34,16 @@ import loginLogo from "@/assets/login/login_logo.png";
 import qiyeweixin from "@/assets/login/qiyeweixin.png";
 import { UserFilled, Lock } from '@element-plus/icons-vue'
 import { ref } from "vue";
-const username = ref("");
-const password = ref("");
+const ruleFormRef=ref(null);
+const ruleForm = ref({
+  username: "",
+  password: "",
+});
+
 const loginLoading = ref(false);
 const login = () => {
   loginLoading.value = true;
-  console.log(username.value, password.value);
+  console.log(ruleForm.value);
   setTimeout(() => {
     loginLoading.value = false;
   }, 1000);