From acd6bbae394c997523b5051d019e584db1845c4c Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 17 六月 2026 14:29:04 +0800
Subject: [PATCH] 样式修改
---
src/views/login.vue | 1796 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 1,037 insertions(+), 759 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index c7db15a..6bdabe5 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -4,15 +4,12 @@
<section class="factory">
<div class="brand hero-brand">
<div class="logo hero-logo">
- <img
- :src="brandLogoUrl"
- :alt="`${companyName} logo`"
- class="logo-image hero-logo-image"
- @error="handleLogoError"
- />
+ <img :src="brandLogoUrl"
+ :alt="`${companyName} logo`"
+ class="logo-image hero-logo-image"
+ @error="handleLogoError" />
</div>
</div>
-
<div class="hero">
<div class="chip">鏁板瓧宸ュ巶 路 鏅鸿兘鎺掍骇 路 璁惧浜掕仈 路 璐ㄩ噺杩芥函</div>
<h1>鏁板瓧宸ュ巶<br />MOM 鏅洪�犲钩鍙�</h1>
@@ -20,132 +17,251 @@
浠ュ疄鏃舵暟鎹┍鍔ㄧ敓浜х幇鍦猴紝鎶婂伐鍗曘�佽澶囥�佺墿鏂欍�佽川閲忋�佽兘鑰椾笌浠撳偍杩炴帴鎴愪竴寮犻�忔槑鐨勫埗閫犺繍钀ョ綉缁溿��
</p>
</div>
-
- <div class="scene" aria-hidden="true">
+ <div class="scene"
+ aria-hidden="true">
<div class="floor"></div>
- <svg class="factory-svg" viewBox="0 0 920 360" preserveAspectRatio="xMidYMid meet">
+ <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 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 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" />
-
+ <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" />
+ <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" />
+ <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" />
+ <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" />
+ <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" />
+ <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" />
+ <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" />
+ <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 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-wrap">
<div class="time">
<span>{{ todayLabel }}</span>
{{ clockLabel }}
</div>
-
- <form class="login-card" @submit.prevent="handleLogin">
+ <form class="login-card"
+ @submit.prevent="handleLogin">
<div class="brand card-brand">
<div class="logo">
- <img :src="brandIconUrl" :alt="`${companyName} icon`" class="logo-image card-logo-image" />
+ <img :src="brandIconUrl"
+ :alt="`${companyName} icon`"
+ class="logo-image card-logo-image" />
</div>
- <div class="brand-copy card-brand-copy">
- <div class="brand-title">{{ companyName }}</div>
- <small>鏁板瓧宸ュ巶缁熶竴鍏ュ彛</small>
- </div>
+ <div class="brand-copy card-brand-copy">
+ <div class="brand-title">{{ companyName }}</div>
+ <small>鏁板瓧宸ュ巶缁熶竴鍏ュ彛</small>
+ </div>
</div>
-
<h2>娆㈣繋鐧诲綍</h2>
<p class="sub">杩涘叆 MOM 鏁板瓧宸ュ巶杩愯惀椹鹃┒鑸�</p>
-
<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 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="璇疯緭鍏ョ鐞嗗憳璐﹀彿" />
+ <input v-model.trim="loginForm.username"
+ type="text"
+ placeholder="璇疯緭鍏ョ鐞嗗憳璐﹀彿" />
</div>
</div>
-
<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 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"
- />
+ <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>
+ <label class="check"><input v-model="loginForm.rememberMe"
+ type="checkbox" />璁颁綇璐﹀彿</label>
</div>
-
- <button class="login-btn" type="submit" :disabled="loading">
+ <button class="login-btn"
+ type="submit"
+ :disabled="loading">
{{ loading ? "鐧诲綍涓�..." : "鐧诲綍鏁板瓧宸ュ巶" }}
</button>
</form>
@@ -155,739 +271,901 @@
</template>
<script setup>
-import { ElMessage } from "element-plus"
-import Cookies from "js-cookie"
-import { encrypt, decrypt } from "@/utils/jsencrypt"
-import useUserStore from "@/store/modules/user"
-import defaultBrandLogo from "@/assets/logo/logo.png"
+ import { ElMessage } from "element-plus";
+ import Cookies from "js-cookie";
+ import { encrypt, decrypt } from "@/utils/jsencrypt";
+ import useUserStore from "@/store/modules/user";
+ import defaultBrandLogo from "@/assets/logo/logo.png";
-const userStore = useUserStore()
-const route = useRoute()
-const router = useRouter()
+ const userStore = useUserStore();
+ const route = useRoute();
+ const router = useRouter();
-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 brandIconUrl = `${import.meta.env.BASE_URL}favicon.ico`
+ 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 brandIconUrl = `${import.meta.env.BASE_URL}favicon.ico`;
-const redirect = ref("")
-const loading = ref(false)
-const now = ref(new Date())
-const brandLogoUrl = ref(defaultBrandLogo)
+ const redirect = ref("");
+ const loading = ref(false);
+ const now = ref(new Date());
+ const brandLogoUrl = ref(defaultBrandLogo);
-const loginForm = ref({
- username: "",
- password: "",
- rememberMe: false,
-})
+ const loginForm = ref({
+ username: "",
+ password: "",
+ rememberMe: false,
+ });
-const companyName = computed(() => {
- const currentFactoryName = String(userStore.currentFactoryName || "").trim()
- return currentFactoryName || appTitle
-})
+ const companyName = computed(() => {
+ const currentFactoryName = String(userStore.currentFactoryName || "").trim();
+ return currentFactoryName || appTitle;
+ });
-const todayLabel = computed(() => {
- const date = now.value
- return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
-})
+ 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())}`
-})
+ const clockLabel = computed(() => {
+ const date = now.value;
+ return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
+ date.getSeconds()
+ )}`;
+ });
-watch(
- route,
- (newRoute) => {
- redirect.value = String(newRoute.query?.redirect || "")
- },
- { immediate: true }
-)
+ watch(
+ route,
+ newRoute => {
+ redirect.value = String(newRoute.query?.redirect || "");
+ },
+ { immediate: true }
+ );
-watch(
- () => userStore.currentFactoryName,
- () => updateBrandLogo(),
- { immediate: true }
-)
+ watch(
+ () => userStore.currentFactoryName,
+ () => updateBrandLogo(),
+ { immediate: true }
+ );
-let timer = 0
-onMounted(() => {
- timer = window.setInterval(() => {
- now.value = new Date()
- }, 1000)
-})
+ let timer = 0;
+ onMounted(() => {
+ timer = window.setInterval(() => {
+ now.value = new Date();
+ }, 1000);
+ });
-onBeforeUnmount(() => {
- if (timer) {
- window.clearInterval(timer)
- timer = 0
- }
-})
+ onBeforeUnmount(() => {
+ if (timer) {
+ window.clearInterval(timer);
+ timer = 0;
+ }
+ });
-function pad(value) {
- return String(value).padStart(2, "0")
-}
-
-function resolveConfiguredLogo() {
- if (!configuredLogo) {
- return ""
+ function pad(value) {
+ return String(value).padStart(2, "0");
}
- if (/^(https?:)?\/\//.test(configuredLogo) || configuredLogo.startsWith("data:")) {
- return configuredLogo
+ 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}`;
}
- const cleanPath = configuredLogo.replace(/^\/+/, "")
- const fullPath = cleanPath.startsWith("src/") ? `/${cleanPath}` : `/src/${cleanPath}`
- const localLogo = logoModules[fullPath]
+ function updateBrandLogo() {
+ const logoFromConfig = resolveConfiguredLogo();
+ if (logoFromConfig) {
+ brandLogoUrl.value = logoFromConfig;
+ return;
+ }
- if (localLogo && localLogo.default) {
- return localLogo.default
+ 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;
}
- if (configuredLogo.startsWith("/")) {
- return configuredLogo
+ function handleLogoError() {
+ brandLogoUrl.value = defaultBrandLogo;
}
- return `${import.meta.env.BASE_URL}${cleanPath}`
-}
+ function handleRememberCookie() {
+ if (!loginForm.value.rememberMe) {
+ Cookies.remove("username");
+ Cookies.remove("password");
+ Cookies.remove("rememberMe");
+ return;
+ }
-function updateBrandLogo() {
- const logoFromConfig = resolveConfiguredLogo()
- if (logoFromConfig) {
- brandLogoUrl.value = logoFromConfig
- return
+ Cookies.set("username", loginForm.value.username, { expires: 30 });
+ Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
+ Cookies.set("rememberMe", "true", { expires: 30 });
}
- const currentFactoryName = String(userStore.currentFactoryName || "").trim()
- if (!currentFactoryName) {
- brandLogoUrl.value = defaultBrandLogo
- return
+ function getCookie() {
+ const username = Cookies.get("username");
+ const password = Cookies.get("password");
+ const rememberMe = Cookies.get("rememberMe");
+
+ loginForm.value.username = username || "";
+ loginForm.value.password = password ? decrypt(password) : "";
+ loginForm.value.rememberMe = rememberMe === "true";
}
- const factoryLogoPath = `/src/assets/logo/${currentFactoryName}.png`
- const matched = logoModules[factoryLogoPath]
- brandLogoUrl.value = matched && matched.default ? matched.default : defaultBrandLogo
-}
+ function handleLogin() {
+ if (!loginForm.value.username) {
+ ElMessage.error("璇疯緭鍏ヨ处鍙�");
+ return;
+ }
+ if (!loginForm.value.password) {
+ ElMessage.error("璇疯緭鍏ュ瘑鐮�");
+ return;
+ }
-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 || ""
- loginForm.value.password = password ? decrypt(password) : ""
- loginForm.value.rememberMe = rememberMe === "true"
-}
-
-function handleLogin() {
- if (!loginForm.value.username) {
- ElMessage.error("璇疯緭鍏ヨ处鍙�")
- return
- }
- if (!loginForm.value.password) {
- ElMessage.error("璇疯緭鍏ュ瘑鐮�")
- return
- }
-
- loading.value = true
- handleRememberCookie()
+ 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 })
+ 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
- })
-}
+ loading.value = false;
+ });
+ }
-getCookie()
+ getCookie();
</script>
<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;
- overflow: hidden;
- background:
- 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%);
-}
-
-.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;
-}
-
-.page {
- position: relative;
- display: grid;
- grid-template-columns: 1.15fr 0.85fr;
- gap: 28px;
- min-height: 100vh;
- padding: 36px;
-}
-
-.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;
-}
-
-.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 {
- position: relative;
- z-index: 2;
- display: inline-flex;
- align-items: center;
-}
-
-.logo {
- width: 76px;
- height: 76px;
- 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: 82%;
- height: 82%;
- object-fit: contain;
-}
-
-.hero-brand {
- display: block;
-}
-
-.hero-logo {
- width: 240px;
- height: 84px;
- border-radius: 0;
- background: transparent;
- box-shadow: none;
- overflow: visible;
- place-items: center start;
-}
-
-.hero-logo-image {
- width: 100%;
- height: auto;
- max-height: 100%;
- object-fit: contain;
-}
-
-.hero {
- position: relative;
- z-index: 2;
- margin-top: 64px;
- max-width: 680px;
-}
-
-.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;
- 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;
-}
-
-.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 22px 60px rgba(21, 73, 143, 0.15);
- position: relative;
- overflow: hidden;
-}
-
-.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;
-}
-
-.login-card > * {
- position: relative;
- z-index: 1;
-}
-
-.card-brand {
- margin-bottom: 18px;
-}
-
-.card-brand .logo {
- width: 52px;
- height: 52px;
-}
-
-.card-brand-copy {
- margin-left: 12px;
-}
-
-.card-logo-image {
- width: 100%;
- height: 100%;
- object-fit: contain;
-}
-
-.card-brand .logo {
- width: 68px;
- height: 68px;
-}
-
-.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;
-}
-
-.form-row {
- margin-bottom: 14px;
- animation: enter 0.6s ease both;
-}
-
-.form-row:nth-of-type(1) {
- animation-delay: 0.32s;
-}
-
-.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: 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[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);
-}
-
-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);
-}
-
-.options {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- margin: 12px 0 22px;
- font-size: 13px;
- color: var(--muted);
-}
-
-.check {
- display: inline-flex;
- gap: 8px;
- align-items: center;
- cursor: pointer;
-}
-
-.check input {
- width: 16px;
- height: 16px;
- padding: 0;
- accent-color: var(--blue);
-}
-
-.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 {
- overflow: auto;
+ --accent: var(--accent-primary, var(--el-color-primary, #374d77));
+ --accent-rgb: var(--el-color-primary-rgb, 22, 116, 88);
+ --text: #0f172a;
+ --muted: #64748b;
+ --border: rgba(15, 23, 42, 0.1);
+ --shadow: 0 24px 70px rgba(2, 6, 23, 0.12);
+ position: relative;
+ min-height: 100vh;
+ overflow: hidden;
+ background: radial-gradient(
+ circle at 12% 14%,
+ rgba(var(--accent-rgb), 0.14),
+ transparent 38%
+ ),
+ radial-gradient(circle at 92% 8%, rgba(2, 132, 199, 0.12), transparent 36%),
+ conic-gradient(
+ from 220deg at 24% 18%,
+ rgba(var(--accent-rgb), 0.1),
+ rgba(56, 189, 248, 0.08),
+ rgba(99, 102, 241, 0.08),
+ rgba(var(--accent-rgb), 0.1)
+ ),
+ linear-gradient(180deg, #f7f8fb 0%, #f3f5fa 100%);
+ }
+
+ .login-page * {
+ box-sizing: border-box;
+ }
+
+ .login-page::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
+ linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px),
+ repeating-linear-gradient(
+ 118deg,
+ transparent 0 84px,
+ rgba(var(--accent-rgb), 0.26) 84px 86px,
+ transparent 86px 168px
+ ),
+ repeating-linear-gradient(
+ 208deg,
+ transparent 0 132px,
+ rgba(2, 132, 199, 0.22) 132px 134px,
+ transparent 134px 264px
+ ),
+ repeating-linear-gradient(
+ 156deg,
+ transparent 0 112px,
+ rgba(99, 102, 241, 0.2) 112px 114px,
+ transparent 114px 224px
+ ),
+ repeating-linear-gradient(
+ 118deg,
+ transparent 0 84px,
+ rgba(var(--accent-rgb), 0.12) 83px 89px,
+ transparent 89px 168px
+ );
+ background-size: 22px 22px, 52px 52px, 52px 52px, auto, auto, auto, auto;
+ background-position: 0 0, 0 0, 0 0, 0 0, -120px 140px, 120px 0;
+ mask-image: radial-gradient(circle at 42% 42%, #000 0%, transparent 80%);
+ opacity: 1;
+ mix-blend-mode: normal;
+ filter: saturate(1.08);
+ animation: lineDrift 12s linear infinite;
+ pointer-events: none;
+ z-index: 0;
+ }
+
+ .login-page::after {
+ content: "";
+ position: fixed;
+ inset: -28vmax;
+ background: radial-gradient(
+ circle at 18% 28%,
+ rgba(var(--accent-rgb), 0.22),
+ transparent 54%
+ ),
+ radial-gradient(
+ circle at 82% 22%,
+ rgba(56, 189, 248, 0.16),
+ transparent 50%
+ ),
+ radial-gradient(
+ circle at 72% 82%,
+ rgba(99, 102, 241, 0.12),
+ transparent 52%
+ ),
+ radial-gradient(circle at 26% 78%, rgba(244, 63, 94, 0.06), transparent 56%);
+ filter: blur(42px) saturate(1.05);
+ opacity: 0.9;
+ transform: translate3d(0, 0, 0);
+ animation: bgFloat 18s ease-in-out infinite;
+ pointer-events: none;
+ z-index: 0;
}
.page {
- grid-template-columns: 1fr;
- padding: 18px;
- min-height: auto;
+ position: relative;
+ z-index: 1;
+ max-width: 1200px;
+ margin: 48px auto;
+ width: calc(100% - 48px);
+ min-height: calc(100vh - 96px);
+ display: grid;
+ grid-template-columns: 3fr 2fr;
+ gap: 0;
+ align-items: stretch;
+ border-radius: 34px;
+ background: rgba(255, 255, 255, 0.72);
+ border: 1px solid rgba(255, 255, 255, 0.72);
+ box-shadow: var(--shadow);
+ backdrop-filter: blur(18px);
+ overflow: hidden;
}
- .factory,
- .login-wrap {
- min-height: auto;
+ .page::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ background: radial-gradient(
+ circle at 22% 22%,
+ rgba(var(--accent-rgb), 0.34),
+ transparent 58%
+ )
+ left center / 60% 100% no-repeat,
+ radial-gradient(
+ circle at 76% 12%,
+ rgba(56, 189, 248, 0.22),
+ transparent 50%
+ )
+ left center / 60% 100% no-repeat,
+ linear-gradient(
+ 135deg,
+ rgba(2, 6, 23, 0.96) 0%,
+ rgba(15, 35, 57, 0.94) 52%,
+ rgba(15, 35, 57, 0.88) 100%
+ )
+ left center / 60% 100% no-repeat;
+ pointer-events: none;
+ z-index: 0;
+ }
+
+ .page::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 60%;
+ width: 1px;
+ background: linear-gradient(
+ 180deg,
+ transparent,
+ rgba(15, 23, 42, 0.16),
+ transparent
+ );
+ pointer-events: none;
+ z-index: 0;
}
.factory {
- min-height: 760px;
+ position: relative;
+ z-index: 1;
+ padding: 44px 48px 40px;
+ color: rgba(255, 255, 255, 0.92);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
}
- .time {
+ .brand {
+ position: relative;
+ z-index: 1;
+ display: inline-flex;
+ align-items: center;
+ }
+
+ .logo {
+ width: 52px;
+ height: 52px;
+ border-radius: 14px;
+ display: grid;
+ place-items: center;
+ background: rgba(var(--accent-rgb), 0.12);
+ border: 1px solid rgba(var(--accent-rgb), 0.22);
+ overflow: hidden;
+ }
+
+ .logo-image {
+ width: 80%;
+ height: 80%;
+ object-fit: contain;
+ }
+
+ .hero-brand {
+ display: block;
+ }
+
+ .hero-logo {
+ width: 260px;
+ height: 72px;
+ border-radius: 0;
+ background: transparent;
+ border: none;
+ place-items: center start;
+ }
+
+ .hero-logo-image {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.22));
+ }
+
+ .hero {
+ position: relative;
+ z-index: 1;
+ margin: 46px 0 0;
+ max-width: 640px;
+ }
+
+ .chip {
+ display: inline-flex;
+ align-items: center;
+ padding: 7px 12px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.16);
+ background: rgba(255, 255, 255, 0.08);
+ color: rgba(255, 255, 255, 0.78);
+ font-size: 13px;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ }
+
+ .hero h1 {
+ margin: 22px 0 14px;
+ font-size: clamp(44px, 5vw, 66px);
+ line-height: 1.06;
+ font-weight: 860;
+ letter-spacing: -0.02em;
+ color: #ffffff;
+ }
+
+ .hero p {
+ margin: 0;
+ max-width: 600px;
+ font-size: 16px;
+ line-height: 1.9;
+ color: rgba(255, 255, 255, 0.72);
+ }
+
+ .scene {
display: none;
}
.login-wrap {
- padding: 22px;
+ position: relative;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 36px 44px;
+ }
+
+ .time {
+ position: absolute;
+ top: 18px;
+ right: 18px;
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ color: rgba(15, 23, 42, 0.72);
+ font-size: 13px;
+ font-weight: 700;
+ }
+
+ .time span {
+ padding: 6px 10px;
+ border-radius: 999px;
+ border: 1px solid rgba(15, 23, 42, 0.12);
+ background: rgba(255, 255, 255, 0.7);
+ color: rgba(15, 23, 42, 0.6);
+ font-weight: 800;
}
.login-card {
+ width: min(420px, 100%);
+ padding: 38px 34px 34px;
+ border-radius: 22px;
+ border: 1px solid rgba(15, 23, 42, 0.12);
+ background: rgba(255, 255, 255, 0.86);
+ backdrop-filter: blur(14px);
+ box-shadow: var(--shadow);
+ position: relative;
+ overflow: hidden;
+ }
+
+ .login-card::before {
+ content: "";
+ position: absolute;
+ left: -120px;
+ top: -120px;
+ width: 240px;
+ height: 240px;
+ border-radius: 999px;
+ background: radial-gradient(
+ circle at 30% 30%,
+ rgba(var(--accent-rgb), 0.36),
+ transparent 60%
+ );
+ filter: blur(1px);
+ }
+
+ .login-card > * {
+ position: relative;
+ z-index: 1;
+ }
+
+ .card-brand {
+ margin-bottom: 18px;
+ gap: 12px;
+ }
+
+ .card-brand .logo {
+ width: 46px;
+ height: 46px;
+ border-radius: 14px;
+ background: rgba(var(--accent-rgb), 0.12);
+ border: 1px solid rgba(var(--accent-rgb), 0.22);
+ }
+
+ .card-brand-copy {
+ margin-left: 0;
+ }
+
+ .brand-title {
+ font-size: 15px;
+ font-weight: 900;
+ color: rgba(15, 23, 42, 0.92);
+ letter-spacing: 0.02em;
+ }
+
+ .card-brand-copy small {
+ display: block;
+ margin-top: 4px;
+ font-size: 12px;
+ color: rgba(15, 23, 42, 0.55);
+ font-weight: 700;
+ }
+
+ .login-card h2 {
+ margin: 10px 0 8px;
+ font-size: 28px;
+ line-height: 1.2;
+ color: rgba(15, 23, 42, 0.92);
+ font-weight: 900;
+ letter-spacing: -0.02em;
+ }
+
+ .sub {
+ margin: 0 0 22px;
+ color: var(--muted);
+ font-size: 13px;
+ font-weight: 700;
+ }
+
+ .form-row {
+ margin-bottom: 14px;
+ }
+
+ label {
+ display: block;
+ margin-bottom: 8px;
+ color: rgba(15, 23, 42, 0.72);
+ font-size: 12px;
+ font-weight: 800;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ }
+
+ .input {
+ position: relative;
+ }
+
+ .input svg {
+ position: absolute;
+ left: 14px;
+ top: 50%;
+ width: 18px;
+ height: 18px;
+ transform: translateY(-50%);
+ color: rgba(15, 23, 42, 0.45);
+ pointer-events: none;
+ }
+
+ input[type="text"],
+ input[type="password"] {
width: 100%;
- padding: 26px;
+ height: 50px;
+ padding: 0 14px 0 44px;
+ border: 1px solid var(--border);
+ border-radius: 14px;
+ outline: none;
+ background: rgba(255, 255, 255, 0.92);
+ color: var(--text);
+ font-size: 15px;
+ transition: box-shadow 0.16s ease, border-color 0.16s ease,
+ transform 0.16s ease;
+ }
+
+ input[type="text"]::placeholder,
+ input[type="password"]::placeholder {
+ color: rgba(100, 116, 139, 0.88);
+ }
+
+ input[type="text"]:hover,
+ input[type="password"]:hover {
+ border-color: rgba(var(--accent-rgb), 0.28);
+ }
+
+ input[type="text"]:focus,
+ input[type="password"]:focus {
+ border-color: rgba(var(--accent-rgb), 0.6);
+ box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14);
+ }
+
+ .options {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ margin: 14px 0 22px;
+ font-size: 13px;
+ color: rgba(15, 23, 42, 0.62);
+ font-weight: 700;
+ }
+
+ .check {
+ display: inline-flex;
+ gap: 10px;
+ align-items: center;
+ cursor: pointer;
+ user-select: none;
+ }
+
+ .check input {
+ width: 16px;
+ height: 16px;
+ padding: 0;
+ accent-color: var(--accent);
}
.login-btn {
- font-size: 16px;
+ width: 100%;
+ height: 52px;
+ border: none;
+ border-radius: 14px;
+ cursor: pointer;
+ color: #ffffff;
+ font-size: 15px;
+ font-weight: 900;
+ letter-spacing: 0.02em;
+ background: var(--accent);
+ box-shadow: 0 18px 44px rgba(var(--accent-rgb), 0.22);
+ transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
-}
+ .login-btn:hover:not(:disabled) {
+ transform: translateY(-1px);
+ box-shadow: 0 20px 52px rgba(var(--accent-rgb), 0.28);
+ filter: saturate(1.02);
+ }
+
+ .login-btn:active:not(:disabled) {
+ transform: translateY(0);
+ }
+
+ .login-btn:disabled {
+ opacity: 0.72;
+ cursor: not-allowed;
+ }
+
+ .login-btn:focus-visible {
+ outline: none;
+ box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18),
+ 0 18px 44px rgba(var(--accent-rgb), 0.22);
+ }
+
+ :global(html.dark) .login-page {
+ --text: rgba(248, 250, 252, 0.92);
+ --muted: rgba(226, 232, 240, 0.62);
+ --border: rgba(226, 232, 240, 0.16);
+ background: radial-gradient(
+ circle at 14% 18%,
+ rgba(var(--accent-rgb), 0.22),
+ transparent 40%
+ ),
+ radial-gradient(
+ circle at 86% 12%,
+ rgba(56, 189, 248, 0.14),
+ transparent 42%
+ ),
+ conic-gradient(
+ from 220deg at 22% 16%,
+ rgba(var(--accent-rgb), 0.16),
+ rgba(56, 189, 248, 0.12),
+ rgba(99, 102, 241, 0.12),
+ rgba(var(--accent-rgb), 0.16)
+ ),
+ linear-gradient(180deg, #0b1220 0%, #070b13 100%);
+ }
+
+ :global(html.dark) .login-page::before {
+ background-image: radial-gradient(
+ rgba(226, 232, 240, 0.07) 1px,
+ transparent 1px
+ ),
+ linear-gradient(rgba(226, 232, 240, 0.06) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(226, 232, 240, 0.06) 1px, transparent 1px),
+ repeating-linear-gradient(
+ 118deg,
+ transparent 0 84px,
+ rgba(var(--accent-rgb), 0.32) 84px 86px,
+ transparent 86px 168px
+ ),
+ repeating-linear-gradient(
+ 208deg,
+ transparent 0 132px,
+ rgba(56, 189, 248, 0.28) 132px 134px,
+ transparent 134px 264px
+ ),
+ repeating-linear-gradient(
+ 156deg,
+ transparent 0 112px,
+ rgba(99, 102, 241, 0.26) 112px 114px,
+ transparent 114px 224px
+ ),
+ repeating-linear-gradient(
+ 118deg,
+ transparent 0 84px,
+ rgba(var(--accent-rgb), 0.16) 83px 89px,
+ transparent 89px 168px
+ );
+ background-size: 22px 22px, 52px 52px, 52px 52px, auto, auto, auto, auto;
+ opacity: 0.96;
+ mix-blend-mode: screen;
+ }
+
+ :global(html.dark) .login-page::after {
+ opacity: 0.7;
+ filter: blur(46px) saturate(1.08);
+ background: radial-gradient(
+ circle at 18% 28%,
+ rgba(var(--accent-rgb), 0.28),
+ transparent 56%
+ ),
+ radial-gradient(
+ circle at 84% 18%,
+ rgba(56, 189, 248, 0.18),
+ transparent 52%
+ ),
+ radial-gradient(
+ circle at 70% 82%,
+ rgba(99, 102, 241, 0.14),
+ transparent 56%
+ ),
+ radial-gradient(circle at 30% 84%, rgba(244, 63, 94, 0.06), transparent 60%);
+ }
+
+ :global(html.dark) .time {
+ color: rgba(226, 232, 240, 0.68);
+ }
+
+ :global(html.dark) .time span {
+ background: rgba(15, 23, 42, 0.5);
+ border-color: rgba(226, 232, 240, 0.16);
+ color: rgba(226, 232, 240, 0.72);
+ }
+
+ :global(html.dark) .login-card {
+ background: rgba(2, 6, 23, 0.56);
+ border-color: rgba(226, 232, 240, 0.16);
+ box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
+ }
+
+ :global(html.dark) .page {
+ background: rgba(2, 6, 23, 0.46);
+ border-color: rgba(226, 232, 240, 0.12);
+ box-shadow: 0 38px 96px rgba(0, 0, 0, 0.5);
+ }
+
+ :global(html.dark) .page::after {
+ background: linear-gradient(
+ 180deg,
+ transparent,
+ rgba(226, 232, 240, 0.14),
+ transparent
+ );
+ }
+
+ :global(html.dark) .brand-title {
+ color: rgba(248, 250, 252, 0.92);
+ }
+
+ :global(html.dark) .card-brand-copy small {
+ color: rgba(226, 232, 240, 0.62);
+ }
+
+ :global(html.dark) .login-card h2 {
+ color: rgba(248, 250, 252, 0.92);
+ }
+
+ :global(html.dark) label {
+ color: rgba(226, 232, 240, 0.72);
+ }
+
+ :global(html.dark) .input svg {
+ color: rgba(226, 232, 240, 0.55);
+ }
+
+ :global(html.dark) input[type="text"],
+ :global(html.dark) input[type="password"] {
+ background: rgba(2, 6, 23, 0.38);
+ color: rgba(248, 250, 252, 0.92);
+ }
+
+ :global(html.dark) input[type="text"]::placeholder,
+ :global(html.dark) input[type="password"]::placeholder {
+ color: rgba(226, 232, 240, 0.55);
+ }
+
+ :global(html.dark) .options {
+ color: rgba(226, 232, 240, 0.68);
+ }
+
+ @keyframes bgFloat {
+ 0% {
+ transform: translate3d(-1.8%, -1.2%, 0) scale(1.02);
+ }
+ 50% {
+ transform: translate3d(1.6%, 1.4%, 0) scale(1.06);
+ }
+ 100% {
+ transform: translate3d(-1.8%, -1.2%, 0) scale(1.02);
+ }
+ }
+
+ @keyframes lineDrift {
+ 0% {
+ background-position: 0 0, 0 0, 0 0, 0 0, -120px 140px, 120px 0, 0 0;
+ }
+ 100% {
+ background-position: 0 0, 220px 260px, -240px 210px, 760px -520px,
+ -980px 720px, 680px 860px, 760px -520px;
+ }
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ .login-page::before {
+ animation: none;
+ }
+
+ .login-page::after {
+ animation: none;
+ }
+ }
+
+ @media (max-width: 980px) {
+ .login-page {
+ overflow: auto;
+ }
+
+ .page {
+ grid-template-columns: 1fr;
+ gap: 18px;
+ margin: 18px auto;
+ width: calc(100% - 32px);
+ min-height: auto;
+ max-width: 560px;
+ }
+
+ .page::before,
+ .page::after {
+ display: none;
+ }
+
+ .factory {
+ display: none;
+ }
+
+ .login-wrap {
+ padding: 0;
+ }
+
+ .time {
+ display: none;
+ }
+
+ .login-card {
+ width: 100%;
+ padding: 30px 22px 22px;
+ }
+ }
</style>
--
Gitblit v1.9.3