62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import LoginForm from './form';
|
|
import styles from './style/index.module.less';
|
|
|
|
function Login() {
|
|
useEffect(() => {
|
|
document.body.setAttribute('arco-theme', 'light');
|
|
}, []);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles['login-card-wrapper']}>
|
|
{/* 左侧插画区域 */}
|
|
<div className={styles.banner}>
|
|
<div className={styles['banner-inner']}>
|
|
{/* Logo */}
|
|
<div className={styles.logo}>
|
|
<span className={styles['logo-text']}>Coder Admin</span>
|
|
</div>
|
|
|
|
{/* 插画区域 */}
|
|
<div className={styles['illustration-wrapper']}>
|
|
<div className={styles.illustration}>
|
|
{/* 认证卡片 */}
|
|
<div className={styles['auth-card']}>
|
|
<div className={styles['auth-card-header']}>
|
|
<div className={styles['scan-line']}></div>
|
|
</div>
|
|
<div className={styles['auth-card-avatar']}>
|
|
<div className={styles['avatar-circle']}></div>
|
|
</div>
|
|
<div className={styles['auth-card-info']}>
|
|
<div className={styles['info-line']}></div>
|
|
<div className={styles['info-line-short']}></div>
|
|
</div>
|
|
<div className={styles['check-icon']}>✓</div>
|
|
</div>
|
|
{/* 人物剪影 */}
|
|
<div className={styles['person-silhouette']}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 右侧登录表单区域 */}
|
|
<div className={styles.content}>
|
|
<div className={styles['content-wrapper']}>
|
|
<LoginForm />
|
|
<div className={styles.footer}>
|
|
Copyright © 2024 Coder Admin. All Rights Reserved.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Login.displayName = 'LoginPage';
|
|
|
|
export default Login;
|