美化头部样式阴影

src/layouts/Header.less

@@ -1,6 +1,8 @@
 @import '../baseStyle.less';
 
-.header {
+.header-container {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  .header {
     position: relative;
     z-index: 1;
     display: flex;
@@ -11,8 +13,8 @@
     .logo {
       height: 45px;
     }
-}
+
-.header-menu {
+    .header-menu {
       display: flex;
       flex: 1;
       align-items: center;
@@ -21,7 +23,9 @@
         line-height: 58px;
         border: none;
       }
-}
+    }
-.user {
+    .user {
       margin-left: 15px;
+    }
+  }
 }

src/layouts/Header.tsx

@@ -7,10 +7,12 @@ import './Header.less';
 import HeaderMenu from './HeaderMenu';
 const Header: React.FC = (props) => {
   return (
+    <div className="header-container">
       <div className="header">
-      <img className='logo' src={LogoImg} alt="logo" />
+        <img className="logo" src={LogoImg} alt="logo" />
         <HeaderMenu />
       </div>
+    </div>
   );
 };
 export default Header;