asder

src/layouts/login/index.jsx

@@ -6,7 +6,11 @@ import "./index.less";
 
 function LoginLayout() {
   return (
-    <div className="wrap">
+    <div className="wrap" style={{
+      backgroundImage: "url(./assets/hd.jpg)",
+
+    }}>
+      <div className="cover"></div>
       <Container
         component="main"
         maxWidth="xs"
@@ -17,10 +21,11 @@ function LoginLayout() {
           padding: 0,
           borderRadius: 12,
           overflow:"hidden",
+          backdropFilter: "blur(4px)"
+
         }}
         borderRadius={2}
       >
-
         <Box
           className="right"
           sx={{

src/layouts/login/index.less

@@ -15,17 +15,16 @@ body {
   justify-content: center;
   width: 100vw;
   height: 100vh;
-  background-image: linear-gradient(
-    145deg,
-    #f7f7f7 0%,
-    #f0f0f0 25%,
-    #c9c9c9 50%,
-    #f0f0f0 75%,
-    #f7f7f7 100%
-  );
-  background-size: 400% 400%;
-  animation: bgmove 20s linear 0s infinite alternate forwards;
+  background-position-y: -6px;
+  .cover{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.2);
+    pointer-events: none;
+  }
 }
+
 @keyframes bgmove {
   0% {
     background-position: 0% 50%;