主题模糊

youxiurui · Sep 6, 2023 · 27e4831 · 27e4831
1 parent f394ec8
commit 27e4831
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 29 deletions.
diff --git a/src/pages/home/Body.tsx b/src/pages/home/Body.tsx
@@ -7,26 +7,8 @@ import { Container } from "./Container"
 import "./Rui/rui.css"
 
 export const Body = () => {
-  let ishow = false
-  function close(falg) {
-    if (falg) {
-      document.getElementsByClassName("pool")[0].setAttribute("hidden", falg)
-      document.getElementsByClassName("mark")[0].setAttribute("hidden", falg)
-    } else {
-      document.getElementsByClassName("pool")[0].removeAttribute("hidden")
-      document.getElementsByClassName("mark")[0].removeAttribute("hidden")
-    }
-    ishow = falg
-  }
-
   return (
     <Container>
-      <div class="box-icon">
-        <i
-          onClick={() => close(!ishow)}
-          class="iconfont i-icon icon-yonghuxieyi"
-        ></i>
-      </div>
       <VStack
         class="body"
         mt="$1"
@@ -38,14 +20,14 @@ export const Body = () => {
       >
         <Nav />
         <Obj />
-        <div class="mark"></div>
+        {/* <div class="mark"></div>
         <div class="pool">
           <i
             onClick={() => close(!ishow)}
             class="iconfont icon-close icon-guanbi"
           ></i>
           <Readme />
-        </div>
+        </div> */}
       </VStack>
     </Container>
   )

diff --git a/src/pages/home/Layout.tsx b/src/pages/home/Layout.tsx
@@ -1,12 +1,15 @@
 import { Markdown } from "~/components"
 import { useTitle } from "~/hooks"
-import { getSetting } from "~/store"
-import { notify } from "~/utils"
+import { getSetting, getMainColor } from "~/store"
+import { notify, bus } from "~/utils"
 import { Body } from "./Body"
 import { Footer } from "./Footer"
 import { Header } from "./header/Header"
 import { Toolbar } from "./toolbar/Toolbar"
-
+import { Layout } from "./header/layout"
+import { BsSearch } from "solid-icons/bs"
+import { HStack, Icon } from "@hope-ui/solid"
+import { Readme } from "./Readme"
 import "./Rui/rui.css"
 
 const Index = () => {
@@ -15,8 +18,52 @@ const Index = () => {
   if (announcement) {
     notify.render(() => <Markdown children={announcement} />)
   }
+  let ishow = false
+  function close(falg) {
+    if (falg) {
+      document.getElementsByClassName("pool")[0].setAttribute("hidden", falg)
+      document.getElementsByClassName("mark")[0].setAttribute("hidden", falg)
+    } else {
+      document.getElementsByClassName("pool")[0].removeAttribute("hidden")
+      document.getElementsByClassName("mark")[0].removeAttribute("hidden")
+    }
+    ishow = falg
+  }
+
   return (
     <>
+      <Layout />
+      <div class="box-icon">
+        <i
+          onClick={() => close(!ishow)}
+          class="iconfont i-icon icon-yonghuxieyi"
+        ></i>
+      </div>
+      <HStack
+        class="serch"
+        _hover={{
+          bgColor: getMainColor(),
+          color: "white",
+        }}
+        _focus={{
+          outline: "none",
+        }}
+      >
+        <Icon
+          onClick={() => {
+            bus.emit("tool", "search")
+          }}
+          as={BsSearch}
+        />
+      </HStack>
+      <div class="mark"></div>
+      <div class="pool">
+        <i
+          onClick={() => close(!ishow)}
+          class="iconfont icon-close icon-guanbi"
+        ></i>
+        <Readme />
+      </div>
       <div class="exter">
         <Header />
         <Toolbar />

diff --git a/src/pages/home/Rui/rui.css b/src/pages/home/Rui/rui.css
@@ -1,7 +1,20 @@
+body {
+  background-image: url(https://rw.qinzhi.xyz/jiusheng6/jiusheng/main/image/bejin.svg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+.hope-c-PJLV-igScBhH-css {
+  background-color: #e6e6e72b;
+}
 .exter {
-  width: 80vw;
-  position: relative;
+  width: 75vw;
+  position: absolute;
   top: 50px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  border-radius: 30px;
+  backdrop-filter: blur(10px);
+  z-index: 3;
 }
 .serch {
   position: fixed;
@@ -58,7 +71,8 @@
 .pool {
   position: absolute;
   z-index: 999;
-  width: 80vw;
+  width: 75vw;
+  top: 50px;
 }
 .markdown-body > :first-child {
   text-align: center;

diff --git a/src/pages/home/header/Header.tsx b/src/pages/home/header/Header.tsx
@@ -64,7 +64,7 @@ export const Header = () => {
                     <Kbd>F</Kbd>
                   </HStack>
                 </HStack> */}
-                <HStack
+                {/* <HStack
                   class="serch"
                   _hover={{
                     bgColor: getMainColor(),
@@ -80,9 +80,9 @@ export const Header = () => {
                     }}
                     as={BsSearch}
                   />
-                </HStack>
+                </HStack> */}
               </Show>
-              <Layout />
+              {/* <Layout /> */}
             </Show>
           </HStack>
         </HStack>