feat: 增加全部作品页 & 小说搜索

src/components/common/Navbar.vue

@@ -2,11 +2,13 @@
   <div class="mainNav" id="mainNav">
     <div class="box_center cf">
       <ul class="nav" id="navModule">
-        <li class="on"><a href="/">首页</a></li>
-        <li><a href="/book/bookclass.html">全部作品</a></li>
+        <li ><a href="/">首页</a></li>
+        <li> <router-link :to="{ name: 'bookClass' }">
+        全部作品
+      </router-link></li>
         <li><a href="/book/book_ranking.html">排行榜</a></li>
-        <li class=""><a href="/pay/index.html">充值</a></li>
-        <li><a href="/author/index.html" target="_blank">作家专区</a></li>
+        <!--<li class=""><a href="/pay/index.html">充值</a></li>
+        <li><a href="/author/index.html" target="_blank">作家专区</a></li>-->
       </ul>
     </div>
   </div>

src/components/common/Top.vue

@@ -1,22 +1,21 @@
  <template>
-
-    <div class="topMain">
-      <div class="box_center cf">
-        <a href="/" class="logo fl"><img :src="logo" alt="小说精品屋" /></a>
-        <div class="searchBar fl">
-          <div class="search cf">
-            <input
-              type="text"
-              placeholder="书名、作者、关键字"
-              class="s_int"
-              name="searchKey"
-              id="searchKey"
-            />
-            <label class="search_btn" id="btnSearch" onclick="searchByK()"
-              ><i class="icon"></i
-            ></label>
-          </div>
+  <div class="topMain">
+    <div class="box_center cf">
+      <a href="/" class="logo fl"><img :src="logo" alt="小说精品屋" /></a>
+      <div class="searchBar fl">
+        <div class="search cf">
+          <input
+            v-model="keyword"
+            type="text"
+            placeholder="书名、作者、关键字"
+            class="s_int"
+          />
+          <label class="search_btn" id="btnSearch" @click="searchByK()"
+            ><i class="icon"></i
+          ></label>
         </div>
+      </div>
+      <!--
         <div class="bookShelf fr" id="headerUserInfo">
           <a class="sj_link" href="/user/favorites.html">我的书架</a>
           <span class="user_link"
@@ -25,19 +24,32 @@
             ><a href="/user/register.html">注册</a></span
           >
         </div>
-      </div>
+        -->
     </div>
- 
-  
+  </div>
 </template>
 
 <script>
 import logo from "@/assets/images/logo.png";
+import { reactive, toRefs, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
 export default {
   name: "Top",
-  setup() {
+  setup(props, context) {
+    const state = reactive({
+      keyword:''
+    })
+    const route = useRoute();
+    const router = useRouter();
+    state.keyword = route.query.key;
+    const searchByK = () => {
+      router.push({ path: '/bookClass',query:{'key':state.keyword}});
+      context.emit('eventSerch',state.keyword);
+    }
     return {
-      logo
+      ...toRefs(state),
+      logo,
+      searchByK
     };
   },
 };