登录页面init

frontend/src/views/Login.vue

@@ -1,26 +1,119 @@
 <template>
-  <div ref="loginContent" class="text-xl text-red-600">
-    <h1 ref="loginTitle">123</h1>
-    <svg-icon name="wind" color="#fff" size="100" spin > </svg-icon>
+  <div ref="loginContent" class="login">
+    <div class="login_form">
+      <div class="login_form_title">自动检测平台</div>
+      <el-form :model="LoginForm" :rules="rules" ref="formRef">
+        <el-form-item label="" prop="loginUserName">
+          <el-input
+            v-model="LoginForm.loginUserName"
+            :prefix-icon="Avatar"
+            placeholder="请输入账户"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="" prop="loginUserPassword">
+          <el-input
+            v-model="LoginForm.loginUserPassword"
+            :prefix-icon="Lock"
+            type="password"
+            placeholder="请输入密码"
+            show-password
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <el-button
+        type="primary"
+        @click="handleLogin"
+        style="width: 100%"
+        :loading="loginLoading"
+      >登 录</el-button
+      >
+    </div>
   </div>
 </template>
-
-<script setup lang='ts'>
-defineOptions(
-    {
-      name: "CustomLogin"
-    }
-)
-import {ref, onMounted} from 'vue'
-let loginContent = ref()
-let loginTitle = ref()
-
-onMounted(() => {
-  console.log(loginTitle.value);
+<script setup lang="ts">
+defineOptions({
+  name: "CustomLogin",
 });
+import { ref, onMounted } from "vue";
+const router = useRouter();
+import { useRouter } from "vue-router";
+import { Avatar, Lock } from "@element-plus/icons-vue";
+import { useUserInfoStore } from "@/stores/user";
+const userInfoStore = useUserInfoStore();
 
 
+const rules = {
+  loginUserName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  loginUserPassword: [
+    { required: true, message: "请输入密码", trigger: "blur" },
+  ],
+};
+const loginLoading = ref(false);
+const LoginForm = ref({
+  loginUserName: "",
+  loginUserPassword: "",
+});
+let loginContent = ref();
+const formRef = ref();
+const handleLogin = () => {
+  formRef.value.validate((validate: any) => {
+    if (validate) {
+      loginLoading.value = true;
+      if (LoginForm.value.loginUserName && LoginForm.value.loginUserPassword) {
+        setTimeout(() => {
+          // router.push({
+          //   path: "/admin",
+          //   query: {
+          //     name: LoginForm.value.loginUserName,
+          //   },
+          // });
+          userInfoStore.dataFill({ loginName: LoginForm.value.loginUserName });
+          console.log(userInfoStore.loginName)
+        }, 1500);
+      }
+    }
+  });
+};
 </script>
-<style scoped>
+<style scoped lang="scss">
 
+.login {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 10%;
+  background: #0b47a1 url("../assets/images/login/background.png") no-repeat left center;
+  background-size: auto;
+  .login_form {
+    width: 30rem;
+    height: 27rem;
+    cursor: pointer;
+    border-radius: 12px;
+    box-shadow: 6px 6px 10px #000;
+    background-color: #fff;
+    border: 1px solid #eee;
+    padding: 10px 20px 10px;
+    .login_form_title {
+      width: 100%;
+      height: 4rem;
+      font-size: 32px;
+      text-align: center;
+      padding: 5px 0;
+      font-family: "DongFangDaKai";
+      letter-spacing: 4px;
+      margin-bottom: 40px;
+    }
+    .el-button {
+      margin-top: 10px;
+    }
+  }
+}
+
+
+:deep(.el-input){
+  outline: none !important;
+  border: 0 !important;
+}
 </style>