From 2fb65c041d05b24ac8df6379f234f7448d847b47 Mon Sep 17 00:00:00 2001 From: vincentlu <t1341870251@gmail.com> Date: 星期五, 14 二月 2025 11:14:44 +0800 Subject: [PATCH] # --- rsf-admin/src/page/login/index.jsx | 38 ++++++++++++++++++++++++-------------- 1 files changed, 24 insertions(+), 14 deletions(-) diff --git a/rsf-admin/src/page/login/index.jsx b/rsf-admin/src/page/login/index.jsx index 6a70e7a..5fab118 100644 --- a/rsf-admin/src/page/login/index.jsx +++ b/rsf-admin/src/page/login/index.jsx @@ -8,6 +8,8 @@ Typography, Tabs, Tab, + useTheme, + useMediaQuery, } from '@mui/material'; import { useTranslate, @@ -15,21 +17,30 @@ useNotify, } from 'react-admin'; import { LOGIN_BACKGROUND } from '@/config/setting'; -import { tenants } from '@/api/auth'; +import { getSystemInfo, tenants } from '@/api/auth'; import Login from "./Login"; import Register from "./Register"; const Index = () => { const translate = useTranslate(); + const theme = useTheme(); + const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); const [tab, setTab] = useState(0) + const [systemInfo, setSystemInfo] = useState({}); const [tenantList, setTenantList] = useState([]); + const formPosition = isSmallScreen ? 'middle' : 'right' + useEffect(() => { + getSystemInfo().then(data => { + setSystemInfo(data); + }) tenants().then(data => { setTenantList(data); }) }, []); + return ( <Box @@ -37,14 +48,13 @@ display: 'flex', flexDirection: 'column', minHeight: '100vh', - alignItems: 'center', - justifyContent: 'flex-start', - // justifyContent: 'center', + alignItems: formPosition === 'middle' ? 'center' : 'flex-end', + paddingRight: formPosition === 'middle' ? 0 : '6em', + justifyContent: formPosition === 'middle' ? 'flex-start' : 'center', background: `url(/login_bg.jpg)`, // https://unsplash.com/ backgroundRepeat: 'no-repeat', backgroundSize: 'cover', - } - } + }} > <video autoPlay @@ -70,13 +80,13 @@ <Card sx={{ width: 400, - marginTop: '6em', + marginTop: formPosition === 'middle' ? '6em' : 0, zIndex: 1 }}> <div> <AppBar position="static" sx={{ backgroundColor: '#3D4BA7' }}> <Toolbar> - <Typography variant="h6" color="inherit">Welcome</Typography> + <Typography variant="h6" color="inherit">{translate("page.login.title")}</Typography> </Toolbar> </AppBar> </div> @@ -90,15 +100,15 @@ textColor="primary" variant="fullWidth" > - <Tab label="Login" sx={{ fontSize: '.8em' }} /> - <Tab label="Register" sx={{ fontSize: '.8em' }} /> + <Tab label={translate('page.login.tab.login')} sx={{ fontSize: '.8em' }} /> + <Tab label={translate('page.login.tab.register')} sx={{ fontSize: '.8em' }} /> </Tabs> - {tab === 0 && <Login tenantList={tenantList} />} - {tab === 1 && <Register tenantList={tenantList} />} + {tab === 0 && <Login systemInfo={systemInfo} tenantList={tenantList} />} + {tab === 1 && <Register systemInfo={systemInfo} tenantList={tenantList} />} - <Box mt={1} mb={1} sx={{ textAlign: 'center' }}> - <Typography variant="caption" align="center">Footer Goes Here</Typography> + <Box mb={1} sx={{ textAlign: 'center' }}> + <Typography variant="caption" align="center">{translate("page.login.footer")}</Typography> </Box> </Card> </Box > -- Gitblit v1.9.1