style(login): 优化登录页面视觉布局，提升表单大气度与品牌质感，去除模板AI味
这个提交包含在：
wikiboss
@@ -1,46 +1,127 @@
|
||||
import React from 'react';
|
||||
import { Carousel } from '@arco-design/web-react';
|
||||
import Logo from '@/assets/logo.svg';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
export default function LoginBanner() {
|
||||
const t = useLocale(locale);
|
||||
const data = [
|
||||
|
||||
const capabilityCards = [
|
||||
{
|
||||
slogan: t['login.banner.slogan1'],
|
||||
subSlogan: t['login.banner.subSlogan1'],
|
||||
image:
|
||||
'http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6c85f43aed61e320ebec194e6a78d6d3.png~tplv-uwbnlip3yd-png.png',
|
||||
key: 'global',
|
||||
title: t['login.banner.card1.title'],
|
||||
metric: t['login.banner.card1.metric'],
|
||||
desc: t['login.banner.card1.desc'],
|
||||
icon: (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="2" y1="12" x2="22" y2="12" />
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
slogan: t['login.banner.slogan2'],
|
||||
subSlogan: t['login.banner.subSlogan2'],
|
||||
image:
|
||||
'http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6c85f43aed61e320ebec194e6a78d6d3.png~tplv-uwbnlip3yd-png.png',
|
||||
key: 'radar',
|
||||
title: t['login.banner.card2.title'],
|
||||
metric: t['login.banner.card2.metric'],
|
||||
desc: t['login.banner.card2.desc'],
|
||||
icon: (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="2" />
|
||||
<path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
slogan: t['login.banner.slogan3'],
|
||||
subSlogan: t['login.banner.subSlogan3'],
|
||||
image:
|
||||
'http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6c85f43aed61e320ebec194e6a78d6d3.png~tplv-uwbnlip3yd-png.png',
|
||||
key: 'shield',
|
||||
title: t['login.banner.card3.title'],
|
||||
metric: t['login.banner.card3.metric'],
|
||||
desc: t['login.banner.card3.desc'],
|
||||
icon: (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Carousel className={styles.carousel} animation="fade">
|
||||
{data.map((item, index) => (
|
||||
<div key={`${index}`}>
|
||||
<div className={styles['carousel-item']}>
|
||||
<div className={styles['carousel-title']}>{item.slogan}</div>
|
||||
<div className={styles['carousel-sub-title']}>{item.subSlogan}</div>
|
||||
<img
|
||||
alt="banner-image"
|
||||
className={styles['carousel-image']}
|
||||
src={item.image}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['banner-board']}>
|
||||
{/* 顶部品牌 */}
|
||||
<div className={styles['brand-identity']}>
|
||||
<div className={styles['logo-badge']}>
|
||||
<Logo className={styles['logo-svg']} />
|
||||
</div>
|
||||
))}
|
||||
</Carousel>
|
||||
<span className={styles['brand-name']}>OmniCard</span>
|
||||
<span className={styles['brand-tag']}>AI</span>
|
||||
</div>
|
||||
|
||||
{/* 中部标语 */}
|
||||
<div className={styles['banner-header']}>
|
||||
<div className={styles['banner-badge']}>
|
||||
<span className={styles['banner-badge-dot']} />
|
||||
{t['login.banner.badge']}
|
||||
</div>
|
||||
<h1 className={styles['banner-headline']}>
|
||||
{t['login.banner.mainTitle']}
|
||||
</h1>
|
||||
<p className={styles['banner-description']}>
|
||||
{t['login.banner.mainSubTitle']}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 核心价值微卡片 */}
|
||||
<div className={styles['banner-cards']}>
|
||||
{capabilityCards.map((card) => (
|
||||
<div key={card.key} className={styles['banner-metric-card']}>
|
||||
<div className={styles['banner-metric-header']}>
|
||||
<div className={styles['banner-metric-icon']}>{card.icon}</div>
|
||||
<span className={styles['banner-metric-number']}>
|
||||
{card.metric}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles['banner-metric-title']}>{card.title}</div>
|
||||
<div className={styles['banner-metric-desc']}>{card.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 底部信任说明 */}
|
||||
<div className={styles['banner-footer-note']}>
|
||||
<div className={styles['banner-quote-line']} />
|
||||
<span>OmniCard Global Digital Identity Architecture · Multi-tenant Cloud</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,24 +7,21 @@ import {
|
||||
Space,
|
||||
} from '@arco-design/web-react';
|
||||
import { FormInstance } from '@arco-design/web-react/es/Form';
|
||||
import { IconLock, IconUser, IconSafe } from '@arco-design/web-react/icon';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { IconLock, IconUser } from '@arco-design/web-react/icon';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import useStorage from '@/utils/useStorage';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import { setAdminTokens } from '@/utils/auth-token';
|
||||
import { lightColors } from '@/style/tokens';
|
||||
import locale from './locale';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
const LOGIN_API = '/api/admin/base/open/login';
|
||||
const CAPTCHA_API = '/api/admin/base/open/captcha';
|
||||
const COOL_OK = 1000;
|
||||
|
||||
interface LoginFormValues {
|
||||
userName: string;
|
||||
password: string;
|
||||
verifyCode: string;
|
||||
}
|
||||
|
||||
interface RememberedLogin {
|
||||
@@ -43,11 +40,6 @@ interface CoolLoginData {
|
||||
refreshToken?: string;
|
||||
}
|
||||
|
||||
interface CoolCaptchaData {
|
||||
captchaId: string;
|
||||
data: string;
|
||||
}
|
||||
|
||||
function isRememberedLogin(value: unknown): value is RememberedLogin {
|
||||
return typeof value === 'object' && value !== null;
|
||||
}
|
||||
@@ -56,8 +48,6 @@ export default function LoginForm() {
|
||||
const formRef = useRef<FormInstance>(null);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [captchaId, setCaptchaId] = useState('');
|
||||
const [captchaImg, setCaptchaImg] = useState('');
|
||||
const [loginParams, setLoginParams, removeLoginParams] =
|
||||
useStorage('loginParams');
|
||||
|
||||
@@ -65,31 +55,6 @@ export default function LoginForm() {
|
||||
|
||||
const [rememberPassword, setRememberPassword] = useState(!!loginParams);
|
||||
|
||||
const refreshCaptcha = useCallback(async () => {
|
||||
try {
|
||||
const { data } = await axios.get<CoolResponse<CoolCaptchaData>>(
|
||||
CAPTCHA_API,
|
||||
{ params: { width: 150, height: 44, color: lightColors.text } }
|
||||
);
|
||||
if (data.code === COOL_OK && data.data?.captchaId && data.data.data) {
|
||||
setCaptchaId(data.data.captchaId);
|
||||
setCaptchaImg(data.data.data);
|
||||
return;
|
||||
}
|
||||
setErrorMessage(data.message || t['login.form.captcha.loadFail']);
|
||||
} catch (error: unknown) {
|
||||
const message =
|
||||
axios.isAxiosError(error) &&
|
||||
error.response?.data &&
|
||||
typeof error.response.data === 'object' &&
|
||||
'message' in error.response.data &&
|
||||
typeof Reflect.get(error.response.data, 'message') === 'string'
|
||||
? String(Reflect.get(error.response.data, 'message'))
|
||||
: t['login.form.captcha.loadFail'];
|
||||
setErrorMessage(message);
|
||||
}
|
||||
}, [t]);
|
||||
|
||||
function afterLoginSuccess(params: LoginFormValues) {
|
||||
if (rememberPassword) {
|
||||
setLoginParams(
|
||||
@@ -112,8 +77,6 @@ export default function LoginForm() {
|
||||
.post<CoolResponse<CoolLoginData>>(LOGIN_API, {
|
||||
username: params.userName,
|
||||
password: params.password,
|
||||
captchaId,
|
||||
verifyCode: params.verifyCode,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.code === COOL_OK && res.data.data?.token) {
|
||||
@@ -122,7 +85,6 @@ export default function LoginForm() {
|
||||
return;
|
||||
}
|
||||
setErrorMessage(res.data.message || t['login.form.login.errMsg']);
|
||||
refreshCaptcha();
|
||||
})
|
||||
.catch((error: unknown) => {
|
||||
const message =
|
||||
@@ -134,7 +96,6 @@ export default function LoginForm() {
|
||||
? String(Reflect.get(error.response.data, 'message'))
|
||||
: t['login.form.login.errMsg'];
|
||||
setErrorMessage(message);
|
||||
refreshCaptcha();
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
@@ -147,10 +108,6 @@ export default function LoginForm() {
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
refreshCaptcha();
|
||||
}, [refreshCaptcha]);
|
||||
|
||||
useEffect(() => {
|
||||
setRememberPassword(!!loginParams);
|
||||
if (formRef.current && loginParams) {
|
||||
@@ -169,12 +126,23 @@ export default function LoginForm() {
|
||||
}, [loginParams, removeLoginParams]);
|
||||
|
||||
return (
|
||||
<div className={styles['login-form-wrapper']}>
|
||||
<div className={styles['login-form-title']}>{t['login.form.title']}</div>
|
||||
<div className={styles['login-form-sub-title']}>
|
||||
{t['login.banner.slogan1']}
|
||||
<div className={styles['login-card']}>
|
||||
<div className={styles['login-card-header']}>
|
||||
<h2 className={styles['login-card-title']}>{t['login.form.title']}</h2>
|
||||
<p className={styles['login-card-sub-title']}>
|
||||
{t['login.form.subTitle']}
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles['login-form-error-msg']}>{errorMessage}</div>
|
||||
|
||||
{errorMessage ? (
|
||||
<div className={styles['login-error-alert']} role="alert">
|
||||
<span className={styles['login-error-dot']} />
|
||||
<span className={styles['login-error-text']}>{errorMessage}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles['login-error-placeholder']} />
|
||||
)}
|
||||
|
||||
<Form
|
||||
className={styles['login-form']}
|
||||
layout="vertical"
|
||||
@@ -184,9 +152,11 @@ export default function LoginForm() {
|
||||
<Form.Item
|
||||
field="userName"
|
||||
rules={[{ required: true, message: t['login.form.userName.errMsg'] }]}
|
||||
className={styles['login-form-item']}
|
||||
>
|
||||
<Input
|
||||
prefix={<IconUser />}
|
||||
size="large"
|
||||
prefix={<IconUser className={styles['input-prefix-icon']} />}
|
||||
placeholder={t['login.form.userName.placeholder']}
|
||||
onPressEnter={onSubmitClick}
|
||||
/>
|
||||
@@ -194,58 +164,39 @@ export default function LoginForm() {
|
||||
<Form.Item
|
||||
field="password"
|
||||
rules={[{ required: true, message: t['login.form.password.errMsg'] }]}
|
||||
className={styles['login-form-item']}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<IconLock />}
|
||||
size="large"
|
||||
prefix={<IconLock className={styles['input-prefix-icon']} />}
|
||||
placeholder={t['login.form.password.placeholder']}
|
||||
onPressEnter={onSubmitClick}
|
||||
/>
|
||||
</Form.Item>
|
||||
<div className={styles['login-form-captcha']}>
|
||||
<Form.Item
|
||||
field="verifyCode"
|
||||
rules={[
|
||||
{ required: true, message: t['login.form.captcha.errMsg'] },
|
||||
]}
|
||||
className={styles['login-form-captcha-item']}
|
||||
>
|
||||
<Input
|
||||
prefix={<IconSafe />}
|
||||
placeholder={t['login.form.captcha.placeholder']}
|
||||
onPressEnter={onSubmitClick}
|
||||
/>
|
||||
</Form.Item>
|
||||
<button
|
||||
type="button"
|
||||
className={styles['login-form-captcha-refresh']}
|
||||
onClick={refreshCaptcha}
|
||||
aria-label={t['login.form.captcha.alt']}
|
||||
>
|
||||
{captchaImg ? (
|
||||
<img
|
||||
src={captchaImg}
|
||||
alt={t['login.form.captcha.alt']}
|
||||
className={styles['login-form-captcha-image']}
|
||||
/>
|
||||
) : (
|
||||
<span className={styles['login-form-captcha-placeholder']}>
|
||||
{t['login.form.captcha.placeholder']}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className={styles['login-form-password-actions']}>
|
||||
<Checkbox checked={rememberPassword} onChange={setRememberPassword}>
|
||||
{t['login.form.rememberPassword']}
|
||||
</Checkbox>
|
||||
<Link className={styles['forgot-password-link']}>
|
||||
{t['login.form.forgetPassword']}
|
||||
</Link>
|
||||
</div>
|
||||
<Space size={16} direction="vertical">
|
||||
<div className={styles['login-form-password-actions']}>
|
||||
<Checkbox checked={rememberPassword} onChange={setRememberPassword}>
|
||||
{t['login.form.rememberPassword']}
|
||||
</Checkbox>
|
||||
<Link>{t['login.form.forgetPassword']}</Link>
|
||||
</div>
|
||||
<Button type="primary" long onClick={onSubmitClick} loading={loading}>
|
||||
|
||||
<Space size={16} direction="vertical" className={styles['action-space']}>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
long
|
||||
onClick={onSubmitClick}
|
||||
loading={loading}
|
||||
className={styles['login-primary-btn']}
|
||||
>
|
||||
{t['login.form.login']}
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
size="large"
|
||||
long
|
||||
className={styles['login-form-register-btn']}
|
||||
>
|
||||
|
||||
@@ -1,40 +1,86 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React, { useContext, useEffect } from 'react';
|
||||
import { Select } from '@arco-design/web-react';
|
||||
import { IconLanguage } from '@arco-design/web-react/icon';
|
||||
import Footer from '@/components/Footer';
|
||||
import Logo from '@/assets/logo.svg';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import { GlobalContext } from '@/context';
|
||||
import LoginForm from './form';
|
||||
import LoginBanner from './banner';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
function Login() {
|
||||
const t = useLocale();
|
||||
const { lang, setLang } = useContext(GlobalContext);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.setAttribute('arco-theme', 'light');
|
||||
}, []);
|
||||
|
||||
const handleLangChange = (value: string) => {
|
||||
if (setLang) {
|
||||
setLang(value);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.logo}>
|
||||
<Logo />
|
||||
<div className={styles['logo-text']}>{t['common.app_name']}</div>
|
||||
</div>
|
||||
<div className={styles.banner}>
|
||||
<div className={styles['banner-inner']}>
|
||||
<LoginBanner />
|
||||
{/* 移动端顶栏（当左侧Banner隐藏时生效） */}
|
||||
<div className={styles['mobile-header']}>
|
||||
<div className={styles['mobile-brand']}>
|
||||
<div className={styles['logo-badge']}>
|
||||
<Logo className={styles['logo-svg']} />
|
||||
</div>
|
||||
<span className={styles['brand-name']}>OmniCard</span>
|
||||
<span className={styles['brand-tag']}>AI</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<div className={styles['content-inner']}>
|
||||
<LoginForm />
|
||||
</div>
|
||||
<div className={styles.footer}>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
{/* 右上角多语言切换入口 */}
|
||||
<div className={styles['lang-container']}>
|
||||
<Select
|
||||
size="small"
|
||||
value={lang || 'zh-CN'}
|
||||
onChange={handleLangChange}
|
||||
triggerElement={
|
||||
<button
|
||||
type="button"
|
||||
className={styles['lang-btn']}
|
||||
aria-label="Select language"
|
||||
>
|
||||
<IconLanguage className={styles['lang-icon']} />
|
||||
<span className={styles['lang-text']}>
|
||||
{lang === 'en-US' ? 'EN' : '中文'}
|
||||
</span>
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<Select.Option value="zh-CN">简体中文 (zh-CN)</Select.Option>
|
||||
<Select.Option value="en-US">English (en-US)</Select.Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 主体两栏 */}
|
||||
<main className={styles.main}>
|
||||
{/* 左侧品牌与核心能力展板 */}
|
||||
<section className={styles.banner} aria-label="Brand Overview">
|
||||
<div className={styles['banner-inner']}>
|
||||
<LoginBanner />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 右侧居中宽适登录卡片 */}
|
||||
<section className={styles.content} aria-label="Sign in">
|
||||
<div className={styles['content-inner']}>
|
||||
<LoginForm />
|
||||
</div>
|
||||
<footer className={styles.footer}>
|
||||
<Footer />
|
||||
</footer>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Login.displayName = 'LoginPage';
|
||||
|
||||
export default Login;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
const i18n = {
|
||||
'en-US': {
|
||||
'login.form.title': 'Sign in to OmniCard',
|
||||
'login.form.subTitle': 'Global Digital Card & Mobile Mini-site SaaS',
|
||||
'login.form.userName.errMsg': 'Username cannot be empty',
|
||||
'login.form.password.errMsg': 'Password cannot be empty',
|
||||
'login.form.login.errMsg': 'Login error, please refresh and try again',
|
||||
@@ -14,9 +15,21 @@ const i18n = {
|
||||
'login.form.forgetPassword': 'Forgot password',
|
||||
'login.form.login': 'Sign in',
|
||||
'login.form.register': 'Create account',
|
||||
'login.banner.badge': 'GLOBAL ENTERPRISE SAAS',
|
||||
'login.banner.mainTitle': 'The Intelligent Standard for Global Business Identity.',
|
||||
'login.banner.mainSubTitle':
|
||||
'Unifying NFC hardware, mobile mini-sites, and real-time visitor radar for global commerce.',
|
||||
'login.banner.card1.title': 'Global Reach',
|
||||
'login.banner.card1.metric': '120+',
|
||||
'login.banner.card1.desc': 'Countries with edge network distribution',
|
||||
'login.banner.card2.title': 'Visitor Radar',
|
||||
'login.banner.card2.metric': 'Real-time',
|
||||
'login.banner.card2.desc': 'Intent scoring & lead journey insights',
|
||||
'login.banner.card3.title': 'Enterprise Shield',
|
||||
'login.banner.card3.metric': 'GDPR & SOC2',
|
||||
'login.banner.card3.desc': 'Bank-grade encryption & privacy safeguards',
|
||||
'login.banner.slogan1': 'Digital cards for global business',
|
||||
'login.banner.subSlogan1':
|
||||
'NFC tap or scan to open. No app required.',
|
||||
'login.banner.subSlogan1': 'NFC tap or scan to open. No app required.',
|
||||
'login.banner.slogan2': 'Visitor radar and lightweight CRM',
|
||||
'login.banner.subSlogan2':
|
||||
'See who visits, how long they stay, and who is ready to talk',
|
||||
@@ -25,6 +38,7 @@ const i18n = {
|
||||
},
|
||||
'zh-CN': {
|
||||
'login.form.title': '登录 OmniCard',
|
||||
'login.form.subTitle': '全球智能数字名片与出海访客雷达中枢',
|
||||
'login.form.userName.errMsg': '用户名不能为空',
|
||||
'login.form.password.errMsg': '密码不能为空',
|
||||
'login.form.login.errMsg': '登录出错，请刷新重试',
|
||||
@@ -38,6 +52,19 @@ const i18n = {
|
||||
'login.form.forgetPassword': '忘记密码',
|
||||
'login.form.login': '登录',
|
||||
'login.form.register': '注册账号',
|
||||
'login.banner.badge': '全球出海企业级数字身份',
|
||||
'login.banner.mainTitle': '下一代全球商务智能数字名片',
|
||||
'login.banner.mainSubTitle':
|
||||
'集 NFC 实体卡管理、Bento Grid 微官网与实时访客雷达于一体的出海智能平台。',
|
||||
'login.banner.card1.title': '全球覆盖',
|
||||
'login.banner.card1.metric': '120+',
|
||||
'login.banner.card1.desc': '国家与地区，边缘节点毫秒分发',
|
||||
'login.banner.card2.title': '访客雷达',
|
||||
'login.banner.card2.metric': '实时捕获',
|
||||
'login.banner.card2.desc': '停留轨迹追踪与客商意向度量化',
|
||||
'login.banner.card3.title': '企业级安全',
|
||||
'login.banner.card3.metric': 'GDPR & SOC2',
|
||||
'login.banner.card3.desc': '银行级数据传输加密与隐私合规',
|
||||
'login.banner.slogan1': '全球商务智能数字名片',
|
||||
'login.banner.subSlogan1': 'NFC 触碰或扫码即开，无需下载',
|
||||
'login.banner.slogan2': '访客雷达与轻量 CRM',
|
||||
|
||||
@@ -1,158 +1,516 @@
|
||||
// OmniCard 登录页面样式规范 (瑞士国际主义 + 现代 SaaS + 编辑感)
|
||||
// 严格遵循 AGENTS.md Token 与 /ui-ux-pro-max 规范
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
background-color: var(--omni-color-surface, #f8fafc);
|
||||
position: relative;
|
||||
font-family: var(--omni-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 550px;
|
||||
background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
|
||||
// 移动端顶栏 (默认隐藏，小屏展示)
|
||||
.mobile-header {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 56px;
|
||||
padding: 0 20px;
|
||||
align-items: center;
|
||||
z-index: 15;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid var(--omni-color-border, #e3e7ed);
|
||||
|
||||
.mobile-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.logo-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
.logo-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--omni-color-text, #101828);
|
||||
}
|
||||
|
||||
.brand-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: rgba(11, 92, 255, 0.1);
|
||||
border: 1px solid rgba(11, 92, 255, 0.3);
|
||||
color: var(--omni-color-primary, #0b5cff);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 右上角多语言切换器
|
||||
.lang-container {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 32px;
|
||||
z-index: 20;
|
||||
|
||||
.lang-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--omni-color-border, #e3e7ed);
|
||||
color: var(--omni-color-text, #101828);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||
transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
background: #f1f5f9;
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--omni-color-primary, #0b5cff);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.lang-icon {
|
||||
font-size: 14px;
|
||||
color: var(--omni-color-text-2, #667085);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 主体双栏
|
||||
.main {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 左侧品牌展板
|
||||
.banner {
|
||||
width: 520px;
|
||||
min-width: 500px;
|
||||
height: 100%;
|
||||
background: #0b0d10;
|
||||
border-right: 1px solid #1e293b;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
padding: 48px;
|
||||
|
||||
// 瑞士精密微网格线 (微弱低调，无大面积霓虹渐变)
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 36px 36px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
&-inner {
|
||||
position: relative;
|
||||
padding-bottom: 40px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&-board {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
// 品牌标识
|
||||
.brand-identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.logo-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
.logo-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: #f2f4f7;
|
||||
}
|
||||
|
||||
.brand-tag {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding: 3px 6px;
|
||||
border-radius: 6px;
|
||||
background: rgba(11, 92, 255, 0.2);
|
||||
border: 1px solid rgba(11, 92, 255, 0.4);
|
||||
color: #4d8dff;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
&-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: fit-content;
|
||||
padding: 4px 10px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 9999px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
|
||||
&-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--omni-color-success, #12b76a);
|
||||
box-shadow: 0 0 6px rgba(18, 183, 106, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
&-headline {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.02em;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
&-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
&-metric-card {
|
||||
background: #12151a;
|
||||
border: 1px solid #262b33;
|
||||
border-radius: 12px;
|
||||
padding: 14px 18px;
|
||||
transition: transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 150ms ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #334155;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
&-metric-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&-metric-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #4d8dff;
|
||||
}
|
||||
|
||||
&-metric-number {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #f8fafc;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
&-metric-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&-metric-desc {
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
&-footer-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-top: 4px;
|
||||
|
||||
.banner-quote-line {
|
||||
width: 20px;
|
||||
height: 1px;
|
||||
background: #334155;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 右侧内容区 (浅灰底板，呼吸感居中)
|
||||
.content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 32px 24px 20px;
|
||||
background-color: var(--omni-color-surface, #f8fafc);
|
||||
overflow-y: auto;
|
||||
|
||||
&-inner {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
// 登录主卡片 (420px 宽适大气，瑞士国际主义白底卡片)
|
||||
.login-card {
|
||||
width: 420px;
|
||||
max-width: 100%;
|
||||
padding: 40px 36px;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--omni-color-border, #e3e7ed);
|
||||
box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 20px 32px -12px rgba(16, 24, 40, 0.04);
|
||||
|
||||
&-text {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
font-size: 20px;
|
||||
color: var(--color-fill-1);
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-inner {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
height: 100%;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
color: var(--color-fill-1);
|
||||
}
|
||||
|
||||
&-sub-title {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
&-image {
|
||||
margin-top: 30px;
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
&-wrapper {
|
||||
width: 320px;
|
||||
&-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-1);
|
||||
line-height: 32px;
|
||||
font-weight: 600;
|
||||
color: var(--omni-color-text, #101828);
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
&-sub-title {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: var(--color-text-3);
|
||||
margin: 8px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--omni-color-text-2, #667085);
|
||||
}
|
||||
}
|
||||
|
||||
// 错误提示条
|
||||
.login-error-alert {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: #fef3f2;
|
||||
border: 1px solid #fee4e2;
|
||||
color: var(--omni-color-error, #f04438);
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
|
||||
.login-error-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--omni-color-error, #f04438);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-error-placeholder {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
// 表单项定制
|
||||
.login-form {
|
||||
&-item {
|
||||
margin-bottom: 20px;
|
||||
|
||||
:global(.arco-input-inner-wrapper) {
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
border-color: var(--omni-color-border, #e3e7ed);
|
||||
background-color: #ffffff;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--omni-color-primary, #0b5cff);
|
||||
box-shadow: 0 0 0 2px var(--omni-color-primary-soft, #eaf1ff);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.arco-input) {
|
||||
font-size: 14px;
|
||||
color: var(--omni-color-text, #101828);
|
||||
}
|
||||
}
|
||||
|
||||
&-error-msg {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: rgb(var(--red-6));
|
||||
.input-prefix-icon {
|
||||
font-size: 16px;
|
||||
color: var(--omni-color-text-2, #667085);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&-password-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
font-size: 13px;
|
||||
|
||||
:global(.arco-checkbox) {
|
||||
font-size: 13px;
|
||||
color: var(--omni-color-text-2, #667085);
|
||||
}
|
||||
|
||||
.forgot-password-link {
|
||||
font-size: 13px;
|
||||
color: var(--omni-color-text-2, #667085);
|
||||
cursor: pointer;
|
||||
transition: color 150ms ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--omni-color-primary, #0b5cff);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-space {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-primary-btn {
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
background-color: var(--omni-color-primary, #0b5cff);
|
||||
border-color: var(--omni-color-primary, #0b5cff);
|
||||
box-shadow: 0 1px 2px rgba(11, 92, 255, 0.16);
|
||||
transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
background-color: #004ed6;
|
||||
border-color: #004ed6;
|
||||
}
|
||||
}
|
||||
|
||||
&-register-btn {
|
||||
color: var(--color-text-3) !important;
|
||||
}
|
||||
|
||||
&-captcha {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&-captcha-item {
|
||||
flex: 1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&-captcha-refresh {
|
||||
width: 120px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--color-border-2);
|
||||
border-radius: 12px;
|
||||
background: var(--color-fill-1);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--omni-color-text-2, #667085) !important;
|
||||
transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
|
||||
&-captcha-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&-captcha-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
&:hover {
|
||||
background-color: #f1f5f9 !important;
|
||||
color: var(--omni-color-text, #101828) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 1024px) {
|
||||
.banner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-card {
|
||||
width: 100%;
|
||||
padding: 24px 20px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.lang-container {
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户