登录界面

src/main.js

@@ -4,6 +4,8 @@ import App from "./App.vue"
 import ElementPlus from "element-plus"
 import "./assets/style/reset.css"
 import "element-plus/dist/index.css" // 导入所有样式
+import zhCn from "element-plus/dist/locale/zh-cn.mjs" // 中文语言包
+import "element-plus/dist/index.css"
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate"
 import router from "./router"
 const app = createApp(App)
@@ -12,4 +14,7 @@ pinia.use(piniaPluginPersistedstate)
 app.use(pinia)
 app.use(ElementPlus)
 app.use(router)
+app.use(ElementPlus, {
+  locale: zhCn // 设置为中文
+})
 app.mount("#app")

src/router/index.js

@@ -1,7 +1,8 @@
 import { createRouter, createWebHistory } from "vue-router"
 
 const routes = [
-  { path: "/", redirect: "/home" },
+  { path: "/", redirect: "/login" },
+  { path: "/login", component: () => import("@/views/login/index.vue") },
   {
     path: "/home",
     component: () => import("@/layout/index.vue"),

src/service/api/authentication.js

@@ -0,0 +1 @@
+import http from "@/utils/http"

src/store/authentication/index.js

@@ -0,0 +1,7 @@
+import { defineStore } from "pinia"
+export const useLoginStore = defineStore("loginStore", {
+  state: () => ({
+    token: ""
+  }),
+  actions: {}
+})

src/views/login/components/loginPanel.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="loginPanel-component">
+    <el-form
+      ref="ruleFormRef"
+      :model="ruleForm"
+      status-icon
+      :rules="rules"
+      label-width="auto"
+      class="demo-ruleForm"
+    >
+      <el-form-item prop="username">
+        <el-input
+          v-model="ruleForm.username"
+          type="username"
+          size="large"
+          autocomplete="off"
+          placeholder="账号"
+        />
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="ruleForm.password"
+          type="password"
+          size="large"
+          autocomplete="off"
+          placeholder="密码"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm(ruleFormRef)" class="submit">登录</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRaw } from "vue"
+import { useLoginStore } from "@/store/authentication/index"
+const ruleFormRef = ref(null)
+const loginStore = useLoginStore()
+
+const validateUsername = (rule, value, callback) => {
+  if (value === "") {
+    callback(new Error("账号不得为空！"))
+  } else {
+    callback()
+  }
+}
+const validatePassword = (rule, value, callback) => {
+  if (value === "") {
+    callback(new Error("密码不得为空！"))
+  } else {
+    callback()
+  }
+}
+
+const ruleForm = reactive({
+  username: "",
+  password: ""
+})
+
+const rules = reactive({
+  username: [{ validator: validateUsername, trigger: "blur" }],
+  password: [{ validator: validatePassword, trigger: "blur" }]
+})
+
+const submitForm = (formEl) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      const userInfo = toRaw(ruleForm)
+    } else {
+    }
+  })
+}
+</script>
+
+<style scoped lang="less">
+.loginPanel-component {
+  width: 35%;
+  height: 40%;
+  border-radius: 7px;
+  background-color: #fff;
+  padding: 0 45px;
+  .demo-ruleForm {
+    margin-top: 100px;
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .submit {
+      margin: 0 auto;
+      margin-top: 20px;
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/login/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="login-container">
+    <img class="header" src="@/assets/images/login/header.png" />
+    <div class="body">
+      <div class="login-panel">
+        <LoginPanel></LoginPanel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import LoginPanel from "./components/loginPanel.vue"
+</script>
+
+<style scoped lang="less">
+.login-container {
+  max-width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  .header {
+    flex: 0 1 100px; // 可扩展、可收缩，初始100px
+    position: absolute;
+  }
+  .body {
+    flex: 1;
+    background-image: url("@/assets/images/login/backimg.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    justify-content: flex-end;
+    .login-panel {
+      width: 50%;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // 当视口 ≤ 1350px 时，固定宽度但高度自适应
+      @media (max-width: 1350px) {
+        width: 650px; // 固定宽度
+      }
+
+      // 当视口高度 ≤ 750px 时，固定高度并允许滚动
+      @media (max-height: 750px) {
+        height: 750px; // 固定高度（根据需求调整）
+        min-height: auto; // 覆盖默认的 min-height: 100vh
+      }
+    }
+  }
+}
+</style>