up

web/src/router/index.js

@@ -191,6 +191,13 @@ const routes = [
         component: () => import('../views/About/link.vue'),
         meta: { myName: 'About' },
       },
+      // 搜索出来的页面
+      {
+        path: '/Layout/About/President',
+        name: 'AboutPresident',
+        component: () => import('../views/About/President.vue'),
+        meta: { myName: 'About' },
+      },
       // 非顶部导航的事件页面
       {
         path: '/Layout/Events',

web/src/views/About/President.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="AboutPresident">
+    <div class="ban"></div>
+    <div class="pos">
+      <div>
+        <span class="pos1">Your Position:&nbsp;</span>
+        <Router-link to="/Layout/Home">Home></Router-link>
+        <Router-link to="/Layout/About">About></Router-link>
+      </div>
+    </div>
+    <div class="conten">
+      <!-- Exhibition Overview -->
+      <div class="y_box">
+        <div class="title_2">From the President</div>
+        <div class="info">
+          <span class="info_1">z</span>
+          <span class="info_3">c</span>
+        </div>
+        <div class="content_2">
+          <div class="title_3">——<span>Exhibition Overview</span>——</div>
+          <div>
+            <p>
+              The Capital Museum of Chinais a comprehensive museum affiliated
+              with the municipal government of Beijing. It is committed to
+              displaying Beijing's 500,000years of history of human settlement,
+              3,000 years of urban history and 800 years of history as the
+              capital of China. What is more, the museumis responsible for the
+              collection, collation, restoration, research and preservation of
+              the historical and cultural heritage of the Beijing region.
+              Furthermore, it stands asan important site ofcultural exchange
+              between the new Beijing and the larger world.
+            </p>
+            <p>
+              In the Capital Museum's eleven core exhibition rooms lie
+              collections of cultural relicscomprising more than one million
+              tangible and documentary artifacts, including numerous exquisite
+              works of art and precious historical objects. These invaluable
+              relicsserve as collective evidences ofthe robustcreativity and
+              lasting vitalityof the great and ancient nation of China.
+            </p>
+            <p>
+              The three temporary exhibition rooms of the Capital Museum are often used to housefirst-classexhibits from around China and the world. These exhibitions epitomizethe city of Beijing'sreadinessto embracedifferent cultures and peoples from around the globe.At the same time, theyreflect boththe uniformity and the diversity of humanity's historical and cultural development.
+            </p>
+            <p>
+              Friends from home and abroad, we invite you allto visit the website of the Capital Museum and get to know Beijing and China a little better. You are also welcome to visit the Capital Museum to see into the past and present of Beijing and China — and perhaps to seeinto yourselfa little better as well.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="back_btn" @click="$router.push('/Layout/About')">Back to top</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AboutPresident",
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.AboutPresident {
+  .ban {
+    width: 100%;
+    margin: auto;
+    background: url("/data/About/banner.jpg") no-repeat center top #000000;
+    height: 300px;
+  }
+  .pos {
+    height: 56px;
+    width: 100%;
+    font-size: 12px;
+    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
+      #f1f1f1;
+    overflow: hidden;
+    zoom: 1;
+    & > div {
+      height: 56px;
+      line-height: 50px;
+      width: 1180px;
+      overflow: hidden;
+      zoom: 1;
+      margin: 0 auto;
+      .pos1 {
+        color: #c20e11;
+      }
+      & > i {
+        cursor: pointer;
+      }
+    }
+  }
+  .conten {
+    padding-top: 35px;
+    width: 1180px;
+    margin: 0 auto;
+    .y_box {
+      background: #fff;
+      border: 1px solid #e0e0e0;
+      .title_2 {
+        font-size: 22px;
+        line-height: 44px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        padding: 40px 210px 0 40px;
+      }
+      .info {
+        font-size: 14px;
+        line-height: 36px;
+        color: #666;
+        overflow: hidden;
+        zoom: 1;
+        margin-bottom: 20px;
+        padding-left: 40px;
+        & > span {
+          padding: 0 30px;
+          display: block;
+          float: left;
+        }
+        .info_1 {
+          background: url("../../assets/images/bg_5.png") left 8px no-repeat;
+        }
+        .info_3 {
+          background: url("../../assets/images/bg_7.png") left 8px no-repeat;
+        }
+      }
+      .content_2 {
+        background: none;
+        border-top: 1px solid #e0e0e0;
+        padding: 30px 40px;
+        p {
+          font-size: 18px;
+          line-height: 26px;
+          color: #1f1d1d;
+          margin-top: 24px;
+        }
+        .title_3 {
+          font-size: 12px;
+          color: #939393;
+          text-align: center;
+          & > span {
+            font-weight: 700;
+            font-size: 24px;
+            color: #bf2323;
+            text-align: center;
+            padding: 0 20px;
+          }
+        }
+      }
+    }
+  }
+  .back_btn {
+    height: 38px;
+    width: 160px;
+    margin: 30px auto;
+    border: 1px solid #000;
+    font-size: 16px;
+    line-height: 38px;
+    text-align: center;
+    font-weight: bold;
+    cursor: pointer;
+    display: block;
+    background: #f1f1f1;
+  }
+}
+</style>

web/src/views/LearnEngage/index.vue

@@ -236,6 +236,7 @@ export default {
       }
       .active {
         color: #bf2323;
+        pointer-events: none;
       }
     }
   }

web/src/views/Publications/Publications1.vue

@@ -103,6 +103,9 @@ export default {
       window.scrollTo({ top: 1100 });
       }, 100);
     }
+    // 从搜索页跳过来
+    let pInd = this.$route.query.p
+    if(pInd) this.txtInd=Number(pInd)
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},

web/src/views/Search/About.vue

@@ -1,43 +1,111 @@
 <template>
-<div class='SearchAbout'>SearchAbout</div>
+  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="SearchAbout" v-else>
+    <div
+      class="row"
+      v-for="item in data"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <h3 v-html="item.h3"></h3>
+      <p v-html="item.p"></p>
+    </div>
+  </div>
 </template>
 
 <script>
+import { About } from "./data";
 export default {
-name:'SearchAbout',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchAbout",
+  props: {
+    txt: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4) {
+        this.data = [...About];
+      } else {
+        let temp = [];
+        temp = About.filter((v) => {
+          return v.h3.includes(txt) || v.p.includes(txt);
+        });
+        //
+        temp = temp.map((v) => {
+          return {
+            ...v,
+            h3: v.h3.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+            p: v.p.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+          };
+        });
+        this.data = [...temp];
+      }
+      this.$emit("update:num", this.data.length);
+    },
+    searchBtn(txt) {
+      this.getData(txt);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.txt);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.null {
+  font-size: 30px;
+  margin-top: 50px;
+  text-align: center;
+}
+.SearchAbout {
+  padding-bottom: 20px;
+  .row {
+    cursor: pointer;
+    background-color: #fff;
+    border: 1px solid #c8c8c8;
+    margin-bottom: 20px;
+    padding: 20px;
+    zoom: 1;
+    overflow: hidden;
+    & > h3 {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 30px;
+    }
+    & > p {
+      font-size: 14px;
+      color: #a6a6a6;
+      line-height: 24px;
+    }
+  }
+}
 </style>

web/src/views/Search/All.vue

@@ -1,43 +1,190 @@
 <template>
-<div class='SearchAll'>SearchAll</div>
+  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="SearchAll" v-else>
+    <div
+      class="row"
+      v-for="(item, index) in data[pageSize - 1]"
+      :key="index"
+      @click="skip(item)"
+    >
+      <div class="left" v-if="item.cover">
+        <img :src="item.cover" alt="" />
+      </div>
+      <div class="right" :class="{ rightAC: !item.p }">
+        <h3 v-html="item.h3"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="page">
+      <span
+        :class="{ active: pageSize === i }"
+        v-for="i in data.length"
+        :key="i"
+        @click="pageChange(i)"
+        >{{ i }}</span
+      >
+    </div>
+    <!-- 查看详情组件 -->
+    <CollectionsInfo v-if="isShow" :isShow.sync="isShow" :infoObj="infoObj" />
+  </div>
 </template>
 
 <script>
+import CollectionsInfo from "../Collections/component/info.vue";
+
+import { dataAll } from "./dataAll";
 export default {
-name:'SearchAll',
-components: {},
-data() {
-//这里存放数据
-return {
+  name: "SearchAll",
+  props: {
+    txt: {
+      type: String,
+      default: "",
+    },
+  },
+  components: { CollectionsInfo },
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+      pageSize: 1,
+      // 点击单个查看文物
+      isShow: false,
+      infoObj: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 切换分页
+    pageChange(val) {
+      this.pageSize = val;
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    },
+    // 点击跳转，新窗口打开
+    skip(item) {
+      if (item.path) window.open(item.path, "_blank");
+      else {
+        this.infoObj = item;
+        this.isShow = true;
+        this.$nextTick(() => {
+          // 获取body，防止滚动
+          let body = document.querySelector("body");
+          body.style.overflow = "hidden";
+        });
+      }
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      this.pageSize = 1;
+      let temp = [];
+      if (txt.trim() === "" || txt.trim().length < 4) {
+        temp = [...dataAll];
+      } else {
+        temp = dataAll.filter((v) => {
+          return v.h3.includes(txt) || v.p.includes(txt);
+        });
+        //
+        temp = temp.map((v) => {
+          return {
+            ...v,
+            h3: v.h3.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+            p: v.p.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+          };
+        });
+      }
+      // 把结果长度给父亲显示
+      this.$emit("update:num", temp.length);
 
+      // 手动处理格式分页
+      let pageNum = Math.ceil(temp.length / 20);
+      let tempArrAll = [];
+      for (let i = 0; i < pageNum; i++) {
+        tempArrAll.push(temp.slice(i * 20, (i + 1) * 20));
+      }
+      this.data = tempArrAll;
+    },
+    searchBtn(txt) {
+      this.getData(txt);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.txt);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.null {
+  font-size: 30px;
+  margin-top: 50px;
+  text-align: center;
+}
+.SearchAll {
+  padding-bottom: 20px;
+  .row {
+    cursor: pointer;
+    background-color: #fff;
+    border: 1px solid #c8c8c8;
+    margin-bottom: 20px;
+    padding: 20px;
+    zoom: 1;
+    overflow: hidden;
+    display: flex;
+    .left {
+      width: 180px;
+      text-align: center;
+      & > img {
+        width: 150px;
+      }
+    }
+    .right {
+      flex: 1;
+      & > h3 {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 30px;
+      }
+      & > p {
+        font-size: 14px;
+        color: #a6a6a6;
+        line-height: 24px;
+      }
+    }
+    .rightAC {
+      display: flex;
+      align-items: center;
+      & > h3 {
+        font-size: 24px;
+        padding-left: 20px;
+        padding-bottom: 40px;
+      }
+    }
+  }
+  .page {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 30px;
+    & > span {
+      margin-right: 8px;
+      cursor: pointer;
+    }
+    .active {
+      color: #bf2323;
+      pointer-events: none;
+    }
+  }
+}
 </style>

web/src/views/Search/Collections.vue

@@ -1,43 +1,181 @@
 <template>
-<div class='SearchCollections'>SearchCollections</div>
+  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="SearchCollections" v-else>
+    <div
+      class="row"
+      v-for="(item, index) in data[pageSize - 1]"
+      :key="index"
+      @click="lookBig(item)"
+    >
+      <div class="left">
+        <img :src="item.cover" alt="" />
+      </div>
+      <div class="right">
+        <h3 v-html="item.h3"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="page">
+      <span
+        :class="{ active: pageSize === i }"
+        v-for="i in data.length"
+        :key="i"
+        @click="pageChange(i)"
+        >{{ i }}</span
+      >
+    </div>
+    <!-- 查看详情组件 -->
+    <CollectionsInfo v-if="isShow" :isShow.sync="isShow" :infoObj="infoObj" />
+  </div>
 </template>
 
 <script>
+import CollectionsInfo from "../Collections/component/info.vue";
+import { Collections } from "./data";
 export default {
-name:'SearchCollections',
-components: {},
-data() {
-//这里存放数据
-return {
+  name: "SearchCollections",
+  props: {
+    txt: {
+      type: String,
+      default: "",
+    },
+  },
+  components: { CollectionsInfo },
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+      pageSize: 1,
+      // 点击单个查看文物
+      isShow: false,
+      infoObj: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 切换分页
+    pageChange(val) {
+      this.pageSize = val;
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    },
+    // 点击跳转，新窗口打开
+    lookBig(item) {
+      this.infoObj = item;
+      this.isShow = true;
+      this.$nextTick(() => {
+        // 获取body，防止滚动
+        let body = document.querySelector("body");
+        body.style.overflow = "hidden";
+      });
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      this.pageSize = 1;
+      let temp = [];
+      if (txt.trim() === "" || txt.trim().length < 4) {
+        temp = [...Collections];
+      } else {
+        temp = Collections.filter((v) => {
+          return v.h3.includes(txt) || v.p.includes(txt);
+        });
+        //
+        temp = temp.map((v) => {
+          return {
+            ...v,
+            h3: v.h3.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+            p: v.p.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+          };
+        });
+      }
+      // 把结果长度给父亲显示
+      this.$emit("update:num", temp.length);
 
+      // 手动处理格式分页
+      let pageNum = Math.ceil(temp.length / 10);
+      let tempArrAll = [];
+      for (let i = 0; i < pageNum; i++) {
+        tempArrAll.push(temp.slice(i * 10, (i + 1) * 10));
+      }
+      this.data = tempArrAll;
+    },
+    searchBtn(txt) {
+      this.getData(txt);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.txt);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.null {
+  font-size: 30px;
+  margin-top: 50px;
+  text-align: center;
+}
+.SearchCollections {
+  padding-bottom: 20px;
+  .row {
+    cursor: pointer;
+    background-color: #fff;
+    border: 1px solid #c8c8c8;
+    margin-bottom: 20px;
+    padding: 20px;
+    zoom: 1;
+    overflow: hidden;
+    display: flex;
+    .left {
+      width: 180px;
+      text-align: center;
+      & > img {
+        width: 150px;
+      }
+    }
+    .right {
+      flex: 1;
+      & > h3 {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 30px;
+      }
+      & > p {
+        font-size: 14px;
+        color: #a6a6a6;
+        line-height: 24px;
+      }
+      /deep/.smImg {
+        width: 41px;
+        height: 32px;
+      }
+    }
+  }
+  .page {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 30px;
+    & > span {
+      margin-right: 8px;
+      cursor: pointer;
+    }
+    .active {
+      color: #bf2323;
+      pointer-events: none;
+    }
+  }
+}
 </style>

web/src/views/Search/Employment.vue

@@ -1,43 +1,111 @@
 <template>
-<div class='SearchEmployment'>SearchEmployment</div>
+  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="SearchEmployment" v-else>
+    <div
+      class="row"
+      v-for="item in data"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <h3 v-html="item.h3"></h3>
+      <p v-html="item.p"></p>
+    </div>
+  </div>
 </template>
 
 <script>
+import { Employment } from "./data";
 export default {
-name:'SearchEmployment',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchEmployment",
+  props: {
+    txt: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4) {
+        this.data = [...Employment];
+      } else {
+        let temp = [];
+        temp = Employment.filter((v) => {
+          return v.h3.includes(txt) || v.p.includes(txt);
+        });
+        //
+        temp = temp.map((v) => {
+          return {
+            ...v,
+            h3: v.h3.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+            p: v.p.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+          };
+        });
+        this.data = [...temp];
+      }
+      this.$emit("update:num", this.data.length);
+    },
+    searchBtn(txt) {
+      this.getData(txt);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.txt);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.null {
+  font-size: 30px;
+  margin-top: 50px;
+  text-align: center;
+}
+.SearchEmployment {
+  padding-bottom: 20px;
+  .row {
+    cursor: pointer;
+    background-color: #fff;
+    border: 1px solid #c8c8c8;
+    margin-bottom: 20px;
+    padding: 20px;
+    zoom: 1;
+    overflow: hidden;
+    & > h3 {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 30px;
+    }
+    & > p {
+      font-size: 14px;
+      color: #a6a6a6;
+      line-height: 24px;
+    }
+  }
+}
 </style>

web/src/views/Search/Events.vue

@@ -1,43 +1,127 @@
 <template>
-<div class='SearchEvents'>SearchEvents</div>
+  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="SearchEvents" v-else>
+    <div
+      class="row"
+      v-for="item in data"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <div class="left" v-if="item.cover">
+        <img :src="item.cover" alt="" />
+      </div>
+      <div class="right" :class="{rightAC:!item.p}">
+        <h3 v-html="item.h3"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { Events } from "./data";
 export default {
-name:'SearchEvents',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchEvents",
+  props: {
+    txt: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4) {
+        this.data = [...Events];
+      } else {
+        let temp = [];
+        temp = Events.filter((v) => {
+          return v.h3.includes(txt) || v.p.includes(txt);
+        });
+        //
+        temp = temp.map((v) => {
+          return {
+            ...v,
+            h3: v.h3.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+            p: v.p.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+          };
+        });
+        this.data = [...temp];
+      }
+      this.$emit("update:num", this.data.length);
+    },
+    searchBtn(txt) {
+      this.getData(txt);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.txt);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.null {
+  font-size: 30px;
+  margin-top: 50px;
+  text-align: center;
+}
+.SearchEvents {
+  padding-bottom: 20px;
+  .row {
+    cursor: pointer;
+    background-color: #fff;
+    border: 1px solid #c8c8c8;
+    margin-bottom: 20px;
+    padding: 20px;
+    zoom: 1;
+    overflow: hidden;
+    display: flex;
+    .left {
+      width: 180px;
+      text-align: center;
+      & > img {
+        width: 150px;
+      }
+    }
+    .right {
+      flex: 1;
+      & > h3 {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 30px;
+      }
+      & > p {
+        font-size: 14px;
+        color: #a6a6a6;
+        line-height: 24px;
+      }
+    }
+  }
+}
 </style>

web/src/views/Search/Exhibitions.vue

@@ -1,43 +1,165 @@
 <template>
-<div class='SearchExhibitions'>SearchExhibitions</div>
+  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="SearchExhibitions" v-else>
+    <div
+      class="row"
+      v-for="item in data[pageSize - 1]"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <div class="left">
+        <img :src="item.cover" alt="" />
+      </div>
+      <div class="right">
+        <h3 v-html="item.h3"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="page">
+      <span
+        :class="{ active: pageSize === i }"
+        v-for="i in data.length"
+        :key="i"
+        @click="pageChange(i)"
+        >{{ i }}</span
+      >
+    </div>
+  </div>
 </template>
 
 <script>
+import { Exhibitions } from "./data";
 export default {
-name:'SearchExhibitions',
-components: {},
-data() {
-//这里存放数据
-return {
+  name: "SearchExhibitions",
+  props: {
+    txt: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+      pageSize: 1,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 切换分页
+    pageChange(val) {
+      this.pageSize = val;
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    },
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      this.pageSize = 1;
+      let temp = [];
+      if (txt.trim() === "" || txt.trim().length < 4) {
+        temp = [...Exhibitions];
+      } else {
+        temp = Exhibitions.filter((v) => {
+          return v.h3.includes(txt) || v.p.includes(txt);
+        });
+        //
+        temp = temp.map((v) => {
+          return {
+            ...v,
+            h3: v.h3.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+            p: v.p.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+          };
+        });
+      }
+      // 把结果长度给父亲显示
+      this.$emit("update:num", temp.length);
 
+      // 手动处理格式分页
+      let pageNum = Math.ceil(temp.length / 10);
+      let tempArrAll = [];
+      for (let i = 0; i < pageNum; i++) {
+        tempArrAll.push(temp.slice(i * 10, (i + 1) * 10));
+      }
+      this.data = tempArrAll;
+    },
+    searchBtn(txt) {
+      this.getData(txt);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.txt);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.null {
+  font-size: 30px;
+  margin-top: 50px;
+  text-align: center;
+}
+.SearchExhibitions {
+  padding-bottom: 20px;
+  .row {
+    cursor: pointer;
+    background-color: #fff;
+    border: 1px solid #c8c8c8;
+    margin-bottom: 20px;
+    padding: 20px;
+    zoom: 1;
+    overflow: hidden;
+    display: flex;
+    .left {
+      width: 180px;
+      text-align: center;
+      & > img {
+        width: 150px;
+      }
+    }
+    .right {
+      flex: 1;
+      & > h3 {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 30px;
+      }
+      & > p {
+        font-size: 14px;
+        color: #a6a6a6;
+        line-height: 24px;
+      }
+    }
+  }
+  .page {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 30px;
+    & > span {
+      margin-right: 8px;
+      cursor: pointer;
+    }
+    .active {
+      color: #bf2323;
+      pointer-events: none;
+    }
+  }
+}
 </style>

web/src/views/Search/Join.vue

@@ -1,43 +1,127 @@
 <template>
-<div class='SearchJoin'>SearchJoin</div>
+  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="SearchJoin" v-else>
+    <div
+      class="row"
+      v-for="item in data"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <div class="left" v-if="item.cover">
+        <img :src="item.cover" alt="" />
+      </div>
+      <div class="right" :class="{rightAC:!item.p}">
+        <h3 v-html="item.h3"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { Join } from "./data";
 export default {
-name:'SearchJoin',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchJoin",
+  props: {
+    txt: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4) {
+        this.data = [...Join];
+      } else {
+        let temp = [];
+        temp = Join.filter((v) => {
+          return v.h3.includes(txt) || v.p.includes(txt);
+        });
+        //
+        temp = temp.map((v) => {
+          return {
+            ...v,
+            h3: v.h3.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+            p: v.p.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+          };
+        });
+        this.data = [...temp];
+      }
+      this.$emit("update:num", this.data.length);
+    },
+    searchBtn(txt) {
+      this.getData(txt);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.txt);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.null {
+  font-size: 30px;
+  margin-top: 50px;
+  text-align: center;
+}
+.SearchJoin {
+  padding-bottom: 20px;
+  .row {
+    cursor: pointer;
+    background-color: #fff;
+    border: 1px solid #c8c8c8;
+    margin-bottom: 20px;
+    padding: 20px;
+    zoom: 1;
+    overflow: hidden;
+    display: flex;
+    .left {
+      width: 180px;
+      text-align: center;
+      & > img {
+        width: 150px;
+      }
+    }
+    .right {
+      flex: 1;
+      & > h3 {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 30px;
+      }
+      & > p {
+        font-size: 14px;
+        color: #a6a6a6;
+        line-height: 24px;
+      }
+    }
+  }
+}
 </style>

web/src/views/Search/Learn.vue

@@ -1,43 +1,165 @@
 <template>
-<div class='SearchLearn'>SearchLearn</div>
+  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="SearchLearn" v-else>
+    <div
+      class="row"
+      v-for="item in data[pageSize - 1]"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <div class="left">
+        <img :src="item.cover" alt="" />
+      </div>
+      <div class="right">
+        <h3 v-html="item.h3"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="page">
+      <span
+        :class="{ active: pageSize === i }"
+        v-for="i in data.length"
+        :key="i"
+        @click="pageChange(i)"
+        >{{ i }}</span
+      >
+    </div>
+  </div>
 </template>
 
 <script>
+import { LearnEngage } from "./data";
 export default {
-name:'SearchLearn',
-components: {},
-data() {
-//这里存放数据
-return {
+  name: "SearchLearn",
+  props: {
+    txt: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+      pageSize: 1,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 切换分页
+    pageChange(val) {
+      this.pageSize = val;
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    },
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      this.pageSize = 1;
+      let temp = [];
+      if (txt.trim() === "" || txt.trim().length < 4) {
+        temp = [...LearnEngage];
+      } else {
+        temp = LearnEngage.filter((v) => {
+          return v.h3.includes(txt) || v.p.includes(txt);
+        });
+        //
+        temp = temp.map((v) => {
+          return {
+            ...v,
+            h3: v.h3.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+            p: v.p.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+          };
+        });
+      }
+      // 把结果长度给父亲显示
+      this.$emit("update:num", temp.length);
 
+      // 手动处理格式分页
+      let pageNum = Math.ceil(temp.length / 10);
+      let tempArrAll = [];
+      for (let i = 0; i < pageNum; i++) {
+        tempArrAll.push(temp.slice(i * 10, (i + 1) * 10));
+      }
+      this.data = tempArrAll;
+    },
+    searchBtn(txt) {
+      this.getData(txt);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.txt);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.null {
+  font-size: 30px;
+  margin-top: 50px;
+  text-align: center;
+}
+.SearchLearn {
+  padding-bottom: 20px;
+  .row {
+    cursor: pointer;
+    background-color: #fff;
+    border: 1px solid #c8c8c8;
+    margin-bottom: 20px;
+    padding: 20px;
+    zoom: 1;
+    overflow: hidden;
+    display: flex;
+    .left {
+      width: 180px;
+      text-align: center;
+      & > img {
+        width: 150px;
+      }
+    }
+    .right {
+      flex: 1;
+      & > h3 {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 30px;
+      }
+      & > p {
+        font-size: 14px;
+        color: #a6a6a6;
+        line-height: 24px;
+      }
+    }
+  }
+  .page {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 30px;
+    & > span {
+      margin-right: 8px;
+      cursor: pointer;
+    }
+    .active {
+      color: #bf2323;
+      pointer-events: none;
+    }
+  }
+}
 </style>

web/src/views/Search/Research.vue

@@ -1,43 +1,174 @@
 <template>
-<div class='SearchResearch'>SearchResearch</div>
+  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="SearchResearch" v-else>
+    <div
+      class="row"
+      v-for="item in data[pageSize - 1]"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <div class="left" v-if="item.cover">
+        <img :src="item.cover" alt="" />
+      </div>
+      <div class="right" :class="{rightAC:!item.p}">
+        <h3 v-html="item.h3"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="page">
+      <span
+        :class="{ active: pageSize === i }"
+        v-for="i in data.length"
+        :key="i"
+        @click="pageChange(i)"
+        >{{ i }}</span
+      >
+    </div>
+  </div>
 </template>
 
 <script>
+import { Publications } from "./data";
 export default {
-name:'SearchResearch',
-components: {},
-data() {
-//这里存放数据
-return {
+  name: "SearchResearch",
+  props: {
+    txt: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+      pageSize: 1,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 切换分页
+    pageChange(val) {
+      this.pageSize = val;
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    },
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      this.pageSize = 1;
+      let temp = [];
+      if (txt.trim() === "" || txt.trim().length < 4) {
+        temp = [...Publications];
+      } else {
+        temp = Publications.filter((v) => {
+            return v.h3.includes(txt) || v.p.includes(txt);
+        });
+        //
+        temp = temp.map((v) => {
+          return {
+            ...v,
+            h3: v.h3.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+            p: v.p.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+          };
+        });
+      }
+      // 把结果长度给父亲显示
+      this.$emit("update:num", temp.length);
 
+      // 手动处理格式分页
+      let pageNum = Math.ceil(temp.length / 10);
+      let tempArrAll = [];
+      for (let i = 0; i < pageNum; i++) {
+        tempArrAll.push(temp.slice(i * 10, (i + 1) * 10));
+      }
+      this.data = tempArrAll;
+    },
+    searchBtn(txt) {
+      this.getData(txt);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.txt);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.null {
+  font-size: 30px;
+  margin-top: 50px;
+  text-align: center;
+}
+.SearchResearch {
+  padding-bottom: 20px;
+  .row {
+    cursor: pointer;
+    background-color: #fff;
+    border: 1px solid #c8c8c8;
+    margin-bottom: 20px;
+    padding: 20px;
+    zoom: 1;
+    overflow: hidden;
+    display: flex;
+    .left {
+      width: 180px;
+      text-align: center;
+      & > img {
+        width: 150px;
+      }
+    }
+    .right {
+      flex: 1;
+      & > h3 {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 30px;
+      }
+      & > p {
+        font-size: 14px;
+        color: #a6a6a6;
+        line-height: 24px;
+      }
+    }
+    .rightAC{
+      display: flex;
+      align-items: center;
+      &>h3{
+        font-size: 24px;
+        padding-left: 20px;
+        padding-bottom: 40px;
+      }
+    }
+  }
+  .page {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 30px;
+    & > span {
+      margin-right: 8px;
+      cursor: pointer;
+    }
+    .active {
+      color: #bf2323;
+      pointer-events: none;
+    }
+  }
+}
 </style>

web/src/views/Search/Terms.vue

@@ -1,43 +1,111 @@
 <template>
-<div class='SearchTerms'>SearchTerms</div>
+  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="SearchTerms" v-else>
+    <div
+      class="row"
+      v-for="item in data"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <h3 v-html="item.h3"></h3>
+      <p v-html="item.p"></p>
+    </div>
+  </div>
 </template>
 
 <script>
+import { Terms } from "./data";
 export default {
-name:'SearchTerms',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchTerms",
+  props: {
+    txt: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4) {
+        this.data = [...Terms];
+      } else {
+        let temp = [];
+        temp = Terms.filter((v) => {
+          return v.h3.includes(txt) || v.p.includes(txt);
+        });
+        //
+        temp = temp.map((v) => {
+          return {
+            ...v,
+            h3: v.h3.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+            p: v.p.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+          };
+        });
+        this.data = [...temp];
+      }
+      this.$emit("update:num", this.data.length);
+    },
+    searchBtn(txt) {
+      this.getData(txt);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.txt);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.null {
+  font-size: 30px;
+  margin-top: 50px;
+  text-align: center;
+}
+.SearchTerms {
+  padding-bottom: 20px;
+  .row {
+    cursor: pointer;
+    background-color: #fff;
+    border: 1px solid #c8c8c8;
+    margin-bottom: 20px;
+    padding: 20px;
+    zoom: 1;
+    overflow: hidden;
+    & > h3 {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 30px;
+    }
+    & > p {
+      font-size: 14px;
+      color: #a6a6a6;
+      line-height: 24px;
+    }
+  }
+}
 </style>

web/src/views/Search/Visit.vue

@@ -1,7 +1,13 @@
 <template>
-  <div class="SearchVisit">
-    <div class="row" v-for="item in data" :key="item.id">
-      <h3 v-html="item.h3" @click="skip(item.url)"></h3>
+  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="SearchVisit" v-else>
+    <div
+      class="row"
+      v-for="item in data"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <h3 v-html="item.h3"></h3>
       <p v-html="item.p"></p>
     </div>
   </div>
@@ -31,8 +37,8 @@ export default {
   //方法集合
   methods: {
     // 点击跳转，新窗口打开
-    skip(url){
-      window.open(url, '_blank');
+    skip(path) {
+      window.open(path, "_blank");
     },
     // 封装一个获取数据的方法
     getData(txt) {
@@ -47,27 +53,21 @@ export default {
         temp = temp.map((v) => {
           return {
             ...v,
-            h3: v.h3.replaceAll(
-              txt,
-              `<span style='color:red;'>${txt}</span>`
-            ),
-            p: v.p.replaceAll(
-              txt,
-              `<span style='color:red;'>${txt}</span>`
-            ),
+            h3: v.h3.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
+            p: v.p.replaceAll(txt, `<span style='color:red;'>${txt}</span>`),
           };
         });
         this.data = [...temp];
       }
-      this.$emit('update:num',this.data.length)
+      this.$emit("update:num", this.data.length);
     },
     searchBtn(txt) {
-      this.getData(txt)
+      this.getData(txt);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.getData(this.txt)
+    this.getData(this.txt);
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -81,9 +81,15 @@ export default {
 };
 </script>
 <style lang='less' scoped>
+.null {
+  font-size: 30px;
+  margin-top: 50px;
+  text-align: center;
+}
 .SearchVisit {
   padding-bottom: 20px;
   .row {
+    cursor: pointer;
     background-color: #fff;
     border: 1px solid #c8c8c8;
     margin-bottom: 20px;
@@ -91,7 +97,6 @@ export default {
     zoom: 1;
     overflow: hidden;
     & > h3 {
-      cursor: pointer;
       font-weight: 700;
       font-size: 14px;
       line-height: 30px;

web/src/views/dataAll.js

@@ -1326,7 +1326,7 @@ export const dataAll = {
 export const Collections = {
   Bronzes: [
     {
-      url: 'Bronzes', url: 'Bronzes',
+      url: 'Bronzes',
       id: 1,
       h3: 'Bronze <i>He</i> Wine Vessel Inscribed by Ke',
       p: 'This vessel has a domed lid with a loop handle that has tiny animal faces (eyes and horns) at its ends. A smaller loop at one side of the lid is connected by a link to another loop at the top of the handle.',

web/src/views/layout/index.vue

@@ -117,7 +117,7 @@ export default {
   methods: {
     // 点击搜索
     search() {
-      if (this.searchTxt.trim() === "" || this.searchTxt.trim().length < 4) return
+      // if (this.searchTxt.trim() === "" || this.searchTxt.trim().length < 4) return
       this.$router.push({
         name: "Search",
         params: {txt:this.searchTxt},