style: optimize layout header, footer, search ui

Author: uniquemo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-netease-music",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "基于React、TypeScript的高仿网易云mac客户端播放器",
   "main": "index.js",
   "scripts": {

src/components/Layout/Footer/style.module.css

@@ -11,7 +11,7 @@
   padding: 10px;
   position: fixed;
   bottom: 0;
-  border-top: 2px solid rgb(245, 245, 245);
+  box-shadow: 0 3px 12px 0 rgb(0 0 0 / 12%);
   display: flex;
   justify-content: space-between;
   background-color: #fff;

src/components/Layout/Header/Searcher/style.module.css

@@ -1,5 +1,4 @@
 @value colors: '~styles/colors.module.css';
-@value borderColor from colors;
 
 @value constants: '~styles/constants.module.css';
 @value footerHeight, headerHeight from constants;
@@ -33,8 +32,7 @@
   right: 0;
   top: headerHeight;
   transform: translate(100%, 0);
-  border-left: 1px solid borderColor;
-  box-shadow: 0 0 5px #fff;
+  box-shadow: 0 6px 12px 0 rgb(0 0 0 / 12%);
   background-color: #fff;
   transition: transform 0.3s ease;
 }

src/components/Layout/Header/style.module.css

@@ -6,6 +6,7 @@
   min-width: bodyMinWidth;
   height: headerHeight;
   background-color: rgba(248, 248, 248, 0.95);
+  box-shadow: 0 1px 10px 1px rgb(0 0 0 / 12%);
   position: fixed;
   top: 0;
   display: flex;