9ee3192c49
- 新增 DesktopNoticeModal 组件用于显示活动公告 - 将登录模态框默认状态改为开启 - 重构用户信息模态框界面布局和样式 - 添加底部填充设计工具类 pb-design-* - 隐藏系统滚动条样式以提升视觉效果 - 在PC入口组件中集成公告模态框并暂时禁用登录和用户信息模态框
102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
import { motion } from 'motion/react'
|
|
import { useState } from 'react'
|
|
import loginBg from '@/assets/system/login-bg.webp'
|
|
import rightImg from '@/assets/system/right.webp'
|
|
import { CenterModal } from '@/components/center-modal.tsx'
|
|
import { SmartImage } from '@/components/smart-image.tsx'
|
|
|
|
function DesktopLoginModal() {
|
|
const [open, setOpen] = useState(true)
|
|
|
|
function handleSubmit() {
|
|
setOpen(false)
|
|
}
|
|
|
|
return (
|
|
<CenterModal
|
|
open={open}
|
|
onClose={() => {}}
|
|
title={<div className={'modal-title-glow'}>登录</div>}
|
|
titleAlign="center"
|
|
className={'w-design-980 h-design-540'}
|
|
>
|
|
<div
|
|
className={
|
|
'flex flex-col items-center justify-between gap-design-20 px-design-20'
|
|
}
|
|
>
|
|
<div
|
|
className={
|
|
'h-design-375 flex flex-col gap-design-45 w-full bg-[#060B0F]/50 p-design-50'
|
|
}
|
|
>
|
|
<div className={'flex items-center'}>
|
|
<div
|
|
className={
|
|
'w-design-160 shrink-0 text-left text-design-24 text-[#58ADAF]'
|
|
}
|
|
>
|
|
Akun/TEL:
|
|
</div>
|
|
<input
|
|
className={'flex-1 text-left'}
|
|
placeholder={'Silakan masukkan akun atau nomor ponsel Anda.'}
|
|
/>
|
|
</div>
|
|
<div className={'flex items-center'}>
|
|
<div
|
|
className={
|
|
'w-design-160 shrink-0 text-left text-design-24 text-[#58ADAF]'
|
|
}
|
|
>
|
|
Kata Sandi:
|
|
</div>
|
|
<input
|
|
className={'flex-1 text-left'}
|
|
placeholder={'Masukkan Kata Sandi'}
|
|
/>
|
|
</div>
|
|
<div className={'flex items-center justify-around'}>
|
|
<div className={'flex items-center gap-design-10'}>
|
|
<div
|
|
className={
|
|
'flex items-center justify-center bg-[#040B0F] border border-[#549195] rounded-md w-design-38 h-design-38'
|
|
}
|
|
>
|
|
<SmartImage alt={'right'} src={rightImg} />
|
|
</div>
|
|
<div className={'text-[#549195]'}>Daftar Akun</div>
|
|
</div>
|
|
<div className={'flex items-center gap-design-10'}>
|
|
<div
|
|
className={
|
|
'flex items-center justify-center bg-[#040B0F] border border-[#549195] rounded-md w-design-38 h-design-38'
|
|
}
|
|
>
|
|
<SmartImage alt={'right'} src={rightImg} />
|
|
</div>
|
|
<div className={'text-[#549195]'}>Ingat Kata Sandi</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<motion.div
|
|
onClick={handleSubmit}
|
|
whileTap={{ scale: 0.95 }}
|
|
style={{
|
|
backgroundImage: `url(${loginBg})`,
|
|
backgroundSize: '100% 100%',
|
|
}}
|
|
className={
|
|
'w-design-390 h-design-110 flex items-center justify-center text-design-32 modal-title-glow font-bold cursor-pointer'
|
|
}
|
|
>
|
|
MASUK
|
|
</motion.div>
|
|
</div>
|
|
</CenterModal>
|
|
)
|
|
}
|
|
|
|
export default DesktopLoginModal
|