feat: pc端增加搜索

liuxingyu521 · Aug 15, 2022 · efdffae · efdffae
1 parent 6cc589e
commit efdffae
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/components/search/index.vue b/src/components/search/index.vue
@@ -32,7 +32,7 @@ const handleOpenLink = (link: ILink) => {
 </script>
 
 <template>
-  <span class="search" @click="handleOpenSearch"
+  <span class="search" title="站内搜索" @click="handleOpenSearch"
     ><i class="fa-search"></i
   ></span>
 
@@ -81,6 +81,7 @@ const handleOpenLink = (link: ILink) => {
   justify-content: center;
   border-radius: 50%;
   font-size: 15px;
+  cursor: pointer;
   &:hover {
     background: rgba(255, 255, 255, 0.1);
   }

diff --git a/src/layout/webstack/index.vue b/src/layout/webstack/index.vue
@@ -41,8 +41,11 @@ const sideMenus = props.menus.concat({
   <SideNav v-model:isActive="isSideNavActive" :menus="sideMenus" />
   <div class="nav-container">
     <div class="nav-container__top">
+      <Search />
+    </div>
+    <div class="nav-container__top--mobile">
       <Logo />
-      <div class="nav-container__top-right">
+      <div class="nav-container__top--mobile-right">
         <Search />
         <span class="menu" @click="toggleSideNav">
           <i class="fa-bars fa-lg" />
@@ -82,21 +85,35 @@ const sideMenus = props.menus.concat({
   }
 
   &__top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 20px;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .search {
+      color: #333;
+    }
+  }
+
+  &__top--mobile {
     position: absolute;
     height: 90px;
     top: 0;
     left: 0;
     width: 100%;
     background: #2c2e2f;
-    display: flex;
     padding: 0 30px;
     justify-content: space-between;
     align-items: center;
     transition: all 0.5s ease-in-out;
-    opacity: 0;
+    display: none;
 
     @media (max-width: 1000px) {
-      opacity: 1;
+      display: flex;
     }
 
     &-right {