From 9cecea613e29bb152bb6ea69a3cca94aa537c621 Mon Sep 17 00:00:00 2001
From: huminmin <mac@MacBook-Pro.local>
Date: 星期三, 20 五月 2026 14:56:34 +0800
Subject: [PATCH] bom同一层级只能选一样的工序,增加提示
---
src/views/login.vue | 1148 ++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 893 insertions(+), 255 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index a491228..c7db15a 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,255 +1,893 @@
-<template>
- <div class="login">
- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
- <h3 class="title">{{ title }}</h3>
- <el-divider />
- <el-form-item prop="username">
- <el-input
- v-model="loginForm.username"
- type="text"
- size="large"
- auto-complete="off"
- placeholder="璐﹀彿"
- @input="getUserLoginFacotryList"
- >
- <template #prefix><el-icon><User /></el-icon></template>
- </el-input>
- </el-form-item>
- <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>
- <el-form-item prop="currentFatoryId">
- <el-select v-model="loginForm.currentFatoryId" placeholder="璇烽�夋嫨鍏徃" >
- <el-option v-for="item in factoryList" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
- </el-select>
- </el-form-item>
-<!-- <el-form-item prop="code" v-if="captchaEnabled">-->
-<!-- <el-input-->
-<!-- v-model="loginForm.code"-->
-<!-- size="large"-->
-<!-- auto-complete="off"-->
-<!-- placeholder="楠岃瘉鐮�"-->
-<!-- style="width: 63%"-->
-<!-- @keyup.enter="handleLogin"-->
-<!-- >-->
-<!-- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>-->
-<!-- </el-input>-->
-<!-- <div class="login-code">-->
-<!-- <img :src="codeUrl" @click="getCode" class="login-code-img"/>-->
-<!-- </div>-->
-<!-- </el-form-item>-->
- <el-form-item style="width:100%;">
- <el-button
- :loading="loading"
- size="large"
- type="primary"
- style="width:100%;"
- @click.prevent="handleLogin"
- >
- <span v-if="!loading">鐧� 褰�</span>
- <span v-else>鐧� 褰� 涓�...</span>
- </el-button>
- <div style="float: right;" v-if="register">
- <router-link class="link-type" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link>
- </div>
- </el-form-item>
- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">璁颁綇瀵嗙爜</el-checkbox>
- </el-form>
- <!-- 搴曢儴 -->
-<!-- <div class="el-login-footer">-->
-<!-- <span>Copyright 漏 2018-2025 ruoyi.vip All Rights Reserved.</span>-->
-<!-- </div>-->
- </div>
-</template>
-
-<script setup>
-import {getCodeImg} from "@/api/login"
-import Cookies from "js-cookie"
-import { encrypt, decrypt } from "@/utils/jsencrypt"
-import useUserStore from '@/store/modules/user'
-import {userLoginFacotryList} from "@/api/system/user.js"
-
-const title = import.meta.env.VITE_APP_TITLE
-const userStore = useUserStore()
-const route = useRoute()
-const router = useRouter()
-const { proxy } = getCurrentInstance()
-
-const loginForm = ref({
- username: "",
- password: "",
- rememberMe: false,
- currentFatoryId:'',
-})
-
-const loginRules = {
- username: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勮处鍙�" }],
- password: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�" }],
- // code: [{ required: true, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }]
-}
-
-const codeUrl = ref("")
-const loading = ref(false)
-// 楠岃瘉鐮佸紑鍏�
-const captchaEnabled = ref(true)
-// 娉ㄥ唽寮�鍏�
-const register = ref(false)
-const redirect = ref(undefined)
-
-const factoryList = ref([])
-const currentFatoryId = ref('')
-
-watch(route, (newRoute) => {
- redirect.value = newRoute.query && newRoute.query.redirect
-}, { immediate: true })
-
-function handleLogin() {
- proxy.$refs.loginRef.validate(valid => {
- if (valid) {
- loading.value = true
- // 鍕鹃�変簡闇�瑕佽浣忓瘑鐮佽缃湪 cookie 涓缃浣忕敤鎴峰悕鍜屽瘑鐮�
- 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(res => {
- 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()
- }
- })
- }
- })
-}
-
-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 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)
- }
-}
-
-function getUserLoginFacotryList() {
- if(loginForm.value.username){
- userLoginFacotryList({userName:loginForm.value.username}).then(res => {
- console.log('res', res)
- factoryList.value = res.data
- })
- }else {
- factoryList.value = []
- }
-}
-
-getCode()
-getCookie()
-getUserLoginFacotryList()
-</script>
-
-<style lang='scss' scoped>
-.login {
- height: 100%;
- background-image: url("../assets/indexViews/HYSNView.png");
- background-size: cover;
- position: relative;
-}
-.title {
- margin: 20px auto 14px auto;
- text-align: center;
- color: #2C51D9;
- font-size: 28px;
- font-weight: 700;
-}
-
-.login-form {
- position: absolute;
- top: 50%;
- right: 15%;
- transform: translate(0, -50%);
- border-radius: 6px;
- background: #ffffff;
- width: 420px;
- height: 500px;
- padding: 40px;
- z-index: 1;
- box-shadow: 0 0 5px 1px #ccc;
- .el-input {
- height: 40px;
- input {
- height: 40px;
- }
- }
- .input-icon {
- height: 39px;
- width: 14px;
- margin-left: 0px;
- }
-}
-.login-tip {
- font-size: 13px;
- text-align: center;
- color: #bfbfbf;
-}
-.login-code {
- width: 33%;
- height: 40px;
- float: right;
- img {
- cursor: pointer;
- vertical-align: middle;
- }
-}
-.el-login-footer {
- height: 40px;
- line-height: 40px;
- position: fixed;
- bottom: 0;
- width: 100%;
- text-align: center;
- color: #fff;
- font-family: Arial;
- font-size: 12px;
- letter-spacing: 1px;
-}
-.login-code-img {
- height: 40px;
- padding-left: 12px;
-}
-:deep() {
- .el-form-item--default {
- margin-bottom: 36px;
- }
-}
-</style>
+<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>
--
Gitblit v1.9.3