|
|
@@ -0,0 +1,301 @@
|
|
|
+<template>
|
|
|
+ <div class="login-container">
|
|
|
+ <!-- Header -->
|
|
|
+ <header class="header">
|
|
|
+ <div class="logo">
|
|
|
+ <h1>XXX</h1>
|
|
|
+ <span>Logo</span>
|
|
|
+ </div>
|
|
|
+ <div class="language-selector">
|
|
|
+ <Globe class="globe-icon" size="16" />
|
|
|
+ <span>中文</span>
|
|
|
+ <ChevronDown class="chevron-icon" size="14" />
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="main-content">
|
|
|
+ <div class="login-card">
|
|
|
+ <h2 class="greeting">Hello, 欢迎回来</h2>
|
|
|
+ <p class="subtitle">请登录外包管理系统</p>
|
|
|
+
|
|
|
+ <form @submit.prevent="handleLogin">
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="username">用户名</label>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ id="username"
|
|
|
+ v-model="username"
|
|
|
+ placeholder="请输入"
|
|
|
+ class="form-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="password">密码</label>
|
|
|
+ <input
|
|
|
+ type="password"
|
|
|
+ id="password"
|
|
|
+ v-model="password"
|
|
|
+ placeholder="请输入"
|
|
|
+ class="form-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-options">
|
|
|
+ <div class="remember-me">
|
|
|
+ <input type="checkbox" id="remember" v-model="rememberMe" />
|
|
|
+ <label for="remember">记住我</label>
|
|
|
+ </div>
|
|
|
+ <a href="#/forget-password" class="forgot-password">忘记密码?</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button type="submit" class="login-button">登录</button>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <div class="alternative-login">
|
|
|
+ <p>其他登录方式</p>
|
|
|
+ <a href="#/sms-login" class="sms-login">使用短信验证码登录</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <!-- Footer - hidden on mobile -->
|
|
|
+ <footer class="footer">
|
|
|
+ <p>© 2023 上海外服 All Rights Reserved.</p>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { Globe, ChevronDown } from 'lucide-vue-next';
|
|
|
+
|
|
|
+// Form data
|
|
|
+const username = ref('');
|
|
|
+const password = ref('');
|
|
|
+const rememberMe = ref(false);
|
|
|
+
|
|
|
+// Router instance
|
|
|
+const router = useRouter();
|
|
|
+
|
|
|
+// Login handler
|
|
|
+const handleLogin = () => {
|
|
|
+ // Dummy login logic
|
|
|
+ if (username.value === 'admin' && password.value === 'admin') {
|
|
|
+ router.push('/');
|
|
|
+ username.value = '';
|
|
|
+ password.value = '';
|
|
|
+ rememberMe.value = false;
|
|
|
+ } else {
|
|
|
+ alert('用户名或密码错误');
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Base styles */
|
|
|
+* {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+.login-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: linear-gradient(135deg, #e6f0ff 0%, #f0f8ff 100%);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+/* Header styles */
|
|
|
+.header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px 40px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.logo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ color: #4a90e2;
|
|
|
+}
|
|
|
+
|
|
|
+.logo h1 {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.logo span {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.language-selector {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #4a90e2;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.globe-icon, .chevron-icon {
|
|
|
+ color: #4a90e2;
|
|
|
+}
|
|
|
+
|
|
|
+/* Main content styles */
|
|
|
+.main-content {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.login-card {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
+ padding: 40px;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 420px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.greeting {
|
|
|
+ color: #2c3e50;
|
|
|
+ font-size: 24px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.subtitle {
|
|
|
+ color: #7f8c8d;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-group {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-group label {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2c3e50;
|
|
|
+}
|
|
|
+
|
|
|
+.form-input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ transition: border-color 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.form-input:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #4a90e2;
|
|
|
+}
|
|
|
+
|
|
|
+.form-options {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.remember-me {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.forgot-password {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #4a90e2;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.login-button {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px;
|
|
|
+ background-color: #4a90e2;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.login-button:hover {
|
|
|
+ background-color: #3a86ff;
|
|
|
+}
|
|
|
+
|
|
|
+.alternative-login {
|
|
|
+ margin-top: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.alternative-login p {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #909399;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.sms-login {
|
|
|
+ color: #4a90e2;
|
|
|
+ text-decoration: none;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+/* Footer styles */
|
|
|
+.footer {
|
|
|
+ padding: 15px;
|
|
|
+ text-align: center;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+/* Responsive styles */
|
|
|
+@media (max-width: 475px) {
|
|
|
+ .header {
|
|
|
+ padding: 15px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-card {
|
|
|
+ padding: 25px;
|
|
|
+ box-shadow: none;
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .greeting {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .subtitle {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Hide footer on mobile as requested */
|
|
|
+ .footer {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
genlitex