From b1a0d701cf898c8b7812e66a808a1c91f2bae6cc Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 17 三月 2026 16:44:11 +0800
Subject: [PATCH] 2026.3.17
---
src/views/LoginPage.vue | 160 +++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 154 insertions(+), 6 deletions(-)
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index a38b322..c370e12 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -1,14 +1,162 @@
<template>
- LoginPage
-
- <el-button type="primary" class="login-btn" @click="login">鐧诲綍</el-button>
+ <div class="login-container">
+ <div class="login-wrapper">
+ <div class="login-header">
+ <h1 class="login-title">椁愰ギ娌圭儫鏅鸿兘鐩戞祴涓庣洃绠′竴浣撳寲骞冲彴</h1>
+ <p class="login-subtitle">娆㈣繋鐧诲綍</p>
+ </div>
+ <div class="login-form">
+ <el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-position="top">
+ <el-form-item label="璐﹀彿" prop="username">
+ <el-input
+ v-model="loginForm.username"
+ placeholder="璇疯緭鍏ヨ处鍙�"
+ prefix-icon="User"
+ size="large"
+ />
+ </el-form-item>
+ <el-form-item label="瀵嗙爜" prop="password">
+ <el-input
+ v-model="loginForm.password"
+ type="password"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ prefix-icon="Lock"
+ size="large"
+ show-password
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="primary"
+ class="login-btn"
+ :loading="loading"
+ @click="login"
+ size="large"
+ style="width: 100%"
+ >
+ 鐧诲綍
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ </div>
+ </div>
</template>
+
<script setup lang="ts">
+import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
const router = useRouter()
-function login() {
- router.push('/index/monitor/data-dashboard')
- // router.push('/index')
+const loginFormRef = ref<FormInstance>()
+const loading = ref(false)
+
+const loginForm = reactive({
+ username: 'admin',
+ password: '123456',
+})
+
+const rules = reactive<FormRules>({
+ username: [{ required: true, message: '璇疯緭鍏ヨ处鍙�', trigger: 'blur' }],
+ password: [{ required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }],
+})
+
+async function login() {
+ if (!loginFormRef.value) return
+
+ try {
+ await loginFormRef.value.validate()
+ loading.value = true
+
+ // 妯℃嫙鐧诲綍楠岃瘉
+ setTimeout(() => {
+ if (loginForm.username === 'admin' && loginForm.password === '123456') {
+ router.push('/index/monitor/data-dashboard')
+ } else {
+ ElMessage.error('璐﹀彿鎴栧瘑鐮侀敊璇�')
+ }
+ loading.value = false
+ }, 500)
+ } catch (error) {
+ console.log('楠岃瘉澶辫触:', error)
+ }
}
</script>
+
+<style>
+/* 鍏ㄥ眬鏍峰紡閲嶇疆 */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html,
+body {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+</style>
+
+<style scoped>
+.login-container {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ background-image: url('@/assets/loginPageBg.png');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ padding-right: 10%;
+}
+
+.login-wrapper {
+ width: 400px;
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ padding: 32px;
+ animation: fadeIn 0.5s ease-in-out;
+}
+
+.login-header {
+ text-align: center;
+ margin-bottom: 32px;
+}
+
+.login-title {
+ font-size: 20px;
+ font-weight: 600;
+ color: #1a1a1a;
+ margin-bottom: 8px;
+}
+
+.login-subtitle {
+ font-size: 14px;
+ color: #666;
+}
+
+.login-form {
+ width: 100%;
+}
+
+.login-btn {
+ margin-top: 16px;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+</style>
--
Gitblit v1.9.3