60 lines
2.3 KiB
JavaScript
Executable File
60 lines
2.3 KiB
JavaScript
Executable File
import React from 'react';
|
||
import { FiLogIn, FiShield } from 'react-icons/fi';
|
||
import { ENV_CONFIG } from '../config/env';
|
||
import { PageWrapper } from '../styles/shared';
|
||
|
||
const logoSrc = '/assets/logo.png';
|
||
|
||
const LoginPage = () => {
|
||
const callbackUrl = `${window.location.origin}/auth/callback`;
|
||
const ssoUrl = `${ENV_CONFIG.AUTH_URL}/?redirect_uri=${encodeURIComponent(callbackUrl)}&client_id=${ENV_CONFIG.CLIENT_ID}&client_name=${encodeURIComponent(ENV_CONFIG.CLIENT_NAME)}`;
|
||
|
||
return (
|
||
<PageWrapper className="flex items-center justify-center p-5">
|
||
<div
|
||
className={[
|
||
'bg-white/95 rounded-[20px] px-10 py-12 sm:px-8',
|
||
'shadow-[0_15px_35px_rgba(168,230,207,0.3)]',
|
||
'w-full max-w-[440px]',
|
||
'backdrop-blur-[15px] border border-[rgba(168,230,207,0.3)]',
|
||
'text-center',
|
||
].join(' ')}
|
||
>
|
||
<div className="mb-6">
|
||
<img
|
||
src={logoSrc}
|
||
alt="万象口袋"
|
||
className="w-[72px] h-[72px] rounded-2xl shadow-[0_4px_16px_rgba(129,199,132,0.3)]"
|
||
/>
|
||
</div>
|
||
<h1 className="text-[#2e7d32] text-[28px] font-bold mb-2">欢迎使用万象口袋</h1>
|
||
<p className="text-gray-500 text-[15px] mb-8 leading-relaxed">
|
||
使用萌芽统一账户登录，一个账号畅享所有萌芽系列应用
|
||
</p>
|
||
<a
|
||
href={ssoUrl}
|
||
className={[
|
||
'inline-flex items-center justify-center gap-2.5',
|
||
'w-full px-6 py-4',
|
||
'bg-gradient-to-br from-[#81c784] to-[#66bb6a]',
|
||
'text-white no-underline',
|
||
'border-none rounded-[14px] text-[17px] font-semibold cursor-pointer',
|
||
'transition-all duration-300',
|
||
'shadow-[0_4px_20px_rgba(129,199,132,0.3)]',
|
||
'hover:-translate-y-0.5 hover:shadow-[0_8px_30px_rgba(129,199,132,0.4)]',
|
||
].join(' ')}
|
||
>
|
||
<FiLogIn size={20} />
|
||
使用萌芽账户登录
|
||
</a>
|
||
<div className="mt-6 flex items-center justify-center gap-1.5 text-gray-400 text-sm">
|
||
<FiShield size={14} />
|
||
由萌芽账户认证中心提供安全认证
|
||
</div>
|
||
</div>
|
||
</PageWrapper>
|
||
);
|
||
};
|
||
|
||
export default LoginPage;
|