<template>
|
<div class="login-page"
|
:style="{ backgroundImage: `url(${backgroundImage})` }">
|
<main class="page">
|
<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="brandIconUrl"
|
:alt="`${companyName} icon`"
|
class="logo-image card-logo-image" />
|
</div>
|
<div class="brand-copy card-brand-copy">
|
<div class="brand-title">{{ companyName }}</div>
|
</div>
|
</div>
|
<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>
|
<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>
|
</main>
|
</div>
|
</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 backgroundImage from "@/layout/components/Sidebar/KHLView.png";
|
|
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 redirect = ref("");
|
const loading = ref(false);
|
const now = ref(new Date());
|
const brandLogoUrl = ref(defaultBrandLogo);
|
|
const loginForm = ref({
|
username: "",
|
password: "",
|
rememberMe: false,
|
});
|
|
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 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(
|
() => 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 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 || "";
|
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();
|
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 scoped lang="scss">
|
.login-page {
|
--accent: var(--accent-primary, var(--el-color-primary, #8b5cf6));
|
--accent-rgb: var(--el-color-primary-rgb, 139, 92, 246);
|
--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-position: center;
|
background-size: cover;
|
background-repeat: no-repeat;
|
}
|
|
.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 {
|
position: relative;
|
z-index: 1;
|
width: 100%;
|
min-height: 100vh;
|
padding: 48px 72px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.factory {
|
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;
|
}
|
|
.brand {
|
position: relative;
|
z-index: 1;
|
display: inline-flex;
|
align-items: center;
|
}
|
|
.logo {
|
width: 52px;
|
height: 52px;
|
border-radius: var(--radius-md);
|
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: var(--radius-md);
|
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 {
|
position: relative;
|
z-index: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 0;
|
width: 100%;
|
max-width: 100%;
|
}
|
|
.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: var(--radius-md);
|
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(520px, 100%);
|
padding: 38px 34px 34px;
|
border-radius: var(--radius-lg);
|
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: var(--radius-lg);
|
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: var(--radius-md);
|
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%;
|
height: 50px;
|
padding: 0 14px 0 44px;
|
border: 1px solid var(--border);
|
border-radius: var(--radius-md);
|
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 {
|
width: 100%;
|
height: 52px;
|
border: none;
|
border-radius: var(--radius-md);
|
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: transparent;
|
border-color: transparent;
|
box-shadow: none;
|
}
|
|
:global(html.dark) .page::before {
|
background: linear-gradient(
|
135deg,
|
rgba(var(--accent-rgb), 0.62) 0%,
|
rgba(var(--accent-rgb), 0.42) 52%,
|
rgba(56, 189, 248, 0.28) 100%
|
);
|
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
|
}
|
|
:global(html.dark) .page::after {
|
background-image: radial-gradient(
|
circle at 16% 22%,
|
rgba(255, 255, 255, 0.16),
|
transparent 56%
|
),
|
radial-gradient(
|
circle at 76% 16%,
|
rgba(255, 255, 255, 0.1),
|
transparent 52%
|
),
|
radial-gradient(
|
circle at 78% 72%,
|
rgba(255, 255, 255, 0.12),
|
transparent 58%
|
),
|
radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
|
repeating-linear-gradient(
|
132deg,
|
rgba(255, 255, 255, 0.14) 0 1px,
|
transparent 1px 14px
|
),
|
repeating-linear-gradient(
|
42deg,
|
rgba(2, 6, 23, 0.26) 0 1px,
|
transparent 1px 18px
|
);
|
opacity: 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 {
|
padding: 18px 16px;
|
min-height: 100vh;
|
justify-content: center;
|
}
|
|
.page::before,
|
.page::after {
|
display: none;
|
}
|
|
.factory {
|
display: none;
|
}
|
|
.login-wrap {
|
padding: 0;
|
width: 100%;
|
max-width: 100%;
|
margin-left: 0;
|
}
|
|
.time {
|
display: none;
|
}
|
|
.login-card {
|
width: 100%;
|
padding: 30px 22px 22px;
|
}
|
}
|
</style>
|
