登录页

src/router/index.ts

@@ -1,4 +1,8 @@
-import { createMemoryHistory, createRouter } from "vue-router";
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from "vue-router";
 import Layout from "@/Layout/index.vue";
 import Login from "@/views/login/index.vue";
 
@@ -38,7 +42,7 @@ const routes = [
 ];
 
 const router = createRouter({
-  history: createMemoryHistory(),
+  history: createWebHashHistory(),
   routes,
 });
 

src/views/login/index.vue

@@ -1,5 +1,83 @@
-<script setup lang='ts'></script>
+<script setup lang='ts'>
+import { ref } from 'vue';
+import { User, Lock } from '@element-plus/icons-vue'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+interface RuleForm {
+    username: string
+    password: string
+}
+const ruleFormRef = ref<FormInstance>()
+const form = ref<RuleForm>({
+    username: "",
+    password: ""
+})
+const rules = ref<FormRules<RuleForm>>({
+    username: [{
+        required: true,
+        message: '请输入账号',
+        trigger: 'blur'
+    }],
+    password: [{
+        required: true,
+        message: '请输入密码',
+        trigger: 'blur'
+    }]
+})
+const loginBtn = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate((valid) => {
+        if (valid) {
+            ElMessage({
+                message: '登录成功',
+                type: 'success',
+            })
+        } else {
+            ElMessage({
+                message: '请输入账号密码',
+                type: 'warning',
+            })
+        }
+    })
+}
+</script>
 <template>
-    <h1>登录页</h1>
+    <div class="login">
+        <div class="form">
+            <el-card>
+                <h2>调压通后台管理系统</h2>
+                <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="auto" size="large">
+                    <el-form-item prop="username">
+                        <el-input v-model="form.username" :prefix-icon="User" placeholder="用户名" />
+                    </el-form-item>
+                    <el-form-item prop="password">
+                        <el-input v-model="form.password" type="password" :prefix-icon="Lock" placeholder="密码" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button style="width: 100%;" type="primary" @click="loginBtn(ruleFormRef)">登录</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-card>
+        </div>
+    </div>
 </template>
-<style lang='scss' scoped></style>
+<style scoped>
+.login {
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+
+    .form {
+        text-align: center;
+        width: 380px;
+        margin: calc(25% - 150px) auto;
+
+        h2 {
+            font-size: 24px;
+            font-weight: 400;
+            margin: 20px 0;
+        }
+    }
+
+
+}
+</style>