feat:desktop background layout (#3785)

Signed-off-by: jingyang <3161362058@qq.com>
labring · Aug 29, 2023 · 24bd698 · 24bd698
1 parent 460e44c
commit 24bd698
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git a/frontend/desktop/src/components/desktop_content/index.tsx b/frontend/desktop/src/components/desktop_content/index.tsx
@@ -69,13 +69,7 @@ export default function DesktopContent(props: any) {
   }, [openDesktopApp]);
 
   return (
-    <Box
-      id="desktop"
-      className={styles.desktop}
-      backgroundImage={'url(/images/background.svg)'}
-      backgroundRepeat={'no-repeat'}
-      backgroundSize={'cover'}
-    >
+    <Box id="desktop" className={styles.desktop}>
       <Flex w="100%" h="100%" alignItems={'center'} flexDirection={'column'}>
         <Box mt="12vh" minW={'508px'}>
           <TimeComponent />

diff --git a/frontend/desktop/src/components/layout/index.module.scss b/frontend/desktop/src/components/layout/index.module.scss
diff --git a/frontend/desktop/src/components/layout/index.tsx b/frontend/desktop/src/components/layout/index.tsx
@@ -1,5 +1,5 @@
+import { Box } from '@chakra-ui/react';
 import Head from 'next/head';
-import styles from './index.module.scss';
 
 export default function Layout(props: any) {
   return (
@@ -8,7 +8,17 @@ export default function Layout(props: any) {
         <title>sealos Cloud</title>
         <meta name="description" content="sealos cloud dashboard" />
       </Head>
-      <div className={styles.desktopContainer}>{props.children}</div>
+      <Box
+        position={'relative'}
+        width={'100vw'}
+        height={'100vh'}
+        overflow={'hidden'}
+        backgroundImage={'url(/images/background.svg)'}
+        backgroundRepeat={'no-repeat'}
+        backgroundSize={'cover'}
+      >
+        {props.children}
+      </Box>
     </>
   );
 }