From 80c568bc03e03e75bab6baecaa1c10473a9c32f8 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期三, 20 五月 2026 10:12:24 +0800
Subject: [PATCH] feat(login): 重构登录页面提升用户体验
---
src/views/login.vue | 1027 +++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 754 insertions(+), 273 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index 872537b..30761e4 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,96 +1,178 @@
<template>
<div class="login-page">
- <div class="login-shell">
- <section class="login-brand">
- <div class="brand-badge">PRODUCT INVENTORY</div>
- <img :src="brandLogo" alt="brand logo" class="brand-logo" />
- <h1 class="brand-title">{{ title }}</h1>
- <p class="brand-copy">
- 缁熶竴绠＄悊搴撳瓨銆佹祦绋嬩笌涓氬姟鏁版嵁锛岃绯荤粺鍏ュ彛鍜屽悗鍙颁富鐣岄潰淇濇寔鍚屼竴濂楃畝绾﹁瑙夎瑷�銆�
- </p>
- <div class="brand-points">
- <div class="brand-point">
- <span class="point-dot"></span>
- <span>娓呮櫚鐨勬暟鎹叆鍙�</span>
+ <main class="page">
+ <section class="factory">
+ <div class="brand">
+ <div class="logo">
+ <img :src="brandLogoUrl" :alt="`${companyName} logo`" class="logo-image" @error="handleLogoError" />
</div>
- <div class="brand-point">
- <span class="point-dot"></span>
- <span>鏇磋交鐨勭晫闈㈠眰娆�</span>
+ <div class="brand-copy">
+ <div class="brand-title">{{ companyName }}</div>
+ <small>{{ companySubtitle }}</small>
</div>
- <div class="brand-point">
- <span class="point-dot"></span>
- <span>绋冲畾鐨勪笟鍔″崗鍚屼綋楠�</span>
- </div>
+ </div>
+
+ <div class="hero">
+ <div class="chip">鏁板瓧宸ュ巶 路 鏅鸿兘鎺掍骇 路 璁惧浜掕仈 路 璐ㄩ噺杩芥函</div>
+ <h1>鏁板瓧宸ュ巶<br />MOM 鏅洪�犲钩鍙�</h1>
+ <p>
+ 浠ュ疄鏃舵暟鎹┍鍔ㄧ敓浜х幇鍦猴紝鎶婂伐鍗曘�佽澶囥�佺墿鏂欍�佽川閲忋�佽兘鑰椾笌浠撳偍杩炴帴鎴愪竴寮犻�忔槑鐨勫埗閫犺繍钀ョ綉缁溿��
+ </p>
+ </div>
+
+ <div class="scene" aria-hidden="true">
+ <div class="floor"></div>
+ <svg class="factory-svg" viewBox="0 0 920 360" preserveAspectRatio="xMidYMid meet">
+ <defs>
+ <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
+ <stop offset="0" stop-color="#40e4ff" stop-opacity=".9" />
+ <stop offset="1" stop-color="#1f78ff" stop-opacity=".68" />
+ </linearGradient>
+ <linearGradient id="g2" x1="0" y1="0" x2="1" y2="1">
+ <stop offset="0" stop-color="#ffffff" stop-opacity=".28" />
+ <stop offset="1" stop-color="#ffffff" stop-opacity=".06" />
+ </linearGradient>
+ </defs>
+
+ <path d="M45 255H830" stroke="url(#g1)" stroke-width="16" stroke-linecap="round" opacity=".55" />
+ <path class="belt" d="M45 255H830" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity=".75" />
+
+ <g class="box">
+ <rect x="60" y="212" width="54" height="42" rx="8" fill="#ffb15f" />
+ <path d="M60 225h54" stroke="#fff" opacity=".45" />
+ </g>
+ <g class="box two">
+ <rect x="60" y="212" width="54" height="42" rx="8" fill="#28d9cd" />
+ <path d="M60 225h54" stroke="#fff" opacity=".45" />
+ </g>
+ <g class="box three">
+ <rect x="60" y="212" width="54" height="42" rx="8" fill="#8b5cf6" />
+ <path d="M60 225h54" stroke="#fff" opacity=".45" />
+ </g>
+
+ <g>
+ <rect x="120" y="112" width="138" height="128" rx="18" fill="url(#g2)" stroke="rgba(255,255,255,.42)" />
+ <path d="M145 185h88M145 210h58" stroke="#40e4ff" stroke-width="6" stroke-linecap="round" />
+ <path d="M145 140h88" stroke="#fff" stroke-opacity=".5" stroke-width="4" stroke-linecap="round" />
+ </g>
+
+ <g>
+ <rect x="315" y="76" width="190" height="164" rx="22" fill="url(#g2)" stroke="rgba(255,255,255,.42)" />
+ <path d="M350 126h120M350 158h90M350 190h112" stroke="#fff" stroke-opacity=".5" stroke-width="6" stroke-linecap="round" />
+ <circle class="signal" cx="472" cy="104" r="10" fill="#20e0d2" />
+ <circle class="signal two" cx="448" cy="104" r="10" fill="#1f78ff" />
+ <circle class="signal three" cx="424" cy="104" r="10" fill="#ff8a3d" />
+ </g>
+
+ <g class="arm">
+ <path d="M612 124h92" stroke="#40e4ff" stroke-width="14" stroke-linecap="round" />
+ <path d="M704 124l42 56" stroke="#40e4ff" stroke-width="14" stroke-linecap="round" />
+ <circle cx="612" cy="124" r="25" fill="#1f78ff" stroke="#fff" stroke-opacity=".45" />
+ <circle cx="704" cy="124" r="18" fill="#20e0d2" />
+ <path d="M744 180v34M727 214h34" stroke="#fff" stroke-width="7" stroke-linecap="round" />
+ </g>
+
+ <g>
+ <rect x="690" y="82" width="148" height="158" rx="20" fill="url(#g2)" stroke="rgba(255,255,255,.42)" />
+ <path d="M724 206V134M764 206V112M804 206V154" stroke="#20e0d2" stroke-width="12" stroke-linecap="round" />
+ <path d="M720 206h92" stroke="#fff" stroke-opacity=".44" stroke-width="5" stroke-linecap="round" />
+ </g>
+
+ <path
+ d="M190 112C265 42 348 48 410 76C502 118 568 76 612 124C654 170 700 74 764 82"
+ fill="none"
+ stroke="#20e0d2"
+ stroke-width="2"
+ stroke-dasharray="8 10"
+ opacity=".58"
+ >
+ <animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite" />
+ </path>
+ </svg>
</div>
</section>
- <section class="login-panel">
- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
- <div class="panel-head">
- <p class="panel-kicker">WELCOME BACK</p>
- <h2 class="panel-title">鐧诲綍绯荤粺</h2>
- <p class="panel-subtitle">杈撳叆璐﹀彿鍜屽瘑鐮佽繘鍏ュ伐浣滃彴銆�</p>
+ <section class="login-wrap">
+ <div class="time">
+ <span>{{ todayLabel }}</span>
+ {{ clockLabel }}
+ </div>
+
+ <form class="login-card" @submit.prevent="handleLogin">
+ <div class="brand card-brand">
+ <div class="logo">
+ <img :src="brandLogoUrl" :alt="`${companyName} logo`" class="logo-image" @error="handleLogoError" />
+ </div>
+ <div class="brand-copy card-brand-copy">
+ <div class="brand-title">{{ companyName }}</div>
+ <small>鏁板瓧宸ュ巶缁熶竴鍏ュ彛</small>
+ </div>
</div>
- <el-form-item prop="username">
- <el-input
- v-model="loginForm.username"
- type="text"
- size="large"
- auto-complete="off"
- placeholder="璐﹀彿"
- >
- <template #prefix><el-icon><User /></el-icon></template>
- </el-input>
- </el-form-item>
+ <h2>娆㈣繋鐧诲綍</h2>
+ <p class="sub">杩涘叆 MOM 鏁板瓧宸ュ巶杩愯惀椹鹃┒鑸�</p>
- <el-form-item prop="password">
- <el-input
- v-model="loginForm.password"
- type="password"
- size="large"
- auto-complete="off"
- placeholder="瀵嗙爜"
- show-password
- @keyup.enter="handleLogin"
- >
- <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
-
- <div class="login-options">
- <el-checkbox v-model="loginForm.rememberMe">璁颁綇瀵嗙爜</el-checkbox>
- <router-link v-if="register" class="register-link" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link>
+ <div class="form-row">
+ <label>璐﹀彿</label>
+ <div class="input">
+ <svg viewBox="0 0 24 24" fill="none">
+ <path d="M20 21a8 8 0 0 0-16 0" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+ <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" stroke="currentColor" stroke-width="1.8" />
+ </svg>
+ <input v-model.trim="loginForm.username" type="text" placeholder="璇疯緭鍏ョ鐞嗗憳璐﹀彿" />
+ </div>
</div>
- <el-button
- :loading="loading"
- size="large"
- type="primary"
- class="login-submit"
- @click.prevent="handleLogin"
- >
- <span v-if="!loading">鐧诲綍</span>
- <span v-else>鐧诲綍涓�...</span>
- </el-button>
- </el-form>
+ <div class="form-row">
+ <label>瀵嗙爜</label>
+ <div class="input">
+ <svg viewBox="0 0 24 24" fill="none">
+ <path d="M7 10V8a5 5 0 0 1 10 0v2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+ <path d="M6.8 10h10.4A1.8 1.8 0 0 1 19 11.8v6.4A1.8 1.8 0 0 1 17.2 20H6.8A1.8 1.8 0 0 1 5 18.2v-6.4A1.8 1.8 0 0 1 6.8 10Z" stroke="currentColor" stroke-width="1.8" />
+ </svg>
+ <input
+ v-model="loginForm.password"
+ type="password"
+ placeholder="璇疯緭鍏ョ櫥褰曞瘑鐮�"
+ autocomplete="current-password"
+ @keyup.enter="handleLogin"
+ />
+ </div>
+ </div>
+
+ <div class="options">
+ <label class="check"><input v-model="loginForm.rememberMe" type="checkbox" />璁颁綇璐﹀彿</label>
+ </div>
+
+ <button class="login-btn" type="submit" :disabled="loading">
+ {{ loading ? "鐧诲綍涓�..." : "鐧诲綍鏁板瓧宸ュ巶" }}
+ </button>
+ </form>
</section>
- </div>
+ </main>
</div>
</template>
<script setup>
-import { getCodeImg } from "@/api/login"
+import { ElMessage } from "element-plus"
import Cookies from "js-cookie"
import { encrypt, decrypt } from "@/utils/jsencrypt"
import useUserStore from "@/store/modules/user"
-import brandLogo from "@/assets/logo/logo.png"
+import defaultBrandLogo from "@/assets/logo/logo.png"
-const title = import.meta.env.VITE_APP_TITLE
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
-const { proxy } = getCurrentInstance()
+
+const appTitle = String(import.meta.env.VITE_APP_TITLE || "鏁板瓧宸ュ巶 MOM 绯荤粺").trim()
+const companySubtitle = String(import.meta.env.VITE_LOGIN_SUBTITLE || "Digital Factory Operation Center").trim()
+const configuredLogo = String(import.meta.env.VITE_APP_LOGO || "").trim()
+const logoModules = import.meta.glob("/src/assets/logo/*.png", { eager: true })
+
+const redirect = ref("")
+const loading = ref(false)
+const now = ref(new Date())
+const brandLogoUrl = ref(defaultBrandLogo)
const loginForm = ref({
username: "",
@@ -98,304 +180,703 @@
rememberMe: false,
})
-const loginRules = {
- username: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勮处鍙�" }],
- password: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�" }],
-}
+const companyName = computed(() => {
+ const currentFactoryName = String(userStore.currentFactoryName || "").trim()
+ return currentFactoryName || appTitle
+})
-const codeUrl = ref("")
-const loading = ref(false)
-const captchaEnabled = ref(true)
-const register = ref(false)
-const redirect = ref(undefined)
+const todayLabel = computed(() => {
+ const date = now.value
+ return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+})
+
+const clockLabel = computed(() => {
+ const date = now.value
+ return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+})
watch(
route,
(newRoute) => {
- redirect.value = newRoute.query && newRoute.query.redirect
+ redirect.value = String(newRoute.query?.redirect || "")
},
{ immediate: true }
)
-function handleLogin() {
- proxy.$refs.loginRef.validate((valid) => {
- if (valid) {
- loading.value = true
- Cookies.set("username", loginForm.value.username, { expires: 30 })
- Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 })
- Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 })
- userStore
- .loginCheckFactory(loginForm.value)
- .then(() => {
- const query = route.query
- const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
- if (cur !== "redirect") {
- acc[cur] = query[cur]
- }
- return acc
- }, {})
- router.push({ path: redirect.value || "/", query: otherQueryParams })
- })
- .catch(() => {
- loading.value = false
- if (captchaEnabled.value) {
- getCode()
- }
- })
- }
- })
+watch(
+ () => userStore.currentFactoryName,
+ () => updateBrandLogo(),
+ { immediate: true }
+)
+
+let timer = 0
+onMounted(() => {
+ timer = window.setInterval(() => {
+ now.value = new Date()
+ }, 1000)
+})
+
+onBeforeUnmount(() => {
+ if (timer) {
+ window.clearInterval(timer)
+ timer = 0
+ }
+})
+
+function pad(value) {
+ return String(value).padStart(2, "0")
}
-function getCode() {
- getCodeImg().then((res) => {
- captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
- if (captchaEnabled.value) {
- codeUrl.value = "data:image/gif;base64," + res.img
- loginForm.value.uuid = res.uuid
- }
- })
+function resolveConfiguredLogo() {
+ if (!configuredLogo) {
+ return ""
+ }
+
+ if (/^(https?:)?\/\//.test(configuredLogo) || configuredLogo.startsWith("data:")) {
+ return configuredLogo
+ }
+
+ const cleanPath = configuredLogo.replace(/^\/+/, "")
+ const fullPath = cleanPath.startsWith("src/") ? `/${cleanPath}` : `/src/${cleanPath}`
+ const localLogo = logoModules[fullPath]
+
+ if (localLogo && localLogo.default) {
+ return localLogo.default
+ }
+
+ if (configuredLogo.startsWith("/")) {
+ return configuredLogo
+ }
+
+ return `${import.meta.env.BASE_URL}${cleanPath}`
+}
+
+function updateBrandLogo() {
+ const logoFromConfig = resolveConfiguredLogo()
+ if (logoFromConfig) {
+ brandLogoUrl.value = logoFromConfig
+ return
+ }
+
+ const currentFactoryName = String(userStore.currentFactoryName || "").trim()
+ if (!currentFactoryName) {
+ brandLogoUrl.value = defaultBrandLogo
+ return
+ }
+
+ const factoryLogoPath = `/src/assets/logo/${currentFactoryName}.png`
+ const matched = logoModules[factoryLogoPath]
+ brandLogoUrl.value = matched && matched.default ? matched.default : defaultBrandLogo
+}
+
+function handleLogoError() {
+ brandLogoUrl.value = defaultBrandLogo
+}
+
+function handleRememberCookie() {
+ if (!loginForm.value.rememberMe) {
+ Cookies.remove("username")
+ Cookies.remove("password")
+ Cookies.remove("rememberMe")
+ return
+ }
+
+ Cookies.set("username", loginForm.value.username, { expires: 30 })
+ Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 })
+ Cookies.set("rememberMe", "true", { expires: 30 })
}
function getCookie() {
const username = Cookies.get("username")
const password = Cookies.get("password")
const rememberMe = Cookies.get("rememberMe")
- loginForm.value = {
- username: username === undefined ? loginForm.value.username : username,
- password: password === undefined ? loginForm.value.password : decrypt(password),
- rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
- }
+
+ loginForm.value.username = username || ""
+ loginForm.value.password = password ? decrypt(password) : ""
+ loginForm.value.rememberMe = rememberMe === "true"
}
-getCode()
+function handleLogin() {
+ if (!loginForm.value.username) {
+ ElMessage.error("璇疯緭鍏ヨ处鍙�")
+ return
+ }
+ if (!loginForm.value.password) {
+ ElMessage.error("璇疯緭鍏ュ瘑鐮�")
+ return
+ }
+
+ loading.value = true
+ handleRememberCookie()
+ userStore
+ .loginCheckFactory(loginForm.value)
+ .then(() => {
+ const query = route.query
+ const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
+ if (cur !== "redirect") {
+ acc[cur] = query[cur]
+ }
+ return acc
+ }, {})
+ router.push({ path: redirect.value || "/", query: otherQueryParams })
+ })
+ .catch(() => {})
+ .finally(() => {
+ loading.value = false
+ })
+}
+
getCookie()
</script>
-<style lang="scss" scoped>
+<style scoped lang="scss">
+* {
+ box-sizing: border-box;
+}
+
.login-page {
+ --blue: #1f78ff;
+ --cyan: #20e0d2;
+ --violet: #8b5cf6;
+ --orange: #ff8a3d;
+ --text: #09203f;
+ --muted: #7a8da8;
+ --line: rgba(113, 154, 214, 0.24);
+ --shadow: 0 28px 80px rgba(14, 57, 120, 0.18);
min-height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 32px;
- background:
- radial-gradient(circle at top left, rgba(207, 223, 214, 0.95), transparent 30%),
- radial-gradient(circle at bottom right, rgba(222, 232, 227, 0.9), transparent 28%),
- linear-gradient(180deg, #f7faf8 0%, #eef2ee 100%);
-}
-
-.login-shell {
- width: min(1120px, 100%);
- min-height: 680px;
- display: grid;
- grid-template-columns: 1.1fr 0.9fr;
- border: 1px solid rgba(216, 225, 219, 0.9);
- border-radius: 32px;
overflow: hidden;
- background: rgba(255, 255, 255, 0.76);
- box-shadow: 0 26px 80px rgba(31, 49, 38, 0.12);
- backdrop-filter: blur(24px);
-}
-
-.login-brand {
- position: relative;
- display: flex;
- flex-direction: column;
- justify-content: center;
- padding: 56px 64px;
background:
- linear-gradient(180deg, rgba(244, 248, 245, 0.9), rgba(233, 240, 236, 0.9)),
- linear-gradient(135deg, rgba(31, 122, 114, 0.05), rgba(255, 255, 255, 0));
-
- &::after {
- content: "";
- position: absolute;
- inset: 28px;
- border: 1px solid rgba(31, 122, 114, 0.08);
- border-radius: 28px;
- pointer-events: none;
- }
+ radial-gradient(circle at 12% 16%, rgba(31, 120, 255, 0.22), transparent 32%),
+ radial-gradient(circle at 84% 14%, rgba(32, 224, 210, 0.24), transparent 28%),
+ radial-gradient(circle at 80% 84%, rgba(139, 92, 246, 0.14), transparent 28%),
+ linear-gradient(135deg, #eef6ff 0%, #f7fbff 52%, #edf8ff 100%);
}
-.brand-badge {
- width: fit-content;
- padding: 8px 14px;
- border-radius: 999px;
- background: rgba(31, 122, 114, 0.1);
- color: #1f7a72;
- font-size: 12px;
- font-weight: 700;
- letter-spacing: 0.14em;
+.login-page::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ background-image:
+ linear-gradient(rgba(22, 78, 160, 0.055) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(22, 78, 160, 0.055) 1px, transparent 1px);
+ background-size: 36px 36px;
+ mask-image: radial-gradient(circle at center, #000 0%, transparent 78%);
+ pointer-events: none;
}
-.brand-logo {
- width: 160px;
- height: auto;
- margin: 30px 0 24px;
- object-fit: contain;
+.page {
+ position: relative;
+ display: grid;
+ grid-template-columns: 1.15fr 0.85fr;
+ gap: 28px;
+ min-height: 100vh;
+ padding: 36px;
}
-.brand-title {
- margin: 0;
- font-size: 42px;
- line-height: 1.12;
- color: #21313f;
- letter-spacing: -0.03em;
+.factory {
+ position: relative;
+ overflow: hidden;
+ min-height: calc(100vh - 72px);
+ border-radius: 30px;
+ padding: 32px;
+ color: #fff;
+ background:
+ linear-gradient(135deg, rgba(5, 27, 67, 0.98), rgba(9, 71, 143, 0.92)),
+ radial-gradient(circle at 76% 18%, rgba(32, 224, 210, 0.38), transparent 30%);
+ box-shadow: var(--shadow);
+ border: 1px solid rgba(255, 255, 255, 0.16);
+ animation: enter 0.8s ease both;
}
-.brand-copy {
- max-width: 460px;
- margin: 18px 0 0;
- font-size: 16px;
- line-height: 1.75;
- color: #5f6d7e;
+.factory::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.11) 46%, transparent 72%),
+ linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
+ background-size: 100% 100%, 44px 44px, 44px 44px;
+ opacity: 0.86;
}
-.brand-points {
- margin-top: 34px;
- display: flex;
- flex-direction: column;
- gap: 14px;
-}
-
-.brand-point {
+.brand {
+ position: relative;
+ z-index: 2;
display: flex;
align-items: center;
gap: 12px;
- color: #3d4b59;
- font-size: 15px;
+ font-weight: 900;
+ letter-spacing: 0.4px;
+}
+
+.logo {
+ width: 48px;
+ height: 48px;
+ border-radius: 14px;
+ display: grid;
+ place-items: center;
+ background: linear-gradient(135deg, var(--blue), var(--cyan));
+ box-shadow: 0 16px 40px rgba(32, 224, 210, 0.26);
+ overflow: hidden;
+ position: relative;
+}
+
+.logo-image {
+ width: 70%;
+ height: 70%;
+ object-fit: contain;
+}
+
+.brand-copy {
+ min-width: 0;
+}
+
+.brand-title {
+ font-size: 16px;
+ font-weight: inherit;
+ line-height: 1.2;
+ word-break: break-word;
+}
+
+.brand-copy small {
+ display: block;
+ margin-top: 3px;
+ font-size: 12px;
font-weight: 500;
+ color: rgba(255, 255, 255, 0.64);
+ word-break: break-word;
}
-.point-dot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
- background: linear-gradient(135deg, #1f7a72, #5ca39c);
- box-shadow: 0 0 0 6px rgba(31, 122, 114, 0.08);
+.hero {
+ position: relative;
+ z-index: 2;
+ margin-top: 64px;
+ max-width: 680px;
}
-.login-panel {
+.chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 14px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ background: rgba(255, 255, 255, 0.1);
+ color: rgba(255, 255, 255, 0.78);
+ font-size: 13px;
+ animation: enter 0.75s ease 0.15s both;
+}
+
+.hero h1 {
+ margin: 24px 0 14px;
+ font-size: clamp(42px, 5.6vw, 78px);
+ line-height: 1.02;
+ font-weight: 900;
+ letter-spacing: 0;
+ animation: enter 0.8s ease 0.25s both;
+}
+
+.hero p {
+ margin: 0;
+ max-width: 630px;
+ font-size: 17px;
+ line-height: 1.8;
+ color: rgba(255, 255, 255, 0.72);
+ animation: enter 0.8s ease 0.35s both;
+}
+
+.scene {
+ position: absolute;
+ left: 42px;
+ right: 42px;
+ bottom: 24px;
+ height: 44%;
+ z-index: 1;
+}
+
+.floor {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 48%;
+ border-radius: 28px;
+ background:
+ linear-gradient(90deg, rgba(32, 224, 210, 0), rgba(32, 224, 210, 0.22), rgba(31, 120, 255, 0)),
+ repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 64px),
+ repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 34px);
+ transform: perspective(620px) rotateX(58deg);
+ transform-origin: bottom;
+ opacity: 0.82;
+}
+
+.factory-svg {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 18%;
+ width: 100%;
+ height: 78%;
+ filter: drop-shadow(0 28px 30px rgba(0, 0, 0, 0.18));
+}
+
+.belt {
+ stroke-dasharray: 10 12;
+ animation: flow 1.2s linear infinite;
+}
+
+.arm {
+ transform-origin: 612px 124px;
+ animation: armMove 3.6s ease-in-out infinite;
+}
+
+.box {
+ animation: boxMove 5.4s linear infinite;
+}
+
+.box.two {
+ animation-delay: -1.8s;
+}
+
+.box.three {
+ animation-delay: -3.6s;
+}
+
+.signal {
+ opacity: 0.8;
+ animation: pulse 2.2s ease-in-out infinite;
+}
+
+.signal.two {
+ animation-delay: -0.7s;
+}
+
+.signal.three {
+ animation-delay: -1.4s;
+}
+
+.login-wrap {
+ position: relative;
+ z-index: 2;
display: flex;
align-items: center;
justify-content: center;
- padding: 40px;
- background: rgba(255, 255, 255, 0.7);
+ min-height: calc(100vh - 72px);
+ border-radius: 30px;
+ border: 1px solid rgba(255, 255, 255, 0.8);
+ background: rgba(255, 255, 255, 0.62);
+ backdrop-filter: blur(20px);
+ box-shadow: var(--shadow);
+ animation: enter 0.8s ease 0.12s both;
}
-.login-form {
- width: min(420px, 100%);
- padding: 38px 34px 34px;
- border: 1px solid rgba(216, 225, 219, 0.92);
+.time {
+ position: absolute;
+ top: 26px;
+ right: 28px;
+ display: flex;
+ gap: 9px;
+ align-items: center;
+ font-weight: 900;
+ color: #12325e;
+}
+
+.time span {
+ padding: 8px 12px;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.66);
+ border: 1px solid var(--line);
+ color: var(--muted);
+ font-size: 13px;
+ font-weight: 700;
+}
+
+.login-card {
+ width: min(440px, 100%);
+ padding: 34px;
border-radius: 28px;
+ border: 1px solid rgba(255, 255, 255, 0.95);
background: rgba(255, 255, 255, 0.88);
- box-shadow: 0 18px 52px rgba(31, 49, 38, 0.1);
+ box-shadow: 0 22px 60px rgba(21, 73, 143, 0.15);
+ position: relative;
+ overflow: hidden;
}
-.panel-head {
- margin-bottom: 28px;
+.login-card::before {
+ content: "";
+ position: absolute;
+ right: -92px;
+ top: -92px;
+ width: 190px;
+ height: 190px;
+ border-radius: 999px;
+ background: conic-gradient(from 0deg, rgba(31, 120, 255, 0.2), rgba(32, 224, 210, 0.32), rgba(139, 92, 246, 0.18), rgba(31, 120, 255, 0.2));
+ animation: rotate 9s linear infinite;
}
-.panel-kicker {
- margin: 0 0 10px;
- color: #8a98a8;
- font-size: 12px;
- font-weight: 700;
- letter-spacing: 0.16em;
+.login-card > * {
+ position: relative;
+ z-index: 1;
}
-.panel-title {
- margin: 0;
- color: #21313f;
- font-size: 30px;
- font-weight: 700;
+.card-brand {
+ margin-bottom: 18px;
}
-.panel-subtitle {
- margin: 10px 0 0;
- color: #6b7888;
+.card-brand-copy .brand-title {
+ color: #0d2c5e;
+ font-size: 16px;
+}
+
+.card-brand-copy small {
+ color: #7a8da8;
+}
+
+.login-card h2 {
+ margin: 8px 0;
+ font-size: 31px;
+ line-height: 1.15;
+ color: #0d2c5e;
+ font-weight: 900;
+ letter-spacing: 0;
+}
+
+.sub {
+ margin: 0 0 24px;
+ color: var(--muted);
font-size: 14px;
}
-.login-options {
- margin: -4px 0 22px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- color: #5f6d7e;
+.form-row {
+ margin-bottom: 14px;
+ animation: enter 0.6s ease both;
}
-.register-link {
- color: var(--el-color-primary);
- font-weight: 600;
+.form-row:nth-of-type(1) {
+ animation-delay: 0.32s;
}
-.login-submit {
+.form-row:nth-of-type(2) {
+ animation-delay: 0.4s;
+}
+
+.form-row:nth-of-type(3) {
+ animation-delay: 0.48s;
+}
+
+label {
+ display: block;
+ margin-bottom: 8px;
+ color: #24436b;
+ font-size: 13px;
+ font-weight: 800;
+}
+
+.input {
+ position: relative;
+}
+
+.input svg {
+ position: absolute;
+ left: 15px;
+ top: 50%;
+ width: 19px;
+ height: 19px;
+ transform: translateY(-50%);
+ color: #8197b6;
+ pointer-events: none;
+}
+
+input[type="text"],
+input[type="password"] {
width: 100%;
- height: 48px;
+ height: 52px;
+ padding: 0 15px 0 46px;
+ border: 1px solid rgba(108, 143, 190, 0.34);
+ border-radius: 16px;
+ outline: none;
+ background: linear-gradient(180deg, #fff, #f8fbff);
+ color: var(--text);
+ font-size: 15px;
+ transition: 0.2s ease;
}
-.input-icon {
- width: 14px;
+input[type="text"]:hover,
+input[type="password"]:hover {
+ border-color: rgba(31, 120, 255, 0.48);
+ box-shadow: 0 10px 24px rgba(31, 120, 255, 0.08);
}
-:deep(.el-form-item) {
- margin-bottom: 22px;
+input[type="text"]:focus,
+input[type="password"]:focus {
+ border-color: rgba(31, 120, 255, 0.72);
+ box-shadow: 0 0 0 4px rgba(31, 120, 255, 0.1);
}
-:deep(.el-input__wrapper) {
- min-height: 42px;
- height: 42px;
- padding-top: 0;
- padding-bottom: 0;
+.options {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ margin: 12px 0 22px;
+ font-size: 13px;
+ color: var(--muted);
}
-:deep(.el-input__inner) {
- height: 42px;
- line-height: 42px;
+.check {
+ display: inline-flex;
+ gap: 8px;
+ align-items: center;
+ cursor: pointer;
}
-:deep(.el-checkbox) {
- color: #5f6d7e;
+.check input {
+ width: 16px;
+ height: 16px;
+ padding: 0;
+ accent-color: var(--blue);
}
-@media (max-width: 960px) {
+.login-btn {
+ width: 100%;
+ height: 54px;
+ border: none;
+ border-radius: 17px;
+ cursor: pointer;
+ color: #fff;
+ font-size: 16px;
+ font-weight: 900;
+ background: linear-gradient(135deg, var(--blue), var(--cyan));
+ box-shadow: 0 18px 38px rgba(31, 120, 255, 0.25);
+ position: relative;
+ overflow: hidden;
+ transition: 0.18s ease;
+}
+
+.login-btn:hover:not(:disabled) {
+ transform: translateY(-2px);
+ box-shadow: 0 22px 48px rgba(31, 120, 255, 0.32);
+}
+
+.login-btn:disabled {
+ opacity: 0.8;
+ cursor: not-allowed;
+}
+
+@keyframes enter {
+ from {
+ opacity: 0;
+ transform: translateY(26px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes rotate {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes flow {
+ to {
+ stroke-dashoffset: -44;
+ }
+}
+
+@keyframes boxMove {
+ 0% {
+ transform: translateX(-150px);
+ opacity: 0;
+ }
+ 12% {
+ opacity: 1;
+ }
+ 78% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateX(650px);
+ opacity: 0;
+ }
+}
+
+@keyframes armMove {
+ 0%,
+ 100% {
+ transform: rotate(-4deg);
+ }
+ 50% {
+ transform: rotate(9deg);
+ }
+}
+
+@keyframes pulse {
+ 0%,
+ 100% {
+ opacity: 0.45;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 1;
+ transform: scale(1.18);
+ }
+}
+
+@keyframes glow {
+ 0%,
+ 100% {
+ box-shadow: 0 0 18px rgba(32, 224, 210, 0.3);
+ }
+ 50% {
+ box-shadow: 0 0 34px rgba(32, 224, 210, 0.68);
+ }
+}
+
+@media (max-width: 1320px) {
+ .hero h1 {
+ font-size: clamp(52px, 5.2vw, 78px);
+ }
+}
+
+@media (max-width: 980px) {
.login-page {
- padding: 18px;
+ overflow: auto;
}
- .login-shell {
- min-height: auto;
+ .page {
grid-template-columns: 1fr;
+ padding: 18px;
+ min-height: auto;
}
- .login-brand {
- padding: 40px 28px 22px;
+ .factory,
+ .login-wrap {
+ min-height: auto;
}
- .login-brand::after {
- inset: 16px;
+ .factory {
+ min-height: 760px;
}
- .brand-title {
- font-size: 32px;
+ .time {
+ display: none;
}
- .brand-copy {
- font-size: 14px;
+ .login-wrap {
+ padding: 22px;
}
- .brand-points {
- margin-top: 24px;
- }
-
- .login-panel {
- padding: 12px 18px 24px;
- }
-
- .login-form {
+ .login-card {
width: 100%;
- padding: 28px 22px 24px;
+ padding: 26px;
}
+
+ .login-btn {
+ font-size: 16px;
+ }
+
}
</style>
--
Gitblit v1.9.3