💄 style(custom): 修改tailwind

src/routers/layout/header.tsx

@@ -26,18 +26,19 @@ const ReactiveHeader = memo(() => {
   return (
     <header className='border-t-2 relative z-10 max-md:border-b-2'>
       {/* 手机端 */}
-      <div className='hidden max-md:flex justify-between ml-8 mr-8'>
+      <div className='hidden max-sm:flex justify-between ml-8 mr-8'>
         <Yituo width={"64px"} height={"30px"} />
         <RouterNav />
       </div>
+      {/* pc端和平板端header部 */}
       <Header_content className={`${styles["header"]} h-20`}>
-        <div className='flex-shrink-0 flex-grow basis-40 max-md:hidden relative z-10'>
+        <div className='flex-shrink-0 flex-grow basis-40 max-sm:hidden 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-md:hidden relative z-10'>
+        <div className='text-gray-400 text-end flex-shrink-0 flex-grow basis-40 max-sm:hidden relative z-10'>
           敬请期待
         </div>
       </Header_content>

src/routers/layout/index.tsx

@@ -35,5 +35,5 @@ export default function Layout() {
 
 const NavContent = () => {
   const isSearchPage = useMatch(`/search`) !== null;
-  return <div className='max-md:hidden'>{!isSearchPage && <MidContent />}</div>;
+  return <div className='max-sm:hidden'>{!isSearchPage && <MidContent />}</div>;
 };

src/routers/layout/logo/index.tsx

@@ -3,6 +3,7 @@ import { useState, useMemo, FC } from "react";
 import { H1, Explain, Yituo } from "./modal";
 import styles from "./logo.module.less";
 import { Storage } from "../tools";
+import { useScreenSize } from "@components/proview/screenSize";
 
 const QAStorage = new Storage("QAUpdate");
 //暂时先这样
@@ -26,10 +27,12 @@ export default function LOGO() {
     set((open) => !open);
     handlerReadedNews();
   };
+  const { md } = useScreenSize();
   return (
     <div className={`${styles["logo"]}`}>
-      <H1>
-        EOEfans-web端
+      <Yituo width={"64px"} height={"30px"} />
+      <H1 className='max-md:font-medium'>
+        {!md ? `EOEfans-web端` : `EOEfans`}
         <Button
           onClick={handlerClick}
           sx={{
@@ -45,7 +48,6 @@ export default function LOGO() {
         </Button>
         <Explain open={open} handlerClick={handlerClick} />
       </H1>
-      <Yituo width={"64px"} height={"30px"} />
     </div>
   );
 }

src/routers/layout/logo/logo.module.less

@@ -1,22 +1,19 @@
 .logo {
     display: flex;
     align-items: center;
-    flex-flow: row-reverse nowrap;
+    flex-flow: row nowrap;
     padding: 5px 0;
-    justify-content: flex-end;
+    position: relative;
 
     a {
         color: inherit;
         text-decoration: none;
     }
 
-
-
     h1 {
         margin: 0;
         white-space: nowrap;
         position: relative;
-        padding-right: 30px;
     }
 
 }

src/routers/layout/logo/modal.tsx

@@ -27,7 +27,7 @@ export const Explain: FC<{ open: boolean; handlerClick: () => void }> = (
 
 export const H1 = styled("h1")(({ theme }) => ({
   fontSize: "24px",
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     fontSize: "15px",
   },
 }));

src/routers/layout/routernav/index.tsx

@@ -23,7 +23,7 @@ export default function RouterNav() {
       <FormatListBulletedIcon fontSize='medium' onClick={handlerChangeShow} />
       <Drawer anchor='right' open={show} onClose={handlerChangeShow}>
         <div className='w-96 max-sm:w-screen'>
-          <div className='p-4 text-gray-600 text-left max-sm:text-right'>
+          <div className='p-4 text-gray-600 text-left'>
             <HighlightOffIcon
               fontSize='medium'
               color='inherit'

src/routers/layout/search/index.tsx

@@ -9,9 +9,11 @@ export default function Search() {
   };
   return (
     <>
-      <div className='visible max-md:hidden'>
+      {/* pc and pad */}
+      <div className='visible max-sm:hidden'>
         <PCSearch />
       </div>
+      <div className='hidden max-sm:block'></div>
     </>
   );
 }

src/routers/layout/search/pc/search.tsx

@@ -32,7 +32,7 @@ export default function Search() {
           onClick={!focused ? onFocus : undefined}
           className={`${styles["search-box"]} ${
             focused ? styles["focus"] : "py-1"
-          } px-2 max-md:m-0 duration-300 max-md:flex-row-reverse relative`}
+          }  duration-300 relative`}
         >
           {searchMode === "搜索tag" && (
             <>
@@ -62,7 +62,7 @@ export default function Search() {
 const SearchButton: FC<{ onSubmit?: () => void }> = ({ onSubmit }) => (
   <button
     type='submit'
-    className={`${styles["search-button"]} bg-red-700 max-md:bg-white max-md:text-gray-900 `}
+    className={`${styles["search-button"]} bg-red-700 `}
     onClick={onSubmit}
   >
     <SearchIcon color='inherit' fontSize='small' />

src/routers/layout/search/phone/index.tsx

@@ -0,0 +1,3 @@
+export default function PhoneSearch() {
+  // 这个只作为因子引出真实的界面，不应该承担任何搜索功能
+}

tailwind.config.cjs

@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        xs: "500px",
+      },
+    },
   },
   plugins: [],
 };