upp

web/src/views/Search/index.vue

@@ -61,11 +61,14 @@
       aria-label
       aria-description="You've reached the content area of the Search results page, please use the tab key to navigate through the content."
     >
-      <div v-for="item in tabData" :key="item.id">
+      <div
+        v-for="(item, index) in tabData"
+        :key="item.id"
+        :class="{ active: cut === item.cut }"
+        @click="cutCom(item.cut)"
+      >
         <span
-          :class="{ active: cut === item.cut }"
           class="txt"
-          @click="cutCom(item.cut)"
           @keydown.enter.passive="cutCom(item.cut)"
           tabindex="0"
           aria-label="Link"
@@ -73,6 +76,7 @@
           {{ item.name }}
         </span>
         <span v-if="item.id !== 11"> | </span>
+        <div class="nameNum">({{ numAll[index] }})</div>
       </div>
       <div
         class="more"
@@ -112,6 +116,24 @@ import About from "./About.vue";
 import Events from "./Events.vue";
 import Terms from "./Terms.vue";
 import Employment from "./Employment.vue";
+
+// 每个模块的数据
+import {
+  Visit as tabData1,
+  Exhibitions as tabData2,
+  Collections as tabData3,
+  LearnEngage as tabData4,
+  Publications as tabData5,
+  Join as tabData6,
+  About as tabData7,
+  Events as tabData8,
+  Terms as tabData9,
+  Employment as tabData10,
+} from "./data.js";
+
+// 所有数据
+import { dataAll as tabDataAll } from "./dataAll.js";
+
 export default {
   name: "Search",
   components: {
@@ -143,6 +165,20 @@ export default {
         { id: 6, name: "Research & Publications", cut: "Research" },
         { id: 7, name: "Join & Support", cut: "Join" },
       ],
+      // -----------------------
+      numAll: [
+        tabDataAll.length,
+        tabData1.length,
+        tabData2.length,
+        tabData3.length,
+        tabData4.length,
+        tabData5.length,
+        tabData6.length,
+        tabData7.length,
+        tabData8.length,
+        tabData9.length,
+        tabData10.length,
+      ],
     };
   },
   //监听属性 类似于data概念
@@ -151,9 +187,53 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    dataRes(data, txt) {
+      const arr = data.filter((v) => {
+        return (
+          v.h3.toLowerCase().includes(txt.toLowerCase()) ||
+          v.p.toLowerCase().includes(txt.toLowerCase())
+        );
+      });
+      return arr.length;
+    },
+
+    // 获取数据的长度
+    lengthRes(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4) {
+        this.numAll = [
+          tabDataAll.length,
+          tabData1.length,
+          tabData2.length,
+          tabData3.length,
+          tabData4.length,
+          tabData5.length,
+          tabData6.length,
+          tabData7.length,
+          tabData8.length,
+          tabData9.length,
+          tabData10.length,
+        ];
+        return;
+      }
+      const arr = [];
+      arr.push(this.dataRes(tabDataAll, txt));
+      arr.push(this.dataRes(tabData1, txt));
+      arr.push(this.dataRes(tabData2, txt));
+      arr.push(this.dataRes(tabData3, txt));
+      arr.push(this.dataRes(tabData4, txt));
+      arr.push(this.dataRes(tabData5, txt));
+      arr.push(this.dataRes(tabData6, txt));
+      arr.push(this.dataRes(tabData7, txt));
+      arr.push(this.dataRes(tabData8, txt));
+      arr.push(this.dataRes(tabData9, txt));
+      arr.push(this.dataRes(tabData10, txt));
+      this.numAll = arr;
+    },
+
     // 点击搜索
     searchBtn() {
       this.$nextTick(() => {
+        this.lengthRes(this.txt);
         this.$refs.comSon.searchBtn(this.txt);
       });
     },
@@ -259,23 +339,34 @@ export default {
     border: 1px solid #c8c8c8;
     margin: 0 auto 20px;
     box-sizing: border-box;
-    padding: 20px;
+    padding: 10px 20px 30px;
     & > div {
       display: flex;
       align-items: center;
+      position: relative;
+      color: #a6a6a6;
+
       & > span {
         font-size: 14px;
         font-weight: bold;
-        color: #a6a6a6;
       }
       .txt {
         cursor: pointer;
         padding: 0 10px;
       }
-      .active {
-        color: black;
+
+      .nameNum {
+        cursor: pointer;
+        font-size: 12px;
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        transform: translateX(-50%);
       }
     }
+    .active {
+      color: black;
+    }
     .more {
       margin-left: 10px;
       cursor: pointer;