💄 style(custom): 修改手机端拉取栏样式

EOEFANS · Feb 27, 2023 · bcf0987 · bcf0987
1 parent 227ede4
commit bcf0987
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 15 deletions.
diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx
@@ -7,7 +7,6 @@ import { changeLoadingCauseByUrl } from "@store/loading";
 import { routerNameToLoading } from "@utils/router";
 import { styled } from "@mui/material";
 import Search from "./search";
-import { Yituo } from "./logo/modal";
 import RouterNav from "./routernav/index";
 export default function Header() {
   const dispatch = useAppDispatch(),
@@ -26,19 +25,19 @@ const ReactiveHeader = memo(() => {
   return (
     <header className='border-t-2 relative z-10 max-md:border-b-2'>
       {/* 手机端 */}
-      <div className='hidden max-sm:flex justify-between ml-8 mr-8'>
-        <Yituo width={"64px"} height={"30px"} />
+      <div className='hidden max-sm:flex px-6 pt-2'>
         <RouterNav />
+        <Search />
       </div>
       {/* pc端和平板端header部 */}
-      <Header_content className={`${styles["header"]} h-20`}>
-        <div className='flex-shrink-0 flex-grow basis-40 max-sm:hidden relative z-10'>
+      <Header_content className={`${styles["header"]} h-20 max-sm:hidden`}>
+        <div className='flex-shrink-0 flex-grow basis-40 relative z-10'>
           <LOGO />
         </div>
         <div className='flex-grow-0 flex-shrink basis-80 h-12 max-md:mx-6 '>
           <Search />
         </div>
-        <div className='text-gray-400 text-end flex-shrink-0 flex-grow basis-40 max-sm:hidden relative z-10'>
+        <div className='text-gray-400 text-end flex-shrink-0 flex-grow basis-40 relative z-10'>
           敬请期待
         </div>
       </Header_content>

diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx
@@ -24,9 +24,9 @@ export default function Layout() {
         <Header />
         <NavContent />
         <Flipped flipId={"container"} spring={"veryGentle"}>
-          <main className='feedContainer'>
+          {/* <main className='feedContainer'>
             <Outlet />
-          </main>
+          </main> */}
         </Flipped>
       </Flipper>
     </>

diff --git a/src/routers/layout/routernav/index.tsx b/src/routers/layout/routernav/index.tsx
@@ -1,8 +1,7 @@
 import { Drawer } from "@mui/material";
 import { useState, FC } from "react";
 import { Link, useMatch } from "react-router-dom";
-import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
-import HighlightOffIcon from "@mui/icons-material/HighlightOff";
+import CloseIcon from "@mui/icons-material/Close";
 import Header_Nav from "../nav";
 export const RouterList: TabProps[] = [
   {
@@ -20,11 +19,23 @@ export default function RouterNav() {
     handlerChangeShow = () => set((item) => !item);
   return (
     <>
-      <FormatListBulletedIcon fontSize='medium' onClick={handlerChangeShow} />
-      <Drawer anchor='right' open={show} onClose={handlerChangeShow}>
-        <div className='w-96 max-sm:w-screen'>
+      <div
+        onClick={handlerChangeShow}
+        className='h-9 w-9 border-2 rounded-full flex justify-center items-center'
+      >
+        <ConfigSVG />
+      </div>
+      <Drawer
+        anchor='bottom'
+        open={show}
+        onClose={handlerChangeShow}
+        PaperProps={{
+          style: { borderTopLeftRadius: "20px", borderTopRightRadius: "20px" },
+        }}
+      >
+        <div className='w-full'>
           <div className='p-4 text-gray-600 text-left'>
-            <HighlightOffIcon
+            <CloseIcon
               fontSize='medium'
               color='inherit'
               onClick={handlerChangeShow}
@@ -36,6 +47,9 @@ export default function RouterNav() {
             onClose={handlerChangeShow}
           />
           <DrawerNavItem title='标签' />
+          <DrawerNavContent title={"用户信息"}>
+            <div className='text-gray-500 text-center mt-2'>敬请期待</div>
+          </DrawerNavContent>
         </div>
       </Drawer>
     </>
@@ -110,3 +124,13 @@ export type TabProps = {
   label: string;
   to: string;
 };
+
+const ConfigSVG = () => (
+  <svg
+    viewBox='0 0 16 16'
+    role='presentation'
+    className='block h-4 w-4 fill-slate-800'
+  >
+    <path d='M5 8c1.306 0 2.418.835 2.83 2H14v2H7.829A3.001 3.001 0 1 1 5 8zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm6-8a3 3 0 1 1-2.829 4H2V4h6.17A3.001 3.001 0 0 1 11 2zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'></path>
+  </svg>
+);
diff --git a/src/routers/layout/search/index.tsx b/src/routers/layout/search/index.tsx
@@ -9,7 +9,6 @@ export default function Search() {
   };
   return (
     <>
-      {/* pc and pad */}
       <div className='visible max-sm:hidden'>
         <PCSearch />
       </div>