<template>
|
<div class="login-page">
|
<main class="page">
|
<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"
|
/>
|
</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-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>
|
<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>
|
<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"
|
|
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">
|
* {
|
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;
|
}
|
|
.page {
|
grid-template-columns: 1fr;
|
padding: 18px;
|
min-height: auto;
|
}
|
|
.factory,
|
.login-wrap {
|
min-height: auto;
|
}
|
|
.factory {
|
min-height: 760px;
|
}
|
|
.time {
|
display: none;
|
}
|
|
.login-wrap {
|
padding: 22px;
|
}
|
|
.login-card {
|
width: 100%;
|
padding: 26px;
|
}
|
|
.login-btn {
|
font-size: 16px;
|
}
|
|
}
|
</style>
|
