From a59f15c41afa6ddf106c4bf9c163d9e322d314cc Mon Sep 17 00:00:00 2001
From: xiaoyi <908147524@qq.com>
Date: 星期五, 21 八月 2026 16:52:34 +0800
Subject: [PATCH] feat 修改页面白屏
---
src/views/_core/authentication/login.vue | 281 +++++++++++++++++++++++++++++++++++--------------------
src/layouts/auth.vue | 17 +--
2 files changed, 183 insertions(+), 115 deletions(-)
diff --git a/src/layouts/auth.vue b/src/layouts/auth.vue
index 1cdccb9..9598e12 100644
--- a/src/layouts/auth.vue
+++ b/src/layouts/auth.vue
@@ -1,27 +1,22 @@
<script lang="ts" setup>
import { computed } from 'vue';
+import { useRoute } from 'vue-router';
import { AuthPageLayout } from '@vben/layouts';
-import { preferences } from '@vben/preferences';
-
import { $t } from '#/locales';
-declare const __APP_LOGO__: string;
-
-const appName = computed(() => preferences.copyright.companyName);
-const logo = computed(() => __APP_LOGO__ || preferences.logo.source);
-const logoDark = computed(() => preferences.logo.sourceDark);
+const route = useRoute();
+const isLogin = computed(() => route.name === 'Login');
</script>
<template>
+ <RouterView v-if="isLogin" />
<AuthPageLayout
- :app-name="appName"
- :logo="logo"
- :logo-dark="logoDark"
+ v-else
:page-description="$t('authentication.pageDesc')"
:page-title="$t('authentication.pageTitle')"
>
<!-- 鑷畾涔夊伐鍏锋爮 -->
<!-- <template #toolbar></template> -->
</AuthPageLayout>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/views/_core/authentication/login.vue b/src/views/_core/authentication/login.vue
index 16e9f68..7529cdf 100644
--- a/src/views/_core/authentication/login.vue
+++ b/src/views/_core/authentication/login.vue
@@ -1,143 +1,148 @@
<script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui';
-
import type { AuthApi } from '#/api/core/auth';
-import { computed, onMounted, ref } from 'vue';
+import { computed, ref } from 'vue';
import { AuthenticationLogin, Verification, z } from '@vben/common-ui';
-import { isCaptchaEnable, isTenantEnable } from '@vben/hooks';
+import { isCaptchaEnable } from '@vben/hooks';
import { $t } from '@vben/locales';
-import { useAccessStore } from '@vben/stores';
-import {
- checkCaptcha,
- getCaptcha,
- getTenantByWebsite,
- getTenantSimpleList,
-} from '#/api/core/auth';
+import { checkCaptcha, getCaptcha } from '#/api/core/auth';
import { useAuthStore } from '#/store';
defineOptions({ name: 'Login' });
const authStore = useAuthStore();
-const accessStore = useAccessStore();
-const tenantEnable = isTenantEnable();
const captchaEnable = isCaptchaEnable();
-
const loginRef = ref();
const verifyRef = ref();
+const captchaType = 'blockPuzzle';
-const captchaType = 'blockPuzzle'; // 楠岃瘉鐮佺被鍨嬶細'blockPuzzle' | 'clickWord'
-
-/** 鑾峰彇绉熸埛鍒楄〃 */
-const tenantList = ref<AuthApi.TenantResult[]>([]); // 绉熸埛鍒楄〃
-async function fetchTenantList() {
- if (!tenantEnable) {
- return;
- }
- try {
- // 鑾峰彇绉熸埛鍒楄〃
- tenantList.value = await getTenantSimpleList();
- } catch (error) {
- console.error('鑾峰彇绉熸埛鍒楄〃澶辫触:', error);
- }
-}
-
-/** 澶勭悊鐧诲綍 */
-async function handleLogin(values: any) {
- // 濡傛灉寮�鍚獙璇佺爜锛屽垯鍏堥獙璇侀獙璇佺爜
+async function handleLogin(values: AuthApi.LoginParams) {
if (captchaEnable) {
- verifyRef.value.show();
+ verifyRef.value?.show();
return;
}
- // 鏃犻獙璇佺爜锛岀洿鎺ョ櫥褰�
await authStore.authLogin('username', values);
}
-/** 楠岃瘉鐮侀�氳繃锛屾墽琛岀櫥褰� */
-async function handleVerifySuccess({ captchaVerification }: any) {
+async function handleVerifySuccess({ captchaVerification }: { captchaVerification: string }) {
try {
await authStore.authLogin('username', {
...(await loginRef.value.getFormApi().getValues()),
captchaVerification,
});
} catch (error) {
- console.error('Error in handleLogin:', error);
+ console.error('楠岃瘉鐮佺櫥褰曞け璐�:', error);
}
}
-/** 缁勪欢鎸傝浇鏃惰幏鍙栫鎴蜂俊鎭� */
-onMounted(() => {
- fetchTenantList();
-});
-
-const formSchema = computed((): VbenFormSchema[] => {
- return [
- // {
- // component: 'VbenSelect',
- // componentProps: {
- // options: tenantList.value.map((item) => ({
- // label: item.name,
- // value: item.id.toString(),
- // })),
- // placeholder: $t('authentication.tenantTip'),
- // },
- // fieldName: 'tenantId',
- // label: $t('authentication.tenant'),
- // dependencies: {
- // triggerFields: ['tenantId'],
- // if: tenantEnable,
- // trigger(values) {
- // accessStore.setTenantId(values.tenantId ? Number(values.tenantId) : null);
- // },
- // },
- // },
- {
- component: 'VbenInput',
- componentProps: {
- placeholder: $t('authentication.usernameTip'),
- },
- fieldName: 'username',
- label: $t('authentication.username'),
- rules: z
- .string()
- .min(1, { message: $t('authentication.usernameTip') })
- .default(import.meta.env.VITE_APP_DEFAULT_USERNAME),
- },
- {
- component: 'VbenInputPassword',
- componentProps: {
- placeholder: $t('authentication.passwordTip'),
- },
- fieldName: 'password',
- label: $t('authentication.password'),
- rules: z
- .string()
- .min(1, { message: $t('authentication.passwordTip') })
- .default(import.meta.env.VITE_APP_DEFAULT_PASSWORD),
- },
- ];
-});
+const formSchema = computed((): VbenFormSchema[] => [
+ {
+ component: 'VbenInput',
+ componentProps: { placeholder: $t('authentication.usernameTip') },
+ fieldName: 'username',
+ label: $t('authentication.username'),
+ rules: z.string().min(1, { message: $t('authentication.usernameTip') }).default(import.meta.env.VITE_APP_DEFAULT_USERNAME),
+ },
+ {
+ component: 'VbenInputPassword',
+ componentProps: { placeholder: $t('authentication.passwordTip') },
+ fieldName: 'password',
+ label: $t('authentication.password'),
+ rules: z.string().min(1, { message: $t('authentication.passwordTip') }).default(import.meta.env.VITE_APP_DEFAULT_PASSWORD),
+ },
+]);
</script>
<template>
- <div>
- <AuthenticationLogin
- ref="loginRef"
- :form-schema="formSchema"
- :loading="authStore.loginLoading"
- :show-code-login="false"
- :show-qrcode-login="false"
- :show-third-party-login="false"
- :show-register="false"
- :show-forget-password="false"
- :show-doc-link="false"
- @submit="handleLogin"
- />
+ <main class="mes-login-page">
+ <section class="industrial-hero" aria-label="鏂扮枂鏂伴珮鐢靛姏绉戞妧鏈夐檺鍏徃">
+ <div class="hero-grid" aria-hidden="true" />
+ <div class="hero-glow hero-glow-one" aria-hidden="true" />
+ <div class="hero-glow hero-glow-two" aria-hidden="true" />
+
+ <header class="company-bar">
+ <div class="company-brand">
+ <img class="company-logo" src="/logos/xgdl.svg" alt="鏂伴珮鐢靛姏" width="48" height="48" />
+ <div class="company-name">
+ <strong>鏂伴珮鐢靛姏</strong>
+ <span>鏂扮枂鏂伴珮鐢靛姏绉戞妧鏈夐檺鍏徃</span>
+ </div>
+ </div>
+ <div class="system-mark"><span class="status-dot" /> INDUSTRIAL DIGITAL PLATFORM</div>
+ </header>
+
+ <div class="hero-content">
+ <div class="hero-kicker"><span>MES 路 MANUFACTURING EXECUTION SYSTEM</span><i /></div>
+ <h1>鏂伴珮鏅洪��<br /><em>杩愯惀涓績</em></h1>
+ <p class="hero-subtitle">鏅鸿兘鍒堕�犳暟瀛楀寲绠＄悊骞冲彴</p>
+
+ <div class="capability-list" aria-label="骞冲彴鑳藉姏">
+ <div class="capability-item"><span class="capability-index">01</span><span>鐢熶骇鏁板瓧鍖�</span><b>PRODUCTION</b></div>
+ <div class="capability-item"><span class="capability-index">02</span><span>璁惧鏅鸿兘鍖�</span><b>EQUIPMENT</b></div>
+ <div class="capability-item"><span class="capability-index">03</span><span>璐ㄩ噺鍙拷婧�</span><b>QUALITY</b></div>
+ <div class="capability-item"><span class="capability-index">04</span><span>鏁版嵁鏅鸿兘鍐崇瓥</span><b>DECISION</b></div>
+ </div>
+ </div>
+
+ <div class="factory-visual" aria-hidden="true">
+ <div class="visual-label label-top">SMART FACTORY / XG POWER <span>01</span></div>
+ <svg class="factory-svg" viewBox="0 0 920 330" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation">
+ <path d="M0 286H920" stroke="rgba(190,218,238,.18)" />
+ <path d="M0 302H920" stroke="rgba(190,218,238,.1)" />
+ <path d="M82 284V178L196 112L310 178V284" fill="rgba(19,66,103,.64)" stroke="rgba(143,187,218,.48)" stroke-width="2" />
+ <path d="M82 178H310M196 112V284" stroke="rgba(143,187,218,.38)" stroke-width="2" />
+ <path d="M132 284V210H174V284M218 284V210H260V284" stroke="rgba(116,173,216,.46)" stroke-width="2" />
+ <path d="M349 284V156L428 117L507 156V284" fill="rgba(17,60,96,.7)" stroke="rgba(143,187,218,.43)" stroke-width="2" />
+ <path d="M349 156H507M428 117V284M384 284V214H414V284M445 284V214H475V284" stroke="rgba(143,187,218,.36)" stroke-width="2" />
+ <path d="M563 284V190H718V284" fill="rgba(12,52,86,.72)" stroke="rgba(143,187,218,.4)" stroke-width="2" />
+ <path d="M563 190L602 166H718L680 190" fill="rgba(34,88,128,.55)" stroke="rgba(143,187,218,.4)" stroke-width="2" />
+ <rect x="593" y="211" width="46" height="73" fill="rgba(10,36,61,.62)" stroke="rgba(82,164,231,.7)" />
+ <rect x="650" y="211" width="46" height="73" fill="rgba(10,36,61,.62)" stroke="rgba(82,164,231,.7)" />
+ <path d="M616 217V277M673 217V277M600 234H632M657 234H689M600 250H632M657 250H689" stroke="rgba(112,196,255,.55)" stroke-width="2" />
+ <path d="M776 284L823 90L870 284M800 190H846M793 221H853M786 253H860M805 162H841M813 130H833" stroke="rgba(142,191,224,.5)" stroke-width="2" />
+ <path d="M823 90L790 65M823 90L856 65M790 65H856M720 122C756 94 786 78 823 78C860 78 879 94 920 122" stroke="rgba(83,173,236,.62)" stroke-width="2" />
+ <path d="M18 244C140 213 233 251 326 224C443 190 532 218 638 181C750 142 810 169 920 130" stroke="#3C9EE8" stroke-width="2" stroke-dasharray="4 8" />
+ <circle cx="638" cy="181" r="5" fill="#78C7FF" /><circle cx="823" cy="78" r="5" fill="#78C7FF" />
+ <path d="M196 86V34M428 91V31M603 142V82" stroke="rgba(129,192,232,.28)" stroke-dasharray="3 5" />
+ </svg>
+ <div class="data-widget widget-left"><span>LINE STATUS</span><strong>ALL SYSTEMS NORMAL</strong><i /></div>
+ <div class="data-widget widget-right"><span>REAL-TIME OUTPUT</span><strong>98.6%</strong><em>+2.4%</em></div>
+ </div>
+
+ <footer class="hero-footer"><span>绯荤粺鐗堟湰 v3.2.0</span><span>杩愯鍖哄煙 路 鏂扮枂鐢熶骇寤鸿鍏靛洟</span><span>漏 2026 鏂伴珮鐢靛姏绉戞妧</span></footer>
+ </section>
+
+ <section class="login-side" aria-label="鐧诲綍鏂伴珮鏅洪�犺繍钀ヤ腑蹇�">
+ <div class="login-side-inner">
+ <div class="login-card">
+ <div class="login-card-top"><span class="card-kicker">AUTHORIZED ACCESS</span><span class="lock-mark">SECURE</span></div>
+ <AuthenticationLogin
+ ref="loginRef"
+ :form-schema="formSchema"
+ :loading="authStore.loginLoading"
+ :show-code-login="false"
+ :show-qrcode-login="false"
+ :show-third-party-login="false"
+ :show-register="false"
+ :show-forget-password="true"
+ :show-doc-link="false"
+ :show-remember-me="true"
+ sub-title="缁熶竴杩炴帴鐢熶骇銆佽澶囦笌璐ㄩ噺鏁版嵁"
+ title="娆㈣繋鐧诲綍"
+ @submit="handleLogin"
+ />
+ <div class="login-card-footer"><span>鏂伴珮鏅洪�犺繍钀ヤ腑蹇�</span><span>浼佷笟鍐呴儴绯荤粺</span></div>
+ </div>
+ <p class="security-caption"><span class="status-dot blue" /> 绯荤粺杩愯绋冲畾 路 鏁版嵁浼犺緭宸插姞瀵�</p>
+ </div>
+ </section>
+
<Verification
- ref="verifyRef"
v-if="captchaEnable"
+ ref="verifyRef"
:captcha-type="captchaType"
:check-captcha-api="checkCaptcha"
:get-captcha-api="getCaptcha"
@@ -145,5 +150,73 @@
mode="pop"
@on-success="handleVerifySuccess"
/>
- </div>
+ </main>
</template>
+
+<style scoped>
+.mes-login-page {
+ --deep-blue: #061b33;
+ --panel-blue: #0a2948;
+ --tech-blue: #1677ff;
+ --line-blue: rgb(151 201 235 / 24%);
+ --text-blue: #dbeaf6;
+ --ink: #12263d;
+ --muted: #6d7b8c;
+ --surface: #f5f7fa;
+ display: grid;
+ grid-template-columns: minmax(0, 58%) minmax(420px, 42%);
+ min-height: 100dvh;
+ overflow: hidden;
+ color: var(--ink);
+ background: var(--surface);
+ font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+.industrial-hero { position: relative; display: flex; min-height: 100dvh; flex-direction: column; padding: clamp(30px, 4vw, 64px) clamp(34px, 5.2vw, 100px) 26px; overflow: hidden; color: var(--text-blue); background: var(--deep-blue); isolation: isolate; }
+.industrial-hero::before { position: absolute; inset: 0; z-index: -3; background: linear-gradient(125deg, rgb(6 27 51 / 100%) 0%, rgb(8 42 73 / 96%) 58%, rgb(5 24 45 / 98%) 100%); content: ''; }
+.hero-grid { position: absolute; inset: 0; z-index: -2; opacity: .32; background-image: linear-gradient(rgb(150 206 241 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(150 206 241 / 9%) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, transparent 2%, black 24%, black 82%, transparent); }
+.hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
+.hero-glow-one { right: 12%; bottom: 17%; width: 410px; height: 410px; background: radial-gradient(circle, rgb(23 119 255 / 22%), transparent 70%); }
+.hero-glow-two { left: 13%; top: 20%; width: 270px; height: 270px; background: radial-gradient(circle, rgb(56 145 220 / 15%), transparent 70%); }
+.company-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
+.company-brand { display: flex; align-items: center; gap: 14px; }
+.company-logo { flex: none; border-radius: 10px; }
+.company-name { display: flex; flex-direction: column; gap: 5px; }
+.company-name strong { color: #fff; font-size: 18px; font-weight: 650; letter-spacing: .08em; }
+.company-name span { color: rgb(210 229 245 / 65%); font-size: 11px; letter-spacing: .06em; }
+.system-mark, .hero-kicker, .visual-label, .data-widget, .hero-footer, .card-kicker, .lock-mark { font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; }
+.system-mark { display: flex; align-items: center; gap: 9px; padding-top: 7px; color: rgb(201 225 244 / 58%); font-size: 9px; letter-spacing: .14em; }
+.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #65c18c; box-shadow: 0 0 0 4px rgb(101 193 140 / 13%); }
+.hero-content { position: relative; z-index: 1; margin: auto 0 5vh; }
+.hero-kicker { display: flex; align-items: center; gap: 12px; color: rgb(183 215 237 / 64%); font-size: 10px; letter-spacing: .15em; }
+.hero-kicker i { display: block; width: 42px; height: 1px; background: var(--tech-blue); }
+.hero-content h1 { margin: 22px 0 12px; color: #fff; font-size: clamp(46px, 5.2vw, 82px); font-weight: 600; line-height: 1.08; letter-spacing: -.065em; }
+.hero-content h1 em { color: #8ecbff; font-style: normal; }
+.hero-subtitle { margin: 0; color: rgb(216 233 247 / 80%); font-size: clamp(16px, 1.4vw, 20px); letter-spacing: .12em; }
+.capability-list { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); max-width: 660px; margin-top: 42px; border-top: 1px solid var(--line-blue); }
+.capability-item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 7px 10px; padding: 15px 16px 0 0; border-right: 1px solid var(--line-blue); color: #e5f1fb; font-size: 14px; }
+.capability-item:not(:first-child) { padding-left: 16px; }
+.capability-item:last-child { border-right: 0; }
+.capability-index { color: #63aef2; font-family: "IBM Plex Mono", monospace; font-size: 10px; }
+.capability-item b { grid-column: 2; color: rgb(184 213 235 / 48%); font-family: "IBM Plex Mono", monospace; font-size: 8px; font-weight: 400; letter-spacing: .08em; }
+.factory-visual { position: absolute; right: 2%; bottom: 64px; left: 2%; z-index: 0; opacity: .9; pointer-events: none; }
+.factory-svg { display: block; width: 100%; height: auto; }
+.visual-label { display: flex; justify-content: space-between; padding: 0 7% 6px; color: rgb(161 201 229 / 48%); font-size: 8px; letter-spacing: .12em; }
+.visual-label span { color: #64b2ee; }
+.data-widget { position: absolute; bottom: 48px; display: flex; flex-direction: column; gap: 5px; min-width: 142px; padding: 9px 11px; border: 1px solid rgb(128 188 229 / 27%); color: rgb(193 223 242 / 60%); background: rgb(6 28 50 / 74%); font-size: 8px; letter-spacing: .08em; }
+.data-widget strong { color: #e4f2fd; font-size: 10px; font-weight: 500; }
+.data-widget i { position: absolute; right: 10px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: #65c18c; }
+.data-widget em { color: #70b9f5; font-size: 9px; font-style: normal; }
+.widget-left { left: 8%; }.widget-right { right: 9%; }
+.hero-footer { display: flex; justify-content: space-between; gap: 18px; margin-top: auto; color: rgb(182 211 232 / 47%); font-size: 8px; letter-spacing: .08em; }
+.login-side { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 52px clamp(30px, 6vw, 110px); background: var(--surface); }
+.login-side-inner { width: min(100%, 430px); }
+.login-card { padding: clamp(30px, 3.4vw, 48px); border: 1px solid rgb(6 27 51 / 8%); border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgb(6 27 51 / 10%), 0 4px 14px rgb(6 27 51 / 5%); }
+.login-card-top, .login-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.card-kicker, .lock-mark { color: #9aa8b7; font-size: 9px; letter-spacing: .1em; }.lock-mark { color: #5c9a76; }
+.login-card :deep(.mb-7) { margin-bottom: 34px; }.login-card :deep(h2) { margin-top: 26px; color: var(--ink); font-size: 34px; font-weight: 650; letter-spacing: -.06em; }.login-card :deep(.text-muted-foreground) { display: block; margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.6; }.login-card :deep(.grid) { gap: 17px; }.login-card :deep(label) { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }.login-card :deep([data-slot='checkbox'] + label) { margin-left: 8px; color: #51657a; font-size: 13px; font-weight: 500; line-height: 16px; }.login-card :deep(input) { min-height: 52px; border: 1px solid #d9e0e8; border-radius: 10px; color: var(--ink); background: #fff; box-shadow: none; font-family: inherit; font-size: 14px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }.login-card :deep(input::placeholder) { color: #9aa7b6; }.login-card :deep(input:hover), .login-card :deep(input:focus) { border-color: var(--tech-blue); box-shadow: 0 0 0 4px rgb(22 119 255 / 10%); transform: translateY(-1px); }.login-card :deep([data-slot='input-group']) { border: 1px solid #d9e0e8; border-radius: 10px; background: #fff; }.login-card :deep([data-slot='input-group']:focus-within) { border-color: var(--tech-blue); box-shadow: 0 0 0 4px rgb(22 119 255 / 10%); }.login-card :deep([data-slot='input-group'] input) { border: 0; box-shadow: none; transform: none; }.login-card :deep(button:not([data-slot='checkbox'])) { min-height: 52px; border-radius: 10px; font-family: inherit; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }.login-card :deep(button[type='submit']) { margin-top: 10px; color: #fff; background: var(--tech-blue); font-size: 14px; font-weight: 650; letter-spacing: .05em; }.login-card :deep(button[type='submit']:hover) { background: #0f65db; box-shadow: 0 12px 24px rgb(22 119 255 / 22%); transform: translateY(-2px); }.login-card :deep(button[type='submit']:active) { transform: translateY(0) scale(.985); }.login-card :deep([data-slot='checkbox']) { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; border: 1px solid #c2ccd6; border-radius: 4px; color: #fff; background: transparent; box-shadow: none; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }.login-card :deep([data-slot='checkbox']:hover) { border-color: var(--tech-blue); }.login-card :deep([data-slot='checkbox'][data-state='checked']) { border-color: var(--tech-blue); background: var(--tech-blue); }.login-card :deep([data-slot='checkbox']:focus-visible) { box-shadow: 0 0 0 3px rgb(22 119 255 / 22%); outline: none; }.login-card-footer { margin-top: 30px; padding-top: 16px; border-top: 1px solid #e8edf2; color: #9aa7b6; font-size: 10px; }.security-caption { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 18px 0 0; color: #8a98a8; font-size: 11px; }
+@media (max-width: 1050px) { .mes-login-page { grid-template-columns: minmax(0, 55%) minmax(400px, 45%); }.industrial-hero { padding-inline: 42px; }.capability-item { font-size: 12px; }.capability-item b { font-size: 7px; } }
+@media (max-width: 760px) { .mes-login-page { display: block; }.industrial-hero { min-height: 430px; padding: 28px 24px 22px; }.hero-content { margin: 66px 0 0; }.hero-content h1 { margin-top: 16px; font-size: 48px; }.capability-list { margin-top: 28px; }.capability-item { padding-top: 11px; font-size: 11px; }.capability-item:not(:first-child) { padding-left: 10px; }.capability-item b, .system-mark, .data-widget { display: none; }.factory-visual { bottom: 24px; opacity: .65; }.hero-footer { position: relative; z-index: 2; margin-top: auto; font-size: 7px; }.hero-footer span:nth-child(2) { display: none; }.login-side { padding: 38px 22px 48px; }.login-card { padding: 30px 24px; } }
+@media (max-width: 400px) { .industrial-hero { min-height: 390px; padding-inline: 20px; }.company-logo { width: 40px; height: 40px; }.company-name strong { font-size: 16px; }.company-name span { font-size: 9px; }.hero-content h1 { font-size: 41px; }.capability-list { grid-template-columns: repeat(2, 1fr); gap: 10px 0; border-bottom: 1px solid var(--line-blue); padding-bottom: 10px; }.capability-item:nth-child(2) { border-right: 0; }.capability-item:nth-child(3) { padding-left: 0; }.login-side { padding-inline: 18px; } }
+@media (prefers-reduced-motion: reduce) { .login-card :deep(input), .login-card :deep(button) { transition: none; } }
+</style>
--
Gitblit v1.9.3