移动搜索按钮

youxiurui · Sep 4, 2023 · 2fa3c0f · 2fa3c0f
1 parent 2e9dbd1
commit 2fa3c0f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/src/pages/home/header/Header.tsx b/src/pages/home/header/Header.tsx
@@ -15,6 +15,8 @@ import { bus } from "~/utils"
 import { Layout } from "./layout"
 import { isMac } from "~/utils/compatibility"
 
+import "./serch.css"
+
 export const Header = () => {
   const logos = getSetting("logo").split("\n")
   const logo = useColorModeValue(logos[0], logos.pop())
@@ -42,7 +44,7 @@ export const Header = () => {
           <HStack class="header-right" spacing="$2">
             <Show when={objStore.state === State.Folder}>
               <Show when={getSetting("search_index") !== "none"}>
-                <HStack
+                {/* <HStack
                   bg="$neutral4"
                   w="$32"
                   p="$2"
@@ -57,12 +59,19 @@ export const Header = () => {
                     bus.emit("tool", "search")
                   }}
                 >
-                  <Icon as={BsSearch} />
                   <HStack>
                     {isMac ? <Kbd>Cmd</Kbd> : <Kbd>Ctrl</Kbd>}
                     <Kbd>F</Kbd>
                   </HStack>
-                </HStack>
+                </HStack> */}
+                <div class="serch">
+                  <Icon
+                    onClick={() => {
+                      bus.emit("tool", "search")
+                    }}
+                    as={BsSearch}
+                  />
+                </div>
               </Show>
               <Layout />
             </Show>

diff --git a/src/pages/home/header/serch.css b/src/pages/home/header/serch.css
@@ -0,0 +1,13 @@
+.serch {
+  position: fixed;
+  right: 10px;
+  top: 110px;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--hope-radii-lg);
+  background-color: rgb(214, 232, 251);
+  text-align: center;
+  color: rgb(24, 144, 255);
+  line-height: 30px;
+  cursor: pointer;
+}