feats

src/index.less

@@ -4,6 +4,74 @@ html, body, #root {
   margin: 0;
 }
 
+body {
+  background-color: #F5F8FF;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 300px;
+    height: 300px;
+    border-radius: 50%;
+    background-image: linear-gradient(135deg, #EBF2FF, #C3DAFB);
+    left: 0;
+    top: 0;
+    animation: toright 40s linear infinite alternate;
+  }
+
+  @keyframes toright {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    50% {
+      transform: translate3d(calc(100vw - 300px), 30vh, 0);
+    }
+
+    100% {
+      transform: translate3d(50vw, calc(100vh - 300px), 0);
+    }
+  }
+  
+  &::after {
+    content: '';
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background-image: linear-gradient(-45deg, #EBF2FF, #C3DAFB);
+    right: 0;
+    bottom: 100px;
+    z-index: 0;
+    animation: toleft 40s linear 2s infinite alternate;
+  }
+  
+
+  @keyframes toleft {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    50% {
+      transform: translate3d(calc(-100vw + 200px), -30vh, 0);
+    }
+
+    100% {
+      transform: translate3d(-50vw, calc(-100vh + 200px), 0);
+    }
+  }
+
+  #root {    
+    position: relative;
+    backdrop-filter: blur(4px);
+    z-index: 1;
+  }
+
+  .ant-layout, .ant-layout-footer {
+    background-color: transparent !important;
+  }
+}
+
 :root {
   --theme-color: #fff;
   --theme-front: #000;
@@ -26,10 +94,6 @@ html, body, #root {
   z-index: 100;
 }
 
-.ant-layout {
-  background-color: #f0f2f5;
-}
-
 .ant-layout-header {
   line-height: var(--header-height);
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
@@ -41,11 +105,19 @@ html, body, #root {
   width: var(--siderbar-width);
   background-color: var(--theme-color);
   color: var(--theme-front);
-  box-shadow: 1px 0 4px 0 rgba(0, 21, 41, 0.08);
+  // box-shadow: 1px 0 4px 0 rgba(0, 21, 41, 0.08);
 
   .ant-menu {
     background: transparent;
   }
+
+  &.ant-layout-sider-light {
+    background: transparent;
+
+    .ant-layout-sider-trigger {
+      background: transparent;
+    }
+  }
 }
 
 

src/layouts/AuthLayout/components/Header/User.jsx

@@ -16,7 +16,7 @@ const ChangePassword = forwardRef((props, ref) => {
   });
 
   return (
-    <Modal title="修改密码" visible={visible} onCancel={() => setVisible(false)}>
+    <Modal title="修改密码" open={visible} onCancel={() => setVisible(false)}>
       <Form
         labelCol={{ span: 8 }}
         wrapperCol={{ span: 16 }}
@@ -58,7 +58,7 @@ const ChangePassword = forwardRef((props, ref) => {
 });
 
 export default (props) => {
-  const menuItems = [
+  const items = [
     {
       key: 'changePassword',
       label: '修改密码',
@@ -74,10 +74,8 @@ export default (props) => {
     }
   };
 
-  const menu = <Menu items={menuItems} onClick={onClick} />;
-
   return (
-    <Dropdown overlay={menu}>
+    <Dropdown menu={{ items, onClick }}>
       <div className="user-info">
         <Avatar size={24} src="https://joeschmoe.io/api/v1/random" />
         <span className='font'>{user.name}</span>

src/layouts/AuthLayout/style.less

@@ -8,7 +8,7 @@
   color: #fff;
 
   &.light {
-    background-color: #fff;
+    background-color: transparent;
     color: #000;
   }