up

web/src/router/index.js

@@ -223,8 +223,22 @@ const routes = [
         component: () => import('../views/bottom/Employment.vue'),
         meta: { myName: 'bottomEmployment' },
       },
+      // 搜索页面
+      {
+        path: '/Layout/Search',
+        name: 'Search',
+        component: () => import('../views/Search/index.vue'),
+        meta: { myName: 'Search' },
+      },
     ]
-  }
+  },
+  {
+    path: '/null',
+    name: 'null',
+    component: () => import('../views/null/index.vue'),
+    meta: { myName: 'null' },
+  },
+
 ]
 
 const router = new VueRouter({

web/src/views/About/link.vue

@@ -10,8 +10,8 @@
     <div class="lmname"></div>
     <div class="wrap" :class="{wrap2:item.bac}" v-for="(item,index) in data" :key="index">
       <div class="box">
-        <h2>{{item.title}}</h2>
-        <div class="row" v-for="val in item.son" :key="val.img">
+        <h2 :title="item.title">{{item.title}}</h2>
+        <div class="row" v-for="val in item.son" :key="val.img" :title="val.pop">
           <a :href="val.url" target="_blank">
             <span
               :style="`background-image: url(/data/About/link/${val.img}.jpg)`"
@@ -35,50 +35,50 @@ export default {
     return {
       data:[
         {title:'Australia',son:[
-          {img:'1',url:'https://museumsvictoria.com.au/'},
+          {img:'1',url:'https://museumsvictoria.com.au/',pop:'Museums Victoria'},
         ]},
         {title:'Cambodia',bac:true,son:[
-          {img:'2',url:'https://apsaraauthority.gov.kh/?page=front&lg=en'},
+          {img:'2',url:'https://apsaraauthority.gov.kh/?page=front&lg=en',pop:'The Authority for the protection of the site and the Management of the Region of Angkor (APSARA National Authority or ANA)'},
         ]},
         {title:'Canada',son:[
-          {img:'3',url:'https://www.rom.on.ca/en'},
-          {img:'4',url:'https://royalbcmuseum.bc.ca/'},
+          {img:'3',url:'https://www.rom.on.ca/en',pop:'Royal Ontario Museum'},
+          {img:'4',url:'https://royalbcmuseum.bc.ca/',pop:'The Royal British Columbia Museum'},
         ]},
         {title:'Colombia',bac:true,son:[
-          {img:'5',url:'http://www.museonacional.gov.co/Paginas/default.aspx'},
+          {img:'5',url:'http://www.museonacional.gov.co/Paginas/default.aspx',pop:'Museo Nacional de Columbia'},
         ]},
         {title:'Hungary',son:[
-          {img:'6',url:'https://mnm.hu/en'},
-          {img:'7',url:'http://www.btm.hu/en/'},
+          {img:'6',url:'https://mnm.hu/en',pop:'Hungarian National Museum'},
+          {img:'7',url:'http://www.btm.hu/en/',pop:'Budapesti Történeti Múzeum'},
         ]},
         {title:'Japan',bac:true,son:[
-          {img:'8',url:'http://www.edo-tokyo-museum.or.jp/en/'},
+          {img:'8',url:'http://www.edo-tokyo-museum.or.jp/en/',pop:'Edo-Tokyo Museum'},
         ]},
         {title:'Mauritius',son:[
-          {img:'9',url:'http://www.mauritiusmuseums.mu/English/Pages/default.aspx'},
+          {img:'9',url:'http://www.mauritiusmuseums.mu/English/Pages/default.aspx',pop:'Mauritius Museums Council'},
         ]},
         {title:'Poland',bac:true,son:[
-          {img:'10',url:'https://mnwr.pl/en/'},
+          {img:'10',url:'https://mnwr.pl/en/',pop:'National Museum in Wroclaw'},
         ]},
         {title:'Republic of Korea',son:[
-          {img:'11',url:'https://museum.seoul.go.kr/eng/index.do'},
+          {img:'11',url:'https://museum.seoul.go.kr/eng/index.do',pop:'Seoul Museum of History'},
         ]},
         {title:'Russia',bac:true,son:[
-          {img:'12',url:'https://en.shm.ru/'},
-          {img:'13',url:'https://mosmuseum.ru/'},
+          {img:'12',url:'https://en.shm.ru/',pop:'Russian State Historical Museum'},
+          {img:'13',url:'https://mosmuseum.ru/',pop:'Museum of Moscow'},
         ]},
         {title:'Thailand',son:[
-          {img:'14',url:'https://www.mynmv.com/'},
+          {img:'14',url:'https://www.mynmv.com/',pop:'National Museum Bangkok'},
         ]},
         {title:'Ukraine',bac:true,son:[
-          {img:'15',url:'http://www.lhm.lviv.ua/eng/index.html'},
-          {img:'16',url:'https://khanenkomuseum.kiev.ua/en/main'},
-          {img:'17',url:'http://www.kyivhistorymuseum.org/en/museum-affiliates'},
+          {img:'15',url:'http://www.lhm.lviv.ua/eng/index.html',pop:'Lviv Historical Museum'},
+          {img:'16',url:'https://khanenkomuseum.kiev.ua/en/main',pop:'The Khanenko Museum'},
+          {img:'17',url:'http://www.kyivhistorymuseum.org/en/museum-affiliates',pop:'Museum of Kyiv History'},
         ]},
         {title:'United States of America',son:[
-          {img:'18',url:'https://fisher.usc.edu/'},
-          {img:'19',url:'https://www.samuseum.org/'},
-          {img:'20',url:'https://www.vmfa.museum/'},
+          {img:'18',url:'https://fisher.usc.edu/',pop:'University of Southern California Fisher Museum of Art'},
+          {img:'19',url:'https://www.samuseum.org/',pop:'San Antonio Museum of Art'},
+          {img:'20',url:'https://www.vmfa.museum/',pop:'Virginia Museum of Fine Arts'},
         ]},
       ]
     };

web/src/views/Exhibitions/component/List.vue

@@ -130,7 +130,7 @@ export default {
     },
     // 点击搜索
     search() {
-      if (this.txt.trim() === "" || this.txt.trim().lenght < 3) {
+      if (this.txt.trim() === "" || this.txt.trim().length < 4) {
         this.getIdChangeData();
         this.dataShowArr(9);
         return;

web/src/views/Search/About.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='SearchAbout'>SearchAbout</div>
+</template>
+
+<script>
+export default {
+name:'SearchAbout',
+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>
+//@import url(); 引入公共css类
+
+</style>

web/src/views/Search/All.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='SearchAll'>SearchAll</div>
+</template>
+
+<script>
+export default {
+name:'SearchAll',
+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>
+//@import url(); 引入公共css类
+
+</style>

web/src/views/Search/Collections.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='SearchCollections'>SearchCollections</div>
+</template>
+
+<script>
+export default {
+name:'SearchCollections',
+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>
+//@import url(); 引入公共css类
+
+</style>

web/src/views/Search/Employment.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='SearchEmployment'>SearchEmployment</div>
+</template>
+
+<script>
+export default {
+name:'SearchEmployment',
+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>
+//@import url(); 引入公共css类
+
+</style>

web/src/views/Search/Events.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='SearchEvents'>SearchEvents</div>
+</template>
+
+<script>
+export default {
+name:'SearchEvents',
+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>
+//@import url(); 引入公共css类
+
+</style>

web/src/views/Search/Exhibitions.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='SearchExhibitions'>SearchExhibitions</div>
+</template>
+
+<script>
+export default {
+name:'SearchExhibitions',
+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>
+//@import url(); 引入公共css类
+
+</style>

web/src/views/Search/Join.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='SearchJoin'>SearchJoin</div>
+</template>
+
+<script>
+export default {
+name:'SearchJoin',
+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>
+//@import url(); 引入公共css类
+
+</style>

web/src/views/Search/Learn.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='SearchLearn'>SearchLearn</div>
+</template>
+
+<script>
+export default {
+name:'SearchLearn',
+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>
+//@import url(); 引入公共css类
+
+</style>

web/src/views/Search/Research.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='SearchResearch'>SearchResearch</div>
+</template>
+
+<script>
+export default {
+name:'SearchResearch',
+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>
+//@import url(); 引入公共css类
+
+</style>

web/src/views/Search/Terms.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='SearchTerms'>SearchTerms</div>
+</template>
+
+<script>
+export default {
+name:'SearchTerms',
+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>
+//@import url(); 引入公共css类
+
+</style>

web/src/views/Search/Visit.vue

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

web/src/views/Search/index.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="Search">
+    <div class="pos">
+      <span class="pos1">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home">Home></Router-link>
+      <span>Search></span>
+      <span>List></span>
+    </div>
+    <div class="titleBox">
+      Search
+      <span> {{num}} results</span>
+    </div>
+    <div class="searchForm">
+      <input class="searchWord" type="text" v-model="txt" />
+      <div class="searchBtn" @click="searchBtn">Search</div>
+    </div>
+    <!-- 切换tab动态路由 -->
+    <div class="searchMenu">
+      <div v-for="item in tabData" :key="item.id">
+        <span
+          :class="{ active: cut === item.cut }"
+          class="txt"
+          @click="cutCom(item.cut)"
+          >{{ item.name }}</span
+        >
+        <span v-if="item.id !== 11"> | </span>
+      </div>
+      <div class="more" @click="more" v-if="moreShow">
+        <span>More</span>
+        <span class="el-icon-caret-bottom"></span>
+      </div>
+    </div>
+    <!-- 动态组件 -->
+    <div class="comm">
+      <component ref="comSon" :is="cut" :txt='txt' :num.sync='num'></component>
+    </div>
+  </div>
+</template>
+         
+<script>
+import All from "./All.vue";
+import Visit from "./Visit.vue";
+import Exhibitions from "./Exhibitions.vue";
+import Collections from "./Collections.vue";
+import Learn from "./Learn.vue";
+import Research from "./Research.vue";
+import Join from "./Join.vue";
+import About from "./About.vue";
+import Events from "./Events.vue";
+import Terms from "./Terms.vue";
+import Employment from "./Employment.vue";
+export default {
+  name: "Search",
+  components: {
+    All,
+    Visit,
+    Exhibitions,
+    Collections,
+    Learn,
+    Research,
+    Join,
+    About,
+    Events,
+    Terms,
+    Employment,
+  },
+  data() {
+    //这里存放数据
+    return {
+      num:0,
+      cut: "All",
+      txt: "",
+      moreShow: true,
+      tabData: [
+        { id: 1, name: "All Results", cut: "All" },
+        { id: 2, name: "Visit", cut: "Visit" },
+        { id: 3, name: "Exhibitions", cut: "Exhibitions" },
+        { id: 4, name: "Collections", cut: "Collections" },
+        { id: 5, name: "Learn & Engage", cut: "Learn" },
+        { id: 6, name: "Research & Publications", cut: "Research" },
+        { id: 7, name: "Join & Support", cut: "Join" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击搜索
+    searchBtn(){
+      this.$nextTick(()=>{
+      this.$refs.comSon.searchBtn(this.txt)
+      })
+    },
+    more() {
+      this.tabData.push({ id: 8, name: "About", cut: "About" });
+      this.tabData.push({ id: 9, name: "Events", cut: "Events" });
+      this.tabData.push({ id: 10, name: "Terms of Use", cut: "Terms" });
+      this.tabData.push({ id: 11, name: "Employment", cut: "Employment" });
+      this.moreShow = false;
+    },
+    cutCom(val) {
+      if (this.cut === val) return;
+      this.cut = val;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    //获取参数
+    let txt = this.$route.params.txt;
+    if (txt) this.txt = txt;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Search {
+  padding-top: 60px;
+  .pos {
+    height: 40px;
+    line-height: 40px;
+    font-size: 12px;
+    margin: 0 auto 10px auto;
+    width: 1180px;
+    .pos1 {
+      color: #c20e11;
+    }
+  }
+  .titleBox {
+    font-size: 18px;
+    line-height: 30px;
+    border-left: 2px solid #fe0003;
+    text-indent: 10px;
+    width: 1200px;
+    margin: 0 auto;
+    & > span {
+      color: #ff0605;
+      margin-left: 10px;
+    }
+  }
+  .searchForm {
+    background-color: #fff;
+    border: 1px solid #c8c8c8;
+    width: 1200px;
+    height: 80px;
+    overflow: hidden;
+    margin: 20px auto;
+    .searchWord {
+      font-size: 16px;
+      line-height: 40px;
+      background-color: #fff;
+      border: 1px solid #c8c8c8;
+      text-indent: 10px;
+      float: left;
+      width: 75%;
+      height: 38px;
+      margin: 20px 0 0 20px;
+    }
+    .searchBtn {
+      font-size: 16px;
+      color: #fff;
+      line-height: 40px;
+      background-color: #855b31;
+      border: 1px solid #855b31;
+      text-align: center;
+      float: left;
+      width: 20%;
+      margin-top: 20px;
+      cursor: pointer;
+    }
+  }
+  .searchMenu {
+    display: flex;
+    height: 78px;
+    width: 1200px;
+    background-color: #fff;
+    border: 1px solid #c8c8c8;
+    margin: 0 auto 20px;
+    box-sizing: border-box;
+    padding: 20px;
+    & > div {
+      display: flex;
+      align-items: center;
+      & > span {
+        font-size: 14px;
+        font-weight: bold;
+        color: #a6a6a6;
+      }
+      .txt {
+        cursor: pointer;
+        padding: 0 10px;
+      }
+      .active {
+        color: black;
+      }
+    }
+    .more {
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
+  .comm{
+    width: 1200px;
+    margin: 0 auto 20px;
+  }
+}
+</style>

web/src/views/bottom/Index.vue

@@ -1,44 +1,517 @@
 <template>
-<div class='bottomIndex'>bottomIndex</div>
+  <div class="bottomIndex">
+    <img src="/data/Index/1.jpg" alt="" />
+    <div class="home" title="Home">
+      <img src="/data/Index/home.jpg" alt="" @click="skip('/')" />
+    </div>
+    <div class="main">
+      <img src="/data/Index/main.jpg" alt="" />
+      <!-- 定位的盒子 -->
+      <div class="loc">
+        <div class="one">
+          <div
+            :class="{ active: item.path !== '' }"
+            @click="skip(item.path, item.sroll)"
+            :title="item.title"
+            v-for="(item, index) in data1"
+            :key="index"
+            :style="`width:${item.width};top:${item.top * 45}px;left:${
+              item.left
+            }`"
+          ></div>
+        </div>
+        <div class="tow">
+          <div
+            :class="{ active: item.path !== '' }"
+            @click="skip(item.path, item.sroll)"
+            :title="item.title"
+            v-for="(item, index) in data2"
+            :key="index"
+            :style="`width:${item.width};top:${item.top * 45}px;left:${
+              item.left
+            }`"
+          ></div>
+        </div>
+        <div class="three">
+          <div
+            :class="{ active: item.path !== '' }"
+            @click="skip(item.path, item.sroll)"
+            :title="item.title"
+            v-for="(item, index) in data3"
+            :key="index"
+            :style="`width:${item.width};top:${item.top * 45}px;left:${
+              item.left
+            }`"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-
 export default {
-name:'bottomIndex',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "bottomIndex",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data1: [
+        {
+          title: "Visit",
+          width: "110px",
+          top: 0,
+          left: "0px",
+          path: "/Layout/Visit/1",
+        },
+        {
+          title: "Hours,Direction & Admission",
+          width: "250px",
+          top: 1,
+          left: "0px",
+          path: "/Layout/Visit/1",
+        },
+        {
+          title: "Reservation",
+          width: "110px",
+          top: 2,
+          left: "0px",
+          path: "/Layout/Visit/2",
+        },
+        {
+          title: "Reservation System",
+          width: "180px",
+          top: 3,
+          left: "0px",
+          path: "",
+        },
+        {
+          title: "Floor Plans",
+          width: "110px",
+          top: 4,
+          left: "0px",
+          path: "/Layout/Visit/3",
+        },
+        {
+          title: "Audio Guide & Tour",
+          width: "175px",
+          top: 5,
+          left: "0px",
+          path: "/Layout/Visit/4",
+        },
+        {
+          title: "Accessibility",
+          width: "120px",
+          top: 6,
+          left: "0px",
+          path: "/Layout/Visit/5",
+        },
+        {
+          title: "Café & Shop",
+          width: "120px",
+          top: 7,
+          left: "0px",
+          path: "/Layout/Visit/6",
+        },
+        {
+          title: "Visitor Guidelines",
+          width: "160px",
+          top: 8,
+          left: "0px",
+          path: "/Layout/Visit/7",
+        },
+        //
+        {
+          title: "Exhibitions",
+          width: "200px",
+          top: 0,
+          left: "290px",
+          path: "/Layout/Exhibitions/1",
+        },
+        {
+          title: "Current Exhibitions",
+          width: "170px",
+          top: 1,
+          left: "290px",
+          path: "/Layout/Exhibitions/1",
+        },
+        {
+          title: "Permanent Exhibitions",
+          width: "200px",
+          top: 2,
+          left: "290px",
+          path: "/Layout/Exhibitions/2",
+        },
+        {
+          title: "Past Exhibitions",
+          width: "155px",
+          top: 3,
+          left: "290px",
+          path: "/Layout/Exhibitions/3",
+        },
+        {
+          title: "Overseas Exhibitions",
+          width: "200px",
+          top: 4,
+          left: "290px",
+          path: "/Layout/Exhibitions/4",
+        },
+        //
+        {
+          title: "Collections",
+          width: "200px",
+          top: 0,
+          left: "588px",
+          path: "/Layout/Collections/Bronzes",
+        },
+        {
+          title: "Bronzes",
+          width: "95px",
+          top: 1,
+          left: "588px",
+          path: "/Layout/Collections/Bronzes",
+        },
+        {
+          title: "Ceramics",
+          width: "95px",
+          top: 2,
+          left: "588px",
+          path: "/Layout/Collections/Ceramics",
+        },
+        {
+          title: "Buddhist Statues",
+          width: "155px",
+          top: 3,
+          left: "588px",
+          path: "/Layout/Collections/Buddhist",
+        },
+        {
+          title: "Jadewares",
+          width: "115px",
+          top: 4,
+          left: "588px",
+          path: "/Layout/Collections/Jadewares",
+        },
+        {
+          title: "Calligraphies",
+          width: "120px",
+          top: 5,
+          left: "588px",
+          path: "/Layout/Collections/Calligraphies",
+        },
+        {
+          title: "Paintings",
+          width: "95px",
+          top: 6,
+          left: "588px",
+          path: "/Layout/Collections/Paintings",
+        },
+        {
+          title: "Gold & Silverwares",
+          width: "170px",
+          top: 7,
+          left: "588px",
+          path: "/Layout/Collections/Gold",
+        },
+        {
+          title: "Coins & Banknotes",
+          width: "170px",
+          top: 8,
+          left: "588px",
+          path: "/Layout/Collections/Coins",
+        },
+        {
+          title: "Brocades & Embroideries",
+          width: "210px",
+          top: 8.9,
+          left: "588px",
+          path: "/Layout/Collections/Brocades",
+        },
+        {
+          title: "Cultural Supplies",
+          width: "150px",
+          top: 9.8,
+          left: "588px",
+          path: "/Layout/Collections/Cultural",
+        },
+        {
+          title: "Miscellaneous",
+          width: "140px",
+          top: 10.8,
+          left: "588px",
+          path: "/Layout/Collections/Miscellaneous",
+        },
+        //
+        {
+          title: "Learn & Engage",
+          width: "265px",
+          top: 0,
+          left: "880px",
+          path: "/Layout/LearnEngage/Students",
+        },
+        {
+          title: "For Students",
+          width: "130px",
+          top: 1,
+          left: "880px",
+          path: "/Layout/LearnEngage/Students",
+        },
+        {
+          title: "For Adults",
+          width: "120px",
+          top: 2,
+          left: "880px",
+          path: "/Layout/LearnEngage/Adults",
+        },
+        {
+          title: "For Families & Children",
+          width: "210px",
+          top: 3,
+          left: "880px",
+          path: "/Layout/LearnEngage/Families",
+        },
+      ],
+      data2: [
+        {
+          title: "Preservation & Publications",
+          width: "430px",
+          top: 0,
+          left: "0px",
+          path: "/Layout/Publications/2",
+        },
+        {
+          title: "Preservation",
+          width: "118px",
+          top: 1,
+          left: "0px",
+          path: "/Layout/Publications/3",
+        },
+        {
+          title: "Publications",
+          width: "118px",
+          top: 2,
+          left: "0px",
+          path: "/Layout/Publications/1",
+        },
+        //
+        {
+          title: "Join & Support",
+          width: "250px",
+          top: 0,
+          left: "588px",
+          path: "/Layout/JoinSupport/Volunteer",
+        },
+        {
+          title: "Ways to Volunteer",
+          width: "160px",
+          top: 1,
+          left: "588px",
+          path: "/Layout/JoinSupport/Volunteer",
+        },
+        {
+          title: "Volunteer Team Introduction",
+          width: "270px",
+          top: 2,
+          left: "588px",
+          path: "/Layout/JoinSupport/VolunteerInfo?id=1",
+        },
+        {
+          title: "Volunteer Apply",
+          width: "160px",
+          top: 3,
+          left: "588px",
+          path: "/Layout/JoinSupport/VolunteerInfo?id=2",
+        },
+        {
+          title: "Volunteer Program",
+          width: "205px",
+          top: 4,
+          left: "588px",
+          path: "/Layout/JoinSupport/VolunteerInfo?id=3",
+        },
+        {
+          title: "Feedbacks",
+          width: "120px",
+          top: 5,
+          left: "588px",
+          path: "/Layout/JoinSupport/VolunteerInfo?id=4",
+        },
+        {
+          title: "Ways to Give",
+          width: "120px",
+          top: 6,
+          left: "588px",
+          path: "/Layout/JoinSupport/Give",
+        },
+        {
+          title: "Individuals",
+          width: "120px",
+          top: 7,
+          left: "588px",
+          path: "/Layout/JoinSupport/GiveInfo?id=4",
+        },
+        {
+          title: "Corporations & Institutions",
+          width: "250px",
+          top: 8,
+          left: "588px",
+          path: "/Layout/JoinSupport/GiveInfo?id=5",
+        },
+        //
+        {
+          title: "About",
+          width: "130px",
+          top: 0,
+          left: "880px",
+          path: "/Layout/About",
+        },
+        {
+          title: "From the Director",
+          width: "175px",
+          top: 1,
+          left: "880px",
+          path: "/Layout/About",
+          sroll: 338,
+        },
+        {
+          title: "History",
+          width: "75px",
+          top: 2,
+          left: "880px",
+          path: "/Layout/About",
+          sroll: 805,
+        },
+        {
+          title: "Partners & Connections",
+          width: "210px",
+          top: 3,
+          left: "880px",
+          path: "/Layout/About",
+          sroll: 1307,
+        },
+        {
+          title: "Contact",
+          width: "75px",
+          top: 4,
+          left: "880px",
+          path: "/Layout/About",
+          sroll: 1515,
+        },
+      ],
+      data3: [
+        {
+          title: "Auxiliary Functions",
+          width: "310px",
+          top: 0,
+          left: "0px",
+          path: "",
+        },
+        { title: "Moblie Site", width: "105px", top: 1, left: "0px", path: "" },
+        {
+          title: "Terms of Use",
+          width: "120px",
+          top: 2,
+          left: "0px",
+          path: "/Layout/Use",
+        },
+        { title: "News", width: "55px", top: 3, left: "0px", path: "" },
+        {
+          title: "Upcoming Events",
+          width: "155px",
+          top: 4,
+          left: "0px",
+          path: "/Layout/Events",
+        },
+        {
+          title: "Employment",
+          width: "110px",
+          top: 5,
+          left: "0px",
+          path: "/Layout/Employment",
+        },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    skip(url, sroll) {
+      this.$router.push(url).catch(() => {});
+      if (sroll) {
+        setTimeout(() => {
+          window.scrollTo({ top: sroll, behavior: "smooth" });
+        }, 100);
+      }
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问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类
-
+.bottomIndex {
+  clear: both;
+  width: 1186px;
+  margin: 0 auto 55px;
+  font-size: 18px;
+  color: #333;
+  line-height: 30px;
+  padding-top: 75px;
+  .home {
+    padding: 30px 0;
+    border-bottom: solid 1px #000;
+    & > img {
+      cursor: pointer;
+    }
+  }
+  .main {
+    position: relative;
+    padding-top: 30px;
+    .loc {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 30px;
+      left: 0;
+      & > div {
+        width: 100%;
+        position: absolute;
+        opacity: 0.3;
+        top: 0;
+        left: 0;
+        & > div {
+          width: 110px;
+          height: 35px;
+          position: absolute;
+        }
+      }
+      .active{
+        cursor: pointer;
+      }
+      .one {
+        height: 520px;
+      }
+      .tow {
+        height: 400px;
+        top: 570px;
+      }
+      .three {
+        height: 260px;
+        top: 1025px;
+      }
+    }
+  }
+}
 </style>

web/src/views/layout/index.vue

@@ -37,13 +37,14 @@
         </ul>
       </div>
       <!-- 右侧的输入框 -->
-      <div class="search">
+      <div class="search" @keyup.enter="search" v-if="!menaInd.includes('Search')">
         <el-input
           placeholder="search..."
           suffix-icon="el-icon-search"
           v-model="searchTxt"
         >
         </el-input>
+        <div class="btnn" @click="search"></div>
       </div>
     </div>
     <!-- 固定的二维码和游戏 -->
@@ -108,11 +109,20 @@ export default {
   watch: {
     $route() {
       this.menaInd = this.$route.path;
+      this.searchTxt=''
       // console.log('------',this.menaInd);
     },
   },
   //方法集合
   methods: {
+    // 点击搜索
+    search() {
+      if (this.searchTxt.trim() === "" || this.searchTxt.trim().length < 4) return
+      this.$router.push({
+        name: "Search",
+        params: {txt:this.searchTxt},
+      });
+    },
     // 底部的跳转
     footTo(path) {
       this.$router.push(path).catch(() => {});
@@ -258,6 +268,16 @@ export default {
       line-height: 30px;
       color: #ca000a;
     }
+    .btnn {
+      cursor: pointer;
+      z-index: 99;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      width: 40px;
+      height: 30px;
+      border-radius: 15px;
+    }
   }
 }
 .rightNav {

web/src/views/null/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="null">
+    <div>
+      <div @click="$router.push('/')">返 回 首 页</div>
+      <div class="back" @click="$router.go(-1)">返 回 上 一 页</div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  name: "null",
+  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>
+.null {
+  background-color: #f5feff;
+  width: 100vw;
+  height: 100vh;
+  & > div {
+    width: 100%;
+    height: 100%;
+    background: url('../../assets/images/null.png') no-repeat center 100px;
+    &>div{
+      font-size: 24px;
+      cursor: pointer;
+      text-align: center;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 200px;
+      border-radius: 35px;
+      border: 2px solid aqua;
+      font-weight: 700;
+      width: 210px;
+      height: 70px;
+      line-height: 66px;
+    }
+    .back{
+      bottom: 300px;
+    }
+  }
+}
+</style>