up

webM/src/router/index.js

@@ -221,6 +221,12 @@ const routes = [
         meta: { myTitle: 'About', topColor: '#9f5b14' },
       },
       {
+        path: '/Layout/AboutPresident',
+        name: 'AboutPresident',
+        component: () => import('../views/About/President.vue'),
+        meta: { myTitle: 'About', topColor: '#9f5b14' },
+      },
+      {
         path: '/Layout/AboutLink',
         name: 'AboutLink',
         component: () => import('../views/About/Link.vue'),

webM/src/views/About/President.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="AboutPres">
+    <div class="ban">
+      <img src="@/assets/img/bannerA.png" alt="" />
+      <h3 @click="$router.push('/Layout/About/1')">About</h3>
+    </div>
+    <div class="main">
+      <div class="box1">
+        <h3>From the President</h3>
+        <div class="info">
+          <span class="info_1">z</span>
+          <span class="info_3">c</span>
+        </div>
+      </div>
+      <div class="box2">
+        <h3>Exhibition Overview</h3>
+        <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>
+</template>
+
+<script>
+export default {
+  name: "AboutPres",
+  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>
+.AboutPres {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 20px;
+      bottom: 20px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    background: url("../../assets/img/bgAD.png");
+    background-size: 100% 100%;
+    padding: 20px 20px 40px;
+    .box1 {
+      padding: 0 15px 5px;
+      border-bottom: 1px solid #ccc;
+      & > h3 {
+        font-size: 22px;
+        font-weight: 700;
+        padding-left: 30px;
+        background: url("../../assets/img/Layout/chosen.png") left center
+          no-repeat;
+        background-size: 22px 18px;
+        margin-bottom: 5px;
+      }
+      .info {
+        font-size: 14px;
+        line-height: 30px;
+        color: #666;
+        overflow: hidden;
+        zoom: 1;
+        margin-bottom: 20px;
+        & > span {
+          padding: 0 0px 0 30px;
+          display: block;
+        }
+        .info_1 {
+          background: url("../../assets/img/bg_5.png") left 5px no-repeat;
+        }
+        .info_3 {
+          background: url("../../assets/img/bg_7.png") left 5px no-repeat;
+        }
+      }
+    }
+    .box2 {
+      padding: 20px 15px 0;
+      & > h3 {
+        font-size: 20px;
+        font-weight: 700;
+        margin-bottom: 15px;
+      }
+      & > p {
+        font-size: 14px;
+        line-height: 18px;
+        color: #6a6a6a;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+</style>

webM/src/views/Publications/Magazines.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="PuMagazines">
     <!-- 1 -->
-    <div class="box1">
+    <div class="box1" id="PMbox1">
       <h3 class="biaoji">Introduction of Magazine</h3>
       <p>
         The Museum is a national academic journal for museum studies supervised
@@ -51,7 +51,7 @@
       </div>
     </div>
     <!-- 2 -->
-    <div class="box1">
+    <div class="box1" id="PMbox2">
       <h3 class="biaoji">Notice to Contributors</h3>
       <p>
         The Museum is a national academic journal on museums published at home
@@ -126,7 +126,7 @@
       </div>
     </div>
     <!-- 3 -->
-    <div class="box2">
+    <div class="box2" id="PMbox3">
       <h3 class="biaoji">
         Contact Us<span>(Contact information of the journal)</span>
       </h3>
@@ -243,7 +243,21 @@ export default {
     this.info = this.imgList[this.infoInd];
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        let temp = this.$route.query.m;
+        if (temp) {
+          // 获取滚动的总元素
+          // 获取元素距离顶部的距离
+          let dom = document.querySelector(`#PMbox${temp}`);
+          // 获取主滚动元素
+          let domScroll = document.querySelector(".Layout");
+          domScroll.scrollTo({ top: dom.offsetTop-140});
+        }
+      }, 100);
+    });
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -385,7 +399,7 @@ export default {
         background: url("../../assets/img/PuBc.jpg");
         background-size: 100% 100%;
         & > img {
-          touch-action: pan-y!important;
+          touch-action: pan-y !important;
           border-radius: 8px;
           width: 100%;
           height: 100%;

webM/src/views/Search/About.vue

@@ -1,44 +1,108 @@
-<!--  -->
 <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",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.getData(this.$route.params.t);
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4 || txt === "null") {
+        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);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.$route.params.t);
+  },
+  //生命周期 - 挂载完成（可以访问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 {
+  .row {
+    padding: 10px;
+    margin-bottom: 10px;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 2px #ccc;
+    & > h3 {
+      margin-bottom: 5px;
+      font-size: 16px;
+    }
+    & > p {
+      color: #6A6A6A;
+      font-size: 14px;
+      line-height: 16px;
+      display: -webkit-box;
+      overflow: hidden;
+      white-space: normal !important;
+      text-overflow: ellipsis;
+      word-wrap: break-word;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
 </style>

webM/src/views/Search/All.vue

@@ -1,44 +1,138 @@
-<!--  -->
 <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 in data"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <div class="left" v-if="item.cover">
+        <img v-lazy="item.cover" alt="" />
+      </div>
+      <div class="right" :class="{ show: !item.cover }">
+        <h3 v-html="item.h3" :class="{ onOne: item.p === '' }"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { dataAll } from "./dataAll";
 export default {
-name:'SearchAll',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchAll",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.getData(this.$route.params.t);
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4 || txt === "null") {
+        this.data = [...dataAll];
+      } else {
+        let temp = [];
+        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.data = [...temp];
+      }
+      this.$emit("update:num", this.data.length);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.$route.params.t);
+  },
+  //生命周期 - 挂载完成（可以访问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 {
+  width: 100%;
+  .row {
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 2px #ccc;
+    display: flex;
+    .left {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      & > img {
+        width: 120px;
+      }
+    }
+    .right {
+      padding: 10px 10px 10px 15px;
+      width: calc(100% - 120px);
+      & > h3 {
+        font-size: 16px;
+        margin-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .onOne {
+        overflow: visible;
+        text-overflow: clip;
+        white-space: normal;
+      }
+      & > p {
+        line-height: 16px;
+        font-size: 14px;
+        color: #6a6a6a;
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+    .show {
+      width: 100%;
+    }
+  }
+}
 </style>

webM/src/views/Search/Collections.vue

@@ -1,44 +1,130 @@
-<!--  -->
 <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"
+      :key="index"
+      @click="skip(item.path)"
+    >
+      <div class="left">
+        <img v-lazy="item.cover" alt="" />
+      </div>
+      <div class="right">
+        <h3 v-html="item.h3"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { Collections } from "./data";
 export default {
-name:'SearchCollections',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchCollections",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.getData(this.$route.params.t);
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4 || txt === "null") {
+        this.data = [...Collections];
+      } else {
+        let temp = [];
+        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.data = [...temp];
+      }
+      this.$emit("update:num", this.data.length);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.$route.params.t);
+  },
+  //生命周期 - 挂载完成（可以访问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 {
+  width: 100%;
+  .row {
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 2px #ccc;
+    display: flex;
+    .left {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      & > img {
+        width: 120px;
+      }
+    }
+    .right {
+      padding: 10px 10px 10px 15px;
+      width: calc(100% - 120px);
+      & > h3 {
+        font-size: 16px;
+        margin-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > p {
+        line-height: 16px;
+        font-size: 14px;
+        color: #6a6a6a;
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}
 </style>

webM/src/views/Search/Employment.vue

@@ -1,44 +1,130 @@
-<!--  -->
 <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, index) in data"
+      :key="index"
+      @click="skip(item.path)"
+    >
+      <div class="left">
+        <img v-lazy="item.cover" alt="" />
+      </div>
+      <div class="right">
+        <h3 v-html="item.h3"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { Employment } from "./data";
 export default {
-name:'SearchEmployment',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchEmployment",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.getData(this.$route.params.t);
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4 || txt === "null") {
+        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);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.$route.params.t);
+  },
+  //生命周期 - 挂载完成（可以访问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 {
+  width: 100%;
+  .row {
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 2px #ccc;
+    display: flex;
+    .left {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      & > img {
+        width: 120px;
+      }
+    }
+    .right {
+      padding: 10px 10px 10px 15px;
+      width: calc(100% - 120px);
+      & > h3 {
+        font-size: 16px;
+        margin-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > p {
+        line-height: 16px;
+        font-size: 14px;
+        color: #6a6a6a;
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}
 </style>

webM/src/views/Search/Events.vue

@@ -1,44 +1,130 @@
-<!--  -->
 <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, index) in data"
+      :key="index"
+      @click="skip(item.path)"
+    >
+      <div class="left">
+        <img v-lazy="item.cover" alt="" />
+      </div>
+      <div class="right">
+        <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",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.getData(this.$route.params.t);
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4 || txt === "null") {
+        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);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.$route.params.t);
+  },
+  //生命周期 - 挂载完成（可以访问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 {
+  width: 100%;
+  .row {
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 2px #ccc;
+    display: flex;
+    .left {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      & > img {
+        width: 120px;
+      }
+    }
+    .right {
+      padding: 10px 10px 10px 15px;
+      width: calc(100% - 120px);
+      & > h3 {
+        font-size: 16px;
+        margin-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > p {
+        line-height: 16px;
+        font-size: 14px;
+        color: #6a6a6a;
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}
 </style>

webM/src/views/Search/Exhibitions.vue

@@ -1,44 +1,128 @@
-<!--  -->
 <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"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <div class="left">
+        <img v-lazy="item.cover" alt="" />
+      </div>
+      <div class="right">
+        <h3 v-html="item.h3"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { Exhibitions } from "./data";
 export default {
-name:'SearchExhibitions',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchExhibitions",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.getData(this.$route.params.t);
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4 || txt === "null") {
+        this.data = [...Exhibitions];
+      } else {
+        let temp = [];
+        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.data = [...temp];
+      }
+      this.$emit("update:num", this.data.length);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.$route.params.t);
+  },
+  //生命周期 - 挂载完成（可以访问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 {
+  width: 100%;
+  .row {
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 2px #ccc;
+    display: flex;
+    .left {
+      width: 120px;
+      & > img {
+        width: 120px;
+      }
+    }
+    .right {
+      padding: 10px 10px 10px 15px;
+      width: calc(100% - 120px);
+      & > h3 {
+        font-size: 16px;
+        margin-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > p {
+        line-height: 16px;
+        font-size: 14px;
+        color: #6A6A6A;
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}
 </style>

webM/src/views/Search/Join.vue

@@ -1,44 +1,130 @@
-<!--  -->
 <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, index) in data"
+      :key="index"
+      @click="skip(item.path)"
+    >
+      <div class="left">
+        <img v-lazy="item.cover" alt="" />
+      </div>
+      <div class="right">
+        <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",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.getData(this.$route.params.t);
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4 || txt === "null") {
+        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);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.$route.params.t);
+  },
+  //生命周期 - 挂载完成（可以访问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 {
+  width: 100%;
+  .row {
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 2px #ccc;
+    display: flex;
+    .left {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      & > img {
+        width: 120px;
+      }
+    }
+    .right {
+      padding: 10px 10px 10px 15px;
+      width: calc(100% - 120px);
+      & > h3 {
+        font-size: 16px;
+        margin-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > p {
+        line-height: 16px;
+        font-size: 14px;
+        color: #6a6a6a;
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}
 </style>

webM/src/views/Search/Learn.vue

@@ -1,44 +1,130 @@
-<!--  -->
 <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"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <div class="left">
+        <img v-lazy="item.cover" alt="" />
+      </div>
+      <div class="right">
+        <h3 v-html="item.h3"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { LearnEngage } from "./data";
 export default {
-name:'SearchLearn',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchLearn",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.getData(this.$route.params.t);
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4 || txt === "null") {
+        this.data = [...LearnEngage];
+      } else {
+        let temp = [];
+        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.data = [...temp];
+      }
+      this.$emit("update:num", this.data.length);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.$route.params.t);
+  },
+  //生命周期 - 挂载完成（可以访问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 {
+  width: 100%;
+  .row {
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 2px #ccc;
+    display: flex;
+    .left {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      & > img {
+        width: 120px;
+      }
+    }
+    .right {
+      padding: 10px 10px 10px 15px;
+      width: calc(100% - 120px);
+      & > h3 {
+        font-size: 16px;
+        margin-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > p {
+        line-height: 16px;
+        font-size: 14px;
+        color: #6A6A6A;
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}
 </style>

webM/src/views/Search/Research.vue

@@ -1,44 +1,138 @@
-<!--  -->
 <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"
+      :key="item.id"
+      @click="skip(item.path)"
+    >
+      <div class="left" v-if="item.cover">
+        <img v-lazy="item.cover" alt="" />
+      </div>
+      <div class="right" :class="{ show: !item.cover }">
+        <h3 v-html="item.h3" :class="{ onOne: item.p === '' }"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { Publications } from "./data";
 export default {
-name:'SearchResearch',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchResearch",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.getData(this.$route.params.t);
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4 || txt === "null") {
+        this.data = [...Publications];
+      } else {
+        let temp = [];
+        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.data = [...temp];
+      }
+      this.$emit("update:num", this.data.length);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.$route.params.t);
+  },
+  //生命周期 - 挂载完成（可以访问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 {
+  width: 100%;
+  .row {
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 2px #ccc;
+    display: flex;
+    .left {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      & > img {
+        width: 120px;
+      }
+    }
+    .right {
+      padding: 10px 10px 10px 15px;
+      width: calc(100% - 120px);
+      & > h3 {
+        font-size: 16px;
+        margin-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .onOne {
+        overflow: visible;
+        text-overflow: clip;
+        white-space: normal;
+      }
+      & > p {
+        line-height: 16px;
+        font-size: 14px;
+        color: #6a6a6a;
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+    .show {
+      width: 100%;
+    }
+  }
+}
 </style>

webM/src/views/Search/Terms.vue

@@ -1,44 +1,130 @@
-<!--  -->
 <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, index) in data"
+      :key="index"
+      @click="skip(item.path)"
+    >
+      <div class="left">
+        <img v-lazy="item.cover" alt="" />
+      </div>
+      <div class="right">
+        <h3 v-html="item.h3"></h3>
+        <p v-html="item.p"></p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { Terms } from "./data";
 export default {
-name:'SearchTerms',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchTerms",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.getData(this.$route.params.t);
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4 || txt === "null") {
+        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);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.$route.params.t);
+  },
+  //生命周期 - 挂载完成（可以访问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 {
+  width: 100%;
+  .row {
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 2px #ccc;
+    display: flex;
+    .left {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      & > img {
+        width: 120px;
+      }
+    }
+    .right {
+      padding: 10px 10px 10px 15px;
+      width: calc(100% - 120px);
+      & > h3 {
+        font-size: 16px;
+        margin-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > p {
+        line-height: 16px;
+        font-size: 14px;
+        color: #6a6a6a;
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}
 </style>

webM/src/views/Search/Visit.vue

@@ -1,44 +1,108 @@
-<!--  -->
 <template>
-<div class='SearchVisit'>SearchVisit</div>
+  <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>
 </template>
 
 <script>
+import { Visit } from "./data";
 export default {
-name:'SearchVisit',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "SearchVisit",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.getData(this.$route.params.t);
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击跳转，新窗口打开
+    skip(path) {
+      window.open(path, "_blank");
+    },
+    // 封装一个获取数据的方法
+    getData(txt) {
+      if (txt.trim() === "" || txt.trim().length < 4 || txt === "null") {
+        this.data = [...Visit];
+      } else {
+        let temp = [];
+        temp = Visit.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);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData(this.$route.params.t);
+  },
+  //生命周期 - 挂载完成（可以访问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;
+}
+.SearchVisit {
+  .row {
+    padding: 10px;
+    margin-bottom: 10px;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 2px #ccc;
+    & > h3 {
+      margin-bottom: 5px;
+      font-size: 16px;
+    }
+    & > p {
+      color: #6A6A6A;
+      font-size: 14px;
+      line-height: 16px;
+      display: -webkit-box;
+      overflow: hidden;
+      white-space: normal !important;
+      text-overflow: ellipsis;
+      word-wrap: break-word;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
 </style>

webM/src/views/Search/index.vue

@@ -96,6 +96,7 @@ export default {
         left: sonScroll[index].offsetLeft - 100,
         behavior: "smooth",
       });
+      localStorage.setItem("SB_Serach", val);
     },
     // 封装一个地址栏改变的方法
     txtChange() {
@@ -136,6 +137,21 @@ export default {
             this.menaSon = false;
           }
         };
+        let temp = localStorage.getItem("SB_Serach");
+        let Ind;
+        if (temp) {
+          this.cut = temp;
+          this.tabData.forEach((v, i) => {
+            if (v.cut === temp) Ind = i;
+          });
+          // 获取二级选中元素距离左侧的距离
+          let sonScroll = document.querySelectorAll(".rowAll .row");
+          let sonScrollAll = document.querySelector(".mainBox");
+          sonScrollAll.scrollTo({
+            left: sonScroll[Ind].offsetLeft - 100,
+            behavior: "smooth",
+          });
+        }
       }, 0);
     });
   },
@@ -234,10 +250,10 @@ export default {
   }
   .main {
     width: 100%;
-    padding: 30px 20px 40px;
+    padding: 20px 20px 40px;
     .title {
       width: calc(100% - 40px);
-      margin: 0 auto;
+      margin: 0 auto 15px;
       padding-left: 30px;
       font-size: 18px;
       background: url("../../assets/img/Layout/chosen.png") 0px center no-repeat;