refactor: login page responsive design

d3george · Oct 9, 2023 · ee75717 · ee75717
1 parent c807832
commit ee75717
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
     <title>Slash Admin</title>
   </head>
   <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/src/pages/sys/login/Login.tsx b/src/pages/sys/login/Login.tsx
@@ -30,21 +30,21 @@ function Login() {
   const bg = `linear-gradient(${gradientBg}, ${gradientBg}) center center / cover no-repeat,url(/src/assets/images/background/overlay_2.jpg)`;
 
   return (
-    <Layout className="relative flex !min-h-screen !flex-row">
+    <Layout className="relative flex !min-h-screen !w-full !flex-row">
       <div
-        className="hidden grow flex-col items-center justify-center gap-[80px] bg-center  bg-no-repeat xl:flex"
+        className="hidden grow flex-col items-center justify-center gap-[80px] bg-center  bg-no-repeat md:flex"
         style={{
           background: bg,
         }}
       >
-        <div className="text-2xl font-bold leading-normal lg:text-3xl xl:text-4xl">Slash Admin</div>
-        <img className="max-w-[720px]" src={DashboardImg} alt="" />
+        <div className="text-3xl font-bold leading-normal lg:text-4xl xl:text-5xl">Slash Admin</div>
+        <img className="max-w-[480px] xl:max-w-[560px]" src={DashboardImg} alt="" />
         <Typography.Text className="flex flex-row gap-[16px] text-2xl">
           {t('sys.login.signInSecondTitle')}
         </Typography.Text>
       </div>
 
-      <div className="mx-auto flex w-full  max-w-[480px] flex-col px-[16px] py-[120px] lg:px-[64px] lg:py-[240px]">
+      <div className="mx-auto flex !h-screen w-full max-w-[480px] flex-col px-[16px] py-[120px] lg:px-[64px] lg:py-[240px]">
         <LoginStateProvider>
           <LoginForm />
           <MobileForm />