大屏项目初始化

screen-vue/src/views/Login.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="login-container">
+    <div class="full-bg"></div>
+    <div class="login-left">
+      <div class="left-bg-img"></div>
+    </div>
+    <div class="login-right">
+      <div class="login-form">
+        <h2 class="login-title">大屏报表系统登录</h2>
+        <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" label-width="80px">
+          <el-form-item label="账号" prop="username">
+            <el-input 
+              v-model="loginForm.username" 
+              placeholder="请输入账号"
+              size="large"
+              prefix-icon="User"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input 
+              v-model="loginForm.password" 
+              type="password" 
+              placeholder="请输入密码"
+              size="large"
+			  show-password
+              prefix-icon="Lock"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button 
+              type="primary" 
+              @click="handleLogin" 
+              class="login-btn"
+              size="small"
+              :loading="isLoading"
+            >
+              登录
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+import { login } from '@/api/user'
+
+const router = useRouter()
+const loginFormRef = ref(null)
+const loginForm = ref({
+  username: '',
+  password: ''
+})
+const loginRules = ref({
+  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+})
+const isLoading = ref(false)
+
+const handleLogin = async () => {
+  try {
+    await loginFormRef.value.validate()
+    isLoading.value = true
+    const res = await login(loginForm.value)
+    localStorage.setItem('token', res.token)
+    localStorage.setItem('username', res.username)
+    ElMessage.success('登录成功！')
+    setTimeout(() => {
+      router.push('/dashboard')
+    }, 3000)
+  } catch (error) {
+    if (error.msg) {
+      ElMessage.error(error.msg)
+    } else {
+      ElMessage.error('登录失败，请检查账号密码！')
+    }
+    console.error('登录出错：', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  position: relative;
+}
+
+.full-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #e8f4f8 0%, #f0f8fb 100%);
+  z-index: 0;
+}
+
+.login-left {
+  width: 65%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+.left-bg-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('@/assets/login-bg.png') no-repeat center center;
+  background-size: cover;
+  opacity: 0.95;
+}
+
+.login-right {
+  width: 35%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 1;
+}
+
+.login-form {
+  width: 420px;
+  padding: 40px 30px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(149, 157, 165, 0.15);
+  border: 1px solid #e6f7ff;
+  margin: 0;
+}
+
+.login-title {
+  text-align: center;
+  color: #1890ff;
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 30px;
+  letter-spacing: 1px;
+  margin-top: 0;
+}
+
+.login-btn {
+  width: 100%;
+  background: #1890ff;
+  border-color: #1890ff;
+  height: 32px;
+  font-size: 14px;
+}
+
+.login-btn:hover {
+  background: #40a9ff;
+  border-color: #40a9ff;
+}
+
+@media (max-width: 1200px) {
+  .login-form {
+    width: 380px;
+  }
+}
+
+@media (max-width: 768px) {
+  .login-left {
+    display: none;
+  }
+  .login-right {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.9);
+  }
+  .login-form {
+    width: 350px;
+  }
+}
+
+:global(body) {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+</style>