Головна сторінка Огляд Довідка
Реєстрація Увійти
shaogen1995
/
ShouBo
1
0
Відгалуження 0
Файли Проблеми 0 Запити на злиття 0 Wiki
Переглянути джерело

feat: --

chenlei 1 рік тому
батько
448717f79c
коміт
efa920e48f
45 змінених файлів з 26832 додано та 26409 видалено
Розділений вигляд Показати статистику Diff
  1. BIN
      web/public/data/LearnEngage/in/107.jpg
  2. BIN
      web/public/data/LearnEngage/in/108.jpg
  3. BIN
      web/public/data/LearnEngage/in/109.jpg
  4. BIN
      web/public/data/LearnEngage/in/110.jpg
  5. BIN
      web/public/data/LearnEngage/in/111.jpg
  6. BIN
      web/public/data/LearnEngage/in/112.jpg
  7. BIN
      web/public/data/LearnEngage/in/113.jpg
  8. BIN
      web/public/data/LearnEngage/sm/107.png
  9. BIN
      web/public/data/LearnEngage/sm/108.png
  10. BIN
      web/public/data/LearnEngage/sm/109.png
  11. BIN
      web/public/data/LearnEngage/sm/110.png
  12. BIN
      web/public/data/LearnEngage/sm/111.png
  13. BIN
      web/public/data/LearnEngage/sm/112.png
  14. BIN
      web/public/data/LearnEngage/sm/113.png
  15. 36 36
      web/public/index.html
  16. BIN
      web/src/assets/images/swiper8.jpg
  17. 415 414
      web/src/views/Exhibitions/component/List.vue
  18. 493 478
      web/src/views/Home/index.vue
  19. 446 446
      web/src/views/LearnEngage/info.vue
  20. 2933 2919
      web/src/views/Search/data.js
  21. 2956 2900
      web/src/views/Search/dataAll.js
  22. 6407 6287
      web/src/views/dataAll.js
  23. 776 776
      web/src/views/layout/index.vue
  24. BIN
      webM/public/data/LearnEngage/in/107.jpg
  25. BIN
      webM/public/data/LearnEngage/in/108.jpg
  26. BIN
      webM/public/data/LearnEngage/in/109.jpg
  27. BIN
      webM/public/data/LearnEngage/in/110.jpg
  28. BIN
      webM/public/data/LearnEngage/in/111.jpg
  29. BIN
      webM/public/data/LearnEngage/in/112.jpg
  30. BIN
      webM/public/data/LearnEngage/in/113.jpg
  31. BIN
      webM/public/data/LearnEngage/sm/107.png
  32. BIN
      webM/public/data/LearnEngage/sm/108.png
  33. BIN
      webM/public/data/LearnEngage/sm/109.png
  34. BIN
      webM/public/data/LearnEngage/sm/110.png
  35. BIN
      webM/public/data/LearnEngage/sm/111.png
  36. BIN
      webM/public/data/LearnEngage/sm/112.png
  37. BIN
      webM/public/data/LearnEngage/sm/113.png
  38. BIN
      webM/src/assets/img/Layout/banner8.png
  39. 0 1
      webM/src/views/Exhibitions/Detail.vue
  40. 2152 2124
      webM/src/views/Exhibitions/data.js
  41. 2163 2135
      webM/src/views/Exhibitions/dataAll.js
  42. 248 247
      webM/src/views/Home/index.vue
  43. 1850 1759
      webM/src/views/Learn/data.js
  44. 3090 3076
      webM/src/views/Search/data.js
  45. 2867 2811
      webM/src/views/Search/dataAll.js

BIN
web/public/data/LearnEngage/in/107.jpg
Переглянути файл


BIN
web/public/data/LearnEngage/in/108.jpg
Переглянути файл


BIN
web/public/data/LearnEngage/in/109.jpg
Переглянути файл


BIN
web/public/data/LearnEngage/in/110.jpg
Переглянути файл


BIN
web/public/data/LearnEngage/in/111.jpg
Переглянути файл


BIN
web/public/data/LearnEngage/in/112.jpg
Переглянути файл


BIN
web/public/data/LearnEngage/in/113.jpg
Переглянути файл


BIN
web/public/data/LearnEngage/sm/107.png
Переглянути файл


BIN
web/public/data/LearnEngage/sm/108.png
Переглянути файл


BIN
web/public/data/LearnEngage/sm/109.png
Переглянути файл


BIN
web/public/data/LearnEngage/sm/110.png
Переглянути файл


BIN
web/public/data/LearnEngage/sm/111.png
Переглянути файл


BIN
web/public/data/LearnEngage/sm/112.png
Переглянути файл


BIN
web/public/data/LearnEngage/sm/113.png
Переглянути файл


+ 36 - 36
web/public/index.html
Переглянути файл 

@@ -1,37 +1,37 @@
 
-<!DOCTYPE html>
 
-<html lang="">
 
-
 
-<head>
 
-  <meta charset="utf-8">
 
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-  <meta name="renderer"  content="webkit">
 
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-  <meta name="description" content="Capital Museum - 北京首都博物馆英文官网">
 
-  <meta name="keywords" content="capital museum, 北京首都博物馆, 首都博物馆, 北京博物馆">
 
-  <link rel="icon" href="favicon.ico">
 
-
 
-  <!-- 百度统计 -->
 
-  <script>
 
-    var _hmt = _hmt || [];
 
-    (function () {
 
-      var hm = document.createElement("script");
 
-      hm.src = "https://hm.baidu.com/hm.js?d3e6254fb87d0e90fbcb0b38a695bb6d";
 
-      var s = document.getElementsByTagName("script")[0];
 
-      s.parentNode.insertBefore(hm, s);
 
-    })();
 
-  </script>
 
-
 
-
 
-  <title>Capital Museum.China</title>
 
-</head>
 
-
 
-<body>
 
-  <noscript>
 
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
 
-      Please enable it to continue.</strong>
 
-  </noscript>
 
-  <div id="app"></div>
 
-  <!-- built files will be auto injected -->
 
-</body>
 
-
 
+<!DOCTYPE html>

+<html lang="">

+

+<head>

+  <meta charset="utf-8">

+  <meta http-equiv="X-UA-Compatible" content="IE=edge">

+  <meta name="renderer"  content="webkit">

+  <meta name="viewport" content="width=device-width,initial-scale=1.0">

+  <meta name="description" content="Capital Museum - 北京首都博物馆英文官网">

+  <meta name="keywords" content="capital museum, 北京首都博物馆, 首都博物馆, 北京博物馆">

+  <link rel="icon" href="favicon.ico">

+

+  <!-- 百度统计 -->

+  <script>

+    var _hmt = _hmt || [];

+    (function () {

+      var hm = document.createElement("script");

+      hm.src = "https://hm.baidu.com/hm.js?d3e6254fb87d0e90fbcb0b38a695bb6d";

+      var s = document.getElementsByTagName("script")[0];

+      s.parentNode.insertBefore(hm, s);

+    })();

+  </script>

+

+

+  <title>Capital Museum.China</title>

+</head>

+

+<body>

+  <noscript>

+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.

+      Please enable it to continue.</strong>

+  </noscript>

+  <div id="app"></div>

+  <!-- built files will be auto injected -->

+</body>

+

 </html>

BIN
web/src/assets/images/swiper8.jpg
Переглянути файл


+ 415 - 414
web/src/views/Exhibitions/component/List.vue
Переглянути файл 

@@ -1,415 +1,416 @@
 
-<template>
 
-  <div class="ExhibitionsList">
 
-    <div class="conten">
 
-      <div class="search" data-aria-interaction-area tabindex="0"
 
-        aria-label aria-description="You've reached search box under the Exhibitions page; please use the tab key to go through the content."
 
-      >
 
-        <div class="left">
 
-          <div
 
-            class="text-input-wrapper"
 
-            @keydown.enter.passive="search"
 
-          >
 
-            <input
 
-              type="text"
 
-              autocomplete="off"
 
-              v-model="txt"
 
-              tabindex="0"
 
-              :aria-description="txt || 'search'"
 
-            />
 
-            <img v-if="themeIdx === 0" :src="require('@/assets/images/search-default-color.svg')" alt=""
 
-              @click="search"
 
-              tabindex="0"
 
-              aria-label="Link"
 
-              aria-description="search"
 
-            >
 
-            <img v-if="[1, 3].includes(themeIdx)" :src="require('@/assets/images/search-black.svg')" alt=""
 
-              @click="search"
 
-              tabindex="0"
 
-              aria-label="Link"
 
-              aria-description="search"
 
-            >
 
-            <img v-if="[2, 4].includes(themeIdx)" :src="require('@/assets/images/search-yellow.svg')" alt=""
 
-              @click="search"
 
-              tabindex="0"
 
-              aria-label="Link"
 
-              aria-description="search"
 
-            >
 
-          </div>
 
-          <!-- 使用el-select组件会无法在选择年份过程中得到选项的无障碍信息，所以改用原生元素 -->
 
-          <select
 
-            id="year-selector"
 
-            v-model="year"
 
-            @change="onSelectorChange"
 
-            tabindex="0"
 
-            class="yearSelector"
 
-            aria-label="Select"
 
-            aria-description="Select Year"
 
-          >
 
-            <option value="">Select Year</option>
 
-            <option value="2021">2021</option>
 
-            <option value="2020">2020</option>
 
-            <option value="2019">2019</option>
 
-            <option value="2018">2018</option>
 
-            <option value="2017">2017</option>
 
-            <option value="2016">2016</option>
 
-            <option value="2015">2015</option>
 
-          </select>
 
-        </div>
 
-        <div class="right">
 
-          <img
 
-            @click="cut = false"
 
-            @keydown.enter.passive="cut = false"
 
-            :src="
 
-              require(`@/assets/images/Exhibitions/${
 
-                cut ? 'cut1' : 'cut1Ac'
 
-              }.png`)
 
-            "
 
-            alt="Button: List mode"
 
-            tabindex="0"
 
-            aria-label="Button"
 
-            aria-description="List mode"
 
-          />
 
-          <img
 
-            @click="cut = true"
 
-            @keydown.enter.passive="cut = true"
 
-            :src="
 
-              require(`@/assets/images/Exhibitions/${
 
-                cut ? 'cut2Ac' : 'cut2'
 
-              }.png`)
 
-            "
 
-            alt="Button: Big image mode"
 
-            tabindex="0"
 
-            aria-label="Button"
 
-            aria-description="Big image mode"
 
-          />
 
-        </div>
 
-      </div>
 
-      <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
 
-      <!-- 列表详情信息 -->
 
-      <div class="listAreaWrapper" data-aria-viewport-area tabindex="0"
 
-        aria-label :aria-description="`You've reached the content area of the ${$parent.topLi[$route.params.id - 1].name} page. To browse the content, please use the tab key.`">
 
-        <div class="list" v-if="!cut">
 
-          <div
 
-            class="row"
 
-            v-for="item in dataShow"
 
-            :key="item.id"
 
-            @click="toInfo(item.id)"
 
-            @keydown.enter.passive="toInfo(item.id)"
 
-          >
 
-            <img :src="item.cover" :alt="item.h3"
 
-              tabindex="0"
 
-              aria-label="Image link"
 
-              :aria-description="item.h3"
 
-            />
 
-            <div class="txt">
 
-              <h3 tabindex="0"
 
-                aria-label="Link"
 
-              >
 
-                {{ item.h3 }}
 
-              </h3>
 
-              <p tabindex="0"
 
-                aria-label="Link"
 
-              >
 
-                {{ item.p }}
 
-              </p>
 
-              <span v-if="item.yrahTxt" tabindex="0">{{ item.yrahTxt }}</span>
 
-            </div>
 
-          </div>
 
-        </div>
 
-        <!-- 列表图片信息 -->
 
-        <div class="listImg" v-else>
 
-          <div class="rowImg" v-for="item in dataShow" :key="item.id" @click="toInfo(item.id)">
 
-            <img :src="item.cover" alt="" 
-              tabindex="0"
 
-              aria-label="Image link"
 
-              :aria-description="item.h3"
 
-            />
 
-            <p tabindex="0">{{ item.h3 }}</p>
 
-          </div>
 
-        </div>
 
-        <!-- 点击显示更多 -->
 
-        <div class="more" v-show="data.length>9&&dataShow.length<data.length" @click="dataShowArr(dataShow.length+9)">Show More</div>
 
-      </div>
 
-    </div>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-import { dataAll } from "@/views/dataAll.js";
 
-import accessibilityMixin from "/src/views/accessibilityMixin.js"
 
-
 
-export default {
 
-  name: "ExhibitionsList",
 
-  components: {},
 
-  mixins: [accessibilityMixin],
 
-  data() {
 
-    //这里存放数据
 
-    return {
 
-      txt: "",
 
-      year: "",
 
-      // 切换图像信息或文章信息---默认详情
 
-      cut: false,
 
-      topId: null,
 
-      data: [],
 
-      dataShow: [],
 
-    };
 
-  },
 
-  //监听属性 类似于data概念
 
-  computed: {},
 
-  //监控data中的数据变化
 
-  watch: {
 
-    // 监听地址栏参数变化
 
-    $route() {
 
-      // 改变数据
 
-      this.getIdChangeData();
 
-      this.dataShowArr(9);
 
-      // 把试图变成详情
 
-      this.cut = false;
 
-      // 清空输入框和下拉框
 
-      this.txt = this.year = "";
 
-    },
 
-  },
 
-  //方法集合
 
-  methods: {
 
-    // 点击单个文章跳转详情
 
-    toInfo(id){
 
-     let k = this.$route.params.id;
 
-      this.$router.push({
 
-        name:'ExhibitionsInfo',
 
-        query:{id,k}
 
-      })
 
-    },
 
-    // 选择年份
 
-    onSelectorChange() {
 
-      this.$eventBus.$emit('request-magnify', {
 
-        elemType: 'Text',
 
-        elemDisc: this.year,
 
-      })
 
-      if (!this.year) {
 
-        this.getIdChangeData();
 
-        this.dataShowArr(9);
 
-        return;
 
-      }
 
-      this.getIdChangeData();
 
-      this.txt = "";
 
-      this.data = this.data.filter((v) => {
 
-        return v.year.includes(this.year) || v.year === "";
 
-      });
 
-      this.dataShowArr(9);
 
-    },
 
-    elSelectChange(val) {
 
-      if (!val) {
 
-        this.getIdChangeData();
 
-        this.dataShowArr(9);
 
-        return;
 
-      }
 
-      this.getIdChangeData();
 
-      this.txt = "";
 
-      this.data = this.data.filter((v) => {
 
-        return v.year.includes(val) || v.year === "";
 
-      });
 
-      this.dataShowArr(9);
 
-    },
 
-    // 点击搜索
 
-    search() {
 
-      if (this.txt.trim() === "" || this.txt.trim().length < 4) {
 
-        this.getIdChangeData();
 
-        this.dataShowArr(9);
 
-        return;
 
-      }
 
-      this.data = this.data.filter((v) => {
 
-        return v.h3.includes(this.txt) || v.p.includes(this.txt);
 
-      });
 
-      this.dataShowArr(9);
 
-    },
 
-    // 封装通过地址栏参数改变数据的方法
 
-    getIdChangeData() {
 
-      // 拿到路由参数id
 
-      let temp = this.$route.params.id;
 
-      if (temp === "1") this.data = dataAll.Exhibitions.Current;
 
-      else if (temp === "2") this.data = dataAll.Exhibitions.Permanent;
 
-      else if (temp === "3") this.data = dataAll.Exhibitions.Past;
 
-      else if (temp === "4") this.data = dataAll.Exhibitions.Overseas;
 
-    },
 
-    // 处理显示在页面的数组初始数据为9
 
-    dataShowArr(val) {
 
-      let temp = [];
 
-      this.data.forEach((v, i) => {
 
-        if (i < val) temp.push(v);
 
-      });
 
-      this.dataShow = temp;
 
-    },
 
-  },
 
-  //生命周期 - 创建完成（可以访问当前this实例）
 
-  created() {},
 
-  //生命周期 - 挂载完成（可以访问DOM元素）
 
-  mounted() {
 
-    this.getIdChangeData();
 
-    this.dataShowArr(9);
 
-  },
 
-  beforeCreate() {}, //生命周期 - 创建之前
 
-  beforeMount() {}, //生命周期 - 挂载之前
 
-  beforeUpdate() {}, //生命周期 - 更新之前
 
-  updated() {}, //生命周期 - 更新之后
 
-  beforeDestroy() {}, //生命周期 - 销毁之前
 
-  destroyed() {}, //生命周期 - 销毁完成
 
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 
-};
 
-</script>
 
-<style lang='less' scoped>
 
-.ExhibitionsList {
 
-  .conten {
 
-    width: 1180px;
 
-    margin: 0 auto;
 
-    .search {
 
-      display: flex;
 
-      justify-content: space-between;
 
-      align-items: center;
 
-      .left {
 
-        position: relative;
 
-        display: flex;
 
-        width: 820px;
 
-        height: 48px;
 
-        .text-input-wrapper {
 
-          height: 48px;
 
-          background: white;
 
-          border: 1px solid #c7c7c7;
 
-          display: flex;
 
-          align-items: center;
 
-          margin-right: 30px;
 
-          > input {
 
-            height: 100%;
 
-            font-size: 24px;
 
-            border: none;
 
-            padding: 0px 10px;
 
-            width: 500px;
 
-            box-sizing: border-box;
 
-            border: none;
 
-            margin: 0;
 
-            outline: none;
 
-          }
 
-          > img {
 
-            height: 30px;
 
-            width: 30px;
 
-            margin-left: 10px;
 
-            margin-right: 10px;
 
-            cursor: pointer;
 
-          }
 
-        }
 
-        .yearSelector {
 
-          border-color: #c0c4cc;
 
-          width: 180px;
 
-          padding-left: 10px;
 
-          cursor: pointer;
 
-          font-size: 18px;
 
-          option {
 
-            cursor: pointer;
 
-            color: #606266;
 
-            font-size: 18px;
 
-          }
 
-        }
 
-      }
 
-      .right {
 
-        & > img {
 
-          cursor: pointer;
 
-          width: 48px;
 
-          height: 48px;
 
-        }
 
-      }
 
-    }
 
-    .null {
 
-      font-size: 30px;
 
-      margin-top: 50px;
 
-      text-align: center;
 
-    }
 
-    .list {
 
-      margin: 20px 0 40px;
 
-      .row {
 
-        cursor: pointer;
 
-        display: flex;
 
-        height: 240px;
 
-        background-color: #fff;
 
-        & > img {
 
-          width: 240px;
 
-          height: 240px;
 
-          object-fit: cover;
 
-        }
 
-        .txt {
 
-          flex: 1;
 
-          border: 1px solid #c7c7c7;
 
-          border-left: 0;
 
-          padding: 0 25px;
 
-          position: relative;
 
-          & > h3 {
 
-            font-size: 18px;
 
-            line-height: 22px;
 
-            padding: 16px 0;
 
-            margin-bottom: 13px;
 
-            font-weight: bold;
 
-          }
 
-          & > p {
 
-            font-size: 14px;
 
-            line-height: 20px;
 
-            color: #666;
 
-          }
 
-          & > span {
 
-            display: block;
 
-            position: absolute;
 
-            left: 25px;
 
-            bottom: 15px;
 
-            font-size: 14px;
 
-            line-height: 20px;
 
-            font-weight: bold;
 
-          }
 
-        }
 
-      }
 
-    }
 
-    .listImg {
 
-      margin: 20px 0 40px;
 
-      display: flex;
 
-      flex-wrap: wrap;
 
-      .rowImg {
 
-        overflow: hidden;
 
-        position: relative;
 
-        cursor: pointer;
 
-        width: 393px;
 
-        height: 393px;
 
-        & > img {
 
-          width: 393px;
 
-          height: 393px;
 
-        }
 
-        & > p {
 
-          font-weight: 700;
 
-          width: 100%;
 
-          font-size: 16px;
 
-          line-height: 32px;
 
-          color: #fff;
 
-          overflow: hidden;
 
-          transition: all 0.3s;
 
-          position: absolute;
 
-          left: 0;
 
-          bottom: -300px;
 
-          padding: 15px 25px;
 
-          background-color: rgba(0, 0, 0, 0.8);
 
-        }
 
-        &:hover {
 
-          & > p {
 
-            bottom: 0;
 
-          }
 
-        }
 
-      }
 
-    }
 
-    .more {
 
-      height: 38px;
 
-      width: 160px;
 
-      margin: 0 auto 60px;
 
-      border: 1px solid #000;
 
-      font-size: 16px;
 
-      line-height: 38px;
 
-      text-align: center;
 
-      font-weight: bold;
 
-      cursor: pointer;
 
-    }
 
-  }
 
-}
 
+<template>

+  <div class="ExhibitionsList">

+    <div class="conten">

+      <div class="search" data-aria-interaction-area tabindex="0"

+        aria-label aria-description="You've reached search box under the Exhibitions page; please use the tab key to go through the content."

+      >

+        <div class="left">

+          <div

+            class="text-input-wrapper"

+            @keydown.enter.passive="search"

+          >

+            <input

+              type="text"

+              autocomplete="off"

+              v-model="txt"

+              tabindex="0"

+              :aria-description="txt || 'search'"

+            />

+            <img v-if="themeIdx === 0" :src="require('@/assets/images/search-default-color.svg')" alt=""

+              @click="search"

+              tabindex="0"

+              aria-label="Link"

+              aria-description="search"

+            >

+            <img v-if="[1, 3].includes(themeIdx)" :src="require('@/assets/images/search-black.svg')" alt=""

+              @click="search"

+              tabindex="0"

+              aria-label="Link"

+              aria-description="search"

+            >

+            <img v-if="[2, 4].includes(themeIdx)" :src="require('@/assets/images/search-yellow.svg')" alt=""

+              @click="search"

+              tabindex="0"

+              aria-label="Link"

+              aria-description="search"

+            >

+          </div>

+          <!-- 使用el-select组件会无法在选择年份过程中得到选项的无障碍信息，所以改用原生元素 -->

+          <select

+            id="year-selector"

+            v-model="year"

+            @change="onSelectorChange"

+            tabindex="0"

+            class="yearSelector"

+            aria-label="Select"

+            aria-description="Select Year"

+          >

+            <option value="">Select Year</option>

+            <option value="2024">2024</option>

+            <option value="2021">2021</option>

+            <option value="2020">2020</option>

+            <option value="2019">2019</option>

+            <option value="2018">2018</option>

+            <option value="2017">2017</option>

+            <option value="2016">2016</option>

+            <option value="2015">2015</option>

+          </select>

+        </div>

+        <div class="right">

+          <img

+            @click="cut = false"

+            @keydown.enter.passive="cut = false"

+            :src="

+              require(`@/assets/images/Exhibitions/${

+                cut ? 'cut1' : 'cut1Ac'

+              }.png`)

+            "

+            alt="Button: List mode"

+            tabindex="0"

+            aria-label="Button"

+            aria-description="List mode"

+          />

+          <img

+            @click="cut = true"

+            @keydown.enter.passive="cut = true"

+            :src="

+              require(`@/assets/images/Exhibitions/${

+                cut ? 'cut2Ac' : 'cut2'

+              }.png`)

+            "

+            alt="Button: Big image mode"

+            tabindex="0"

+            aria-label="Button"

+            aria-description="Big image mode"

+          />

+        </div>

+      </div>

+      <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>

+      <!-- 列表详情信息 -->

+      <div class="listAreaWrapper" data-aria-viewport-area tabindex="0"

+        aria-label :aria-description="`You've reached the content area of the ${$parent.topLi[$route.params.id - 1].name} page. To browse the content, please use the tab key.`">

+        <div class="list" v-if="!cut">

+          <div

+            class="row"

+            v-for="item in dataShow"

+            :key="item.id"

+            @click="toInfo(item.id)"

+            @keydown.enter.passive="toInfo(item.id)"

+          >

+            <img :src="item.cover" :alt="item.h3"

+              tabindex="0"

+              aria-label="Image link"

+              :aria-description="item.h3"

+            />

+            <div class="txt">

+              <h3 tabindex="0"

+                aria-label="Link"

+              >

+                {{ item.h3 }}

+              </h3>

+              <p tabindex="0"

+                aria-label="Link"

+              >

+                {{ item.p }}

+              </p>

+              <span v-if="item.yrahTxt" tabindex="0">{{ item.yrahTxt }}</span>

+            </div>

+          </div>

+        </div>

+        <!-- 列表图片信息 -->

+        <div class="listImg" v-else>

+          <div class="rowImg" v-for="item in dataShow" :key="item.id" @click="toInfo(item.id)">

+            <img :src="item.cover" alt="" 

+              tabindex="0"

+              aria-label="Image link"

+              :aria-description="item.h3"

+            />

+            <p tabindex="0">{{ item.h3 }}</p>

+          </div>

+        </div>

+        <!-- 点击显示更多 -->

+        <div class="more" v-show="data.length>9&&dataShow.length<data.length" @click="dataShowArr(dataShow.length+9)">Show More</div>

+      </div>

+    </div>

+  </div>

+</template>

+

+<script>

+import { dataAll } from "@/views/dataAll.js";

+import accessibilityMixin from "/src/views/accessibilityMixin.js"

+

+export default {

+  name: "ExhibitionsList",

+  components: {},

+  mixins: [accessibilityMixin],

+  data() {

+    //这里存放数据

+    return {

+      txt: "",

+      year: "",

+      // 切换图像信息或文章信息---默认详情

+      cut: false,

+      topId: null,

+      data: [],

+      dataShow: [],

+    };

+  },

+  //监听属性 类似于data概念

+  computed: {},

+  //监控data中的数据变化

+  watch: {

+    // 监听地址栏参数变化

+    $route() {

+      // 改变数据

+      this.getIdChangeData();

+      this.dataShowArr(9);

+      // 把试图变成详情

+      this.cut = false;

+      // 清空输入框和下拉框

+      this.txt = this.year = "";

+    },

+  },

+  //方法集合

+  methods: {

+    // 点击单个文章跳转详情

+    toInfo(id){

+     let k = this.$route.params.id;

+      this.$router.push({

+        name:'ExhibitionsInfo',

+        query:{id,k}

+      })

+    },

+    // 选择年份

+    onSelectorChange() {

+      this.$eventBus.$emit('request-magnify', {

+        elemType: 'Text',

+        elemDisc: this.year,

+      })

+      if (!this.year) {

+        this.getIdChangeData();

+        this.dataShowArr(9);

+        return;

+      }

+      this.getIdChangeData();

+      this.txt = "";

+      this.data = this.data.filter((v) => {

+        return v.year.includes(this.year) || v.year === "";

+      });

+      this.dataShowArr(9);

+    },

+    elSelectChange(val) {

+      if (!val) {

+        this.getIdChangeData();

+        this.dataShowArr(9);

+        return;

+      }

+      this.getIdChangeData();

+      this.txt = "";

+      this.data = this.data.filter((v) => {

+        return v.year.includes(val) || v.year === "";

+      });

+      this.dataShowArr(9);

+    },

+    // 点击搜索

+    search() {

+      if (this.txt.trim() === "" || this.txt.trim().length < 4) {

+        this.getIdChangeData();

+        this.dataShowArr(9);

+        return;

+      }

+      this.data = this.data.filter((v) => {

+        return v.h3.includes(this.txt) || v.p.includes(this.txt);

+      });

+      this.dataShowArr(9);

+    },

+    // 封装通过地址栏参数改变数据的方法

+    getIdChangeData() {

+      // 拿到路由参数id

+      let temp = this.$route.params.id;

+      if (temp === "1") this.data = dataAll.Exhibitions.Current;

+      else if (temp === "2") this.data = dataAll.Exhibitions.Permanent;

+      else if (temp === "3") this.data = dataAll.Exhibitions.Past;

+      else if (temp === "4") this.data = dataAll.Exhibitions.Overseas;

+    },

+    // 处理显示在页面的数组初始数据为9

+    dataShowArr(val) {

+      let temp = [];

+      this.data.forEach((v, i) => {

+        if (i < val) temp.push(v);

+      });

+      this.dataShow = temp;

+    },

+  },

+  //生命周期 - 创建完成（可以访问当前this实例）

+  created() {},

+  //生命周期 - 挂载完成（可以访问DOM元素）

+  mounted() {

+    this.getIdChangeData();

+    this.dataShowArr(9);

+  },

+  beforeCreate() {}, //生命周期 - 创建之前

+  beforeMount() {}, //生命周期 - 挂载之前

+  beforeUpdate() {}, //生命周期 - 更新之前

+  updated() {}, //生命周期 - 更新之后

+  beforeDestroy() {}, //生命周期 - 销毁之前

+  destroyed() {}, //生命周期 - 销毁完成

+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发

+};

+</script>

+<style lang='less' scoped>

+.ExhibitionsList {

+  .conten {

+    width: 1180px;

+    margin: 0 auto;

+    .search {

+      display: flex;

+      justify-content: space-between;

+      align-items: center;

+      .left {

+        position: relative;

+        display: flex;

+        width: 820px;

+        height: 48px;

+        .text-input-wrapper {

+          height: 48px;

+          background: white;

+          border: 1px solid #c7c7c7;

+          display: flex;

+          align-items: center;

+          margin-right: 30px;

+          > input {

+            height: 100%;

+            font-size: 24px;

+            border: none;

+            padding: 0px 10px;

+            width: 500px;

+            box-sizing: border-box;

+            border: none;

+            margin: 0;

+            outline: none;

+          }

+          > img {

+            height: 30px;

+            width: 30px;

+            margin-left: 10px;

+            margin-right: 10px;

+            cursor: pointer;

+          }

+        }

+        .yearSelector {

+          border-color: #c0c4cc;

+          width: 180px;

+          padding-left: 10px;

+          cursor: pointer;

+          font-size: 18px;

+          option {

+            cursor: pointer;

+            color: #606266;

+            font-size: 18px;

+          }

+        }

+      }

+      .right {

+        & > img {

+          cursor: pointer;

+          width: 48px;

+          height: 48px;

+        }

+      }

+    }

+    .null {

+      font-size: 30px;

+      margin-top: 50px;

+      text-align: center;

+    }

+    .list {

+      margin: 20px 0 40px;

+      .row {

+        cursor: pointer;

+        display: flex;

+        height: 240px;

+        background-color: #fff;

+        & > img {

+          width: 240px;

+          height: 240px;

+          object-fit: cover;

+        }

+        .txt {

+          flex: 1;

+          border: 1px solid #c7c7c7;

+          border-left: 0;

+          padding: 0 25px;

+          position: relative;

+          & > h3 {

+            font-size: 18px;

+            line-height: 22px;

+            padding: 16px 0;

+            margin-bottom: 13px;

+            font-weight: bold;

+          }

+          & > p {

+            font-size: 14px;

+            line-height: 20px;

+            color: #666;

+          }

+          & > span {

+            display: block;

+            position: absolute;

+            left: 25px;

+            bottom: 15px;

+            font-size: 14px;

+            line-height: 20px;

+            font-weight: bold;

+          }

+        }

+      }

+    }

+    .listImg {

+      margin: 20px 0 40px;

+      display: flex;

+      flex-wrap: wrap;

+      .rowImg {

+        overflow: hidden;

+        position: relative;

+        cursor: pointer;

+        width: 393px;

+        height: 393px;

+        & > img {

+          width: 393px;

+          height: 393px;

+        }

+        & > p {

+          font-weight: 700;

+          width: 100%;

+          font-size: 16px;

+          line-height: 32px;

+          color: #fff;

+          overflow: hidden;

+          transition: all 0.3s;

+          position: absolute;

+          left: 0;

+          bottom: -300px;

+          padding: 15px 25px;

+          background-color: rgba(0, 0, 0, 0.8);

+        }

+        &:hover {

+          & > p {

+            bottom: 0;

+          }

+        }

+      }

+    }

+    .more {

+      height: 38px;

+      width: 160px;

+      margin: 0 auto 60px;

+      border: 1px solid #000;

+      font-size: 16px;

+      line-height: 38px;

+      text-align: center;

+      font-weight: bold;

+      cursor: pointer;

+    }

+  }

+}

 </style>

+ 493 - 478
web/src/views/Home/index.vue
Переглянути файл 

@@ -1,478 +1,493 @@
 
-<template>
 
-  <div class="Home">
 
-    <!-- 轮播组件 -->
 
-    <el-carousel
 
-      data-aria-viewport-area
 
-      tabindex="0"
 
-      aria-label
 
-      aria-description="You've reached the slider section. This section has four image URLs. To browse the content, please use the tab key."
 
-    >
 
-      <!-- 新增的轮播图模块 -->
 
-      <el-carousel-item key="7">
 
-        <router-link
 
-          to="/Layout/ExhibitionsInfo?id=11&k=2"
 
-          replace
 
-          tabindex="0"
 
-          aria-label="Image link"
 
-          aria-description="Eternal Witness of Civilization: History of Beijing"
 
-        >
 
-          <img
 
-            :src="require(`@/assets/images/swiper7.jpg`)"
 
-            alt="Eternal Witness of Civilization: History of Beijing"
 
-          />
 
-        </router-link>
 
-      </el-carousel-item>
 
-
 
-      <el-carousel-item key="6">
 
-        <router-link
 
-          to="/Layout/ExhibitionsInfo?id=58&k=1"
 
-          replace
 
-          tabindex="0"
 
-          aria-label="Image link"
 
-          aria-description="Splendid Central Axis of Beijing."
 
-        >
 
-          <img
 
-            :src="require(`@/assets/images/swiper6.jpg`)"
 
-            alt="Splendid Central Axis of Beijing."
 
-          />
 
-        </router-link>
 
-      </el-carousel-item>
 
-
 
-      <!-- <el-carousel-item key="1">
 
-        <router-link
 
-          to="/Layout/ExhibitionsInfo?id=1&k=3"
 
-          replace
 
-          tabindex="0"
 
-          aria-label="Image link"
 
-          aria-description="The Great Journey: the 100th Anniversary of the Founding of the Communist Party of China."
 
-        >
 
-          <img
 
-            :src="require(`@/assets/images/swiper1.jpg`)"
 
-            alt="The Great Journey: the 100th Anniversary of the Founding of the Communist Party of China."
 
-          />
 
-        </router-link>
 
-      </el-carousel-item> -->
 
-      <el-carousel-item key="2">
 
-        <router-link
 
-          to="/Layout/Collections/Bronzes"
 
-          replace
 
-          tabindex="0"
 
-          aria-label="Image link"
 
-          aria-description="What's new? More arts just added to our online collections."
 
-        >
 
-          <img
 
-            :src="require(`@/assets/images/swiper2.jpg`)"
 
-            alt="What's new? More arts just added to our online collections."
 
-          />
 
-        </router-link>
 
-      </el-carousel-item>
 
-      <el-carousel-item key="3">
 
-        <router-link
 
-          to="/Layout/ExhibitionsInfo?id=10&k=2"
 
-          replace
 
-          tabindex="0"
 
-          aria-label="Image link"
 
-          aria-description="Folk Customs in old beijing."
 
-        >
 
-          <img
 
-            :src="require(`@/assets/images/swiper3.jpg`)"
 
-            alt="Folk Customs in old beijing."
 
-          />
 
-        </router-link>
 
-      </el-carousel-item>
 
-      <el-carousel-item key="4">
 
-        <router-link
 
-          to="/Layout/Publications/2"
 
-          replace
 
-          tabindex="0"
 
-          aria-label="Image link"
 
-          aria-description="Exhibition catalogues newly added to our website."
 
-        >
 
-          <img
 
-            :src="require(`@/assets/images/swiper4.jpg`)"
 
-            alt="Exhibition catalogues newly added to our website."
 
-          />
 
-        </router-link>
 
-      </el-carousel-item>
 
-    </el-carousel>
 
-    <!-- 底部 -->
 
-    <div
 
-      class="bottomNav"
 
-      data-aria-viewport-area
 
-      tabindex="0"
 
-      aria-label
 
-      aria-description="You've reached the pop-up window section; this section contains four URLs; please use the tab key to go through the content."
 
-    >
 
-      <div
 
-        class="t1"
 
-        @click="$router.push('/Layout/Visit/2')"
 
-        tabindex="0"
 
-        aria-label="Link"
 
-        aria-description="Reservation"
 
-      >
 
-        <div class="title">
 
-          <span class="aria-theme-independent"> Reservation </span>
 
-        </div>
 
-        <div class="info">
 
-          <router-link
 
-            class="p"
 
-            to="/Layout/Visit/2"
 
-            replace
 
-            tabindex="0"
 
-            aria-label="Image link"
 
-            aria-description="Reservation"
 
-          >
 
-            <img src="../../assets/images/bott1.jpg" alt="Reservation" />
 
-          </router-link>
 
-          <div class="d">
 
-            <p class="n1 aria-theme-independent" tabindex="0">
 
-              Online Reservation
 
-            </p>
 
-            <p class="n2 aria-theme-independent" tabindex="0">
 
-              Telephone Reservation
 
-            </p>
 
-            <p class="n3" tabindex="0">
 
-              Individual <span>+86 (10) 63393339</span>
 
-            </p>
 
-            <p class="n3" tabindex="0">Group <span>+86 (10) 63370458</span></p>
 
-          </div>
 
-        </div>
 
-      </div>
 
-      <div
 
-        class="t2"
 
-        @click="$router.push('/Layout/Visit/1')"
 
-        tabindex="0"
 
-        aria-label="Link"
 
-        aria-description="Visit Info"
 
-      >
 
-        <div class="title">
 
-          <span class="aria-theme-independent">Visit Info</span>
 
-        </div>
 
-        <div class="info">
 
-          <router-link
 
-            class="p"
 
-            to="/Layout/Visit/1"
 
-            replace
 
-            tabindex="0"
 
-            aria-label="Image link"
 
-            aria-description="Hours, Direction & Admission"
 
-          >
 
-            <img
 
-              src="../../assets/images/bott2.jpg"
 
-              alt="Hours, Direction & Admission"
 
-            />
 
-          </router-link>
 
-          <div class="d">
 
-            <p class="n4 aria-theme-independent" tabindex="0">
 
-              Opening Hours 09:00-17:00
 
-            </p>
 
-            <p class="n5" tabindex="0">No admission after 16:00</p>
 
-            <p class="n5" tabindex="0">Closed on Monday</p>
 
-            <p class="n6 aria-theme-independent" tabindex="0">Phone</p>
 
-            <p tabindex="0">+86 (10) 63370491</p>
 
-          </div>
 
-        </div>
 
-      </div>
 
-      <div
 
-        class="t3"
 
-        @click="botskip()"
 
-        tabindex="0"
 
-        aria-label="Link"
 
-        aria-description="Partners & Connections"
 
-      >
 
-        <div class="title">
 
-          <span class="aria-theme-independent">Partners & Connections</span>
 
-        </div>
 
-        <div class="info">
 
-          <router-link
 
-            class="p"
 
-            to="/Layout/About"
 
-            replace
 
-            tabindex="0"
 
-            aria-label="Image link"
 
-            aria-description="Partners & Connections"
 
-          >
 
-            <img
 
-              src="../../assets/images/bott3.jpg"
 
-              alt="Partners & Connections"
 
-            />
 
-          </router-link>
 
-          <div class="d">
 
-            <p class="n7 aria-theme-independent" tabindex="0">
 
-              Partners & Connections
 
-            </p>
 
-          </div>
 
-        </div>
 
-      </div>
 
-      <div
 
-        class="t4"
 
-        @click="$router.push('/Layout/Events')"
 
-        tabindex="0"
 
-        aria-label="Link"
 
-        aria-description="Events"
 
-      >
 
-        <div class="title">
 
-          <span class="aria-theme-independent">Events</span>
 
-        </div>
 
-        <div class="info">
 
-          <router-link
 
-            class="p"
 
-            to="/Layout/Events"
 
-            replace
 
-            tabindex="0"
 
-            aria-label="Image link"
 
-            aria-description="Events"
 
-          >
 
-            <img src="../../assets/images/bott4.jpg" alt="Events" />
 
-          </router-link>
 
-          <div class="d">
 
-            <p class="n8 aria-theme-independent" tabindex="0">Events</p>
 
-          </div>
 
-        </div>
 
-      </div>
 
-    </div>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-export default {
 
-  name: "Home",
 
-  components: {},
 
-  data() {
 
-    //这里存放数据
 
-    return {};
 
-  },
 
-  //监听属性 类似于data概念
 
-  computed: {},
 
-  //监控data中的数据变化
 
-  watch: {},
 
-  //方法集合
 
-  methods: {
 
-    // 底部的跳转
 
-    botskip() {
 
-      this.$router.push("/Layout/About").catch(() => {});
 
-      setTimeout(() => {
 
-        window.scrollTo({ top: 1307, behavior: "smooth" });
 
-      }, 100);
 
-    },
 
-  },
 
-  //生命周期 - 创建完成（可以访问当前this实例）
 
-  created() {},
 
-  //生命周期 - 挂载完成（可以访问DOM元素）
 
-  mounted() {
 
-    this.$eventBus.$emit(
 
-      "request-read",
 
-      `You've reached the Home Page, which features one navigation section, four window sections, and one interactive section. To choose a section, please hit the shortcut key.`
 
-    );
 
-  },
 
-  beforeCreate() {}, //生命周期 - 创建之前
 
-  beforeMount() {}, //生命周期 - 挂载之前
 
-  beforeUpdate() {}, //生命周期 - 更新之前
 
-  updated() {}, //生命周期 - 更新之后
 
-  beforeDestroy() {}, //生命周期 - 销毁之前
 
-  destroyed() {}, //生命周期 - 销毁完成
 
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 
-};
 
-</script>
 
-<style lang="less" scoped>
 
-.Home {
 
-  position: relative;
 
-  width: 100%;
 
-  height: calc(100vh - 45px);
 
-  background-color: black;
 
-
 
-  img {
 
-    width: 100%;
 
-    height: 100%;
 
-    object-fit: cover;
 
-    cursor: pointer;
 
-  }
 
-  .bottomNav {
 
-    padding: 0 100px;
 
-    background-color: rgba(0, 0, 0, 0.8);
 
-    width: 100%;
 
-    height: 55px;
 
-    position: absolute;
 
-    left: 0;
 
-    bottom: 0;
 
-    z-index: 4;
 
-    display: flex;
 
-    & > div {
 
-      display: block;
 
-      cursor: pointer;
 
-      width: 25%;
 
-      height: 58px;
 
-      position: relative;
 
-      transform: translateY(-3px);
 
-      .title {
 
-        font-size: 14px;
 
-        color: #fff;
 
-        line-height: 55px;
 
-        text-align: center;
 
-        width: 100%;
 
-        span {
 
-          padding-left: 30px;
 
-        }
 
-      }
 
-      .info {
 
-        transition: all 0.3s;
 
-        height: 0;
 
-        overflow: hidden;
 
-        width: 100%;
 
-        position: absolute;
 
-        left: 0;
 
-        bottom: 0;
 
-        z-index: 99;
 
-        .d {
 
-          font-size: 14px;
 
-          color: #ccc;
 
-          background: #000;
 
-          padding: 20px;
 
-        }
 
-        .p {
 
-          display: block;
 
-          img {
 
-            vertical-align: bottom;
 
-          }
 
-        }
 
-      }
 
-    }
 
-    .t1:hover .info {
 
-      height: 320px;
 
-    }
 
-    .t2:hover .info {
 
-      height: 320px;
 
-    }
 
-    .t3:hover .info {
 
-      height: 270px;
 
-    }
 
-    .t4:hover .info {
 
-      height: 270px;
 
-    }
 
-    .t1:focus-within .info {
 
-      height: 320px;
 
-    }
 
-    .t2:focus-within .info {
 
-      height: 320px;
 
-    }
 
-    .t3:focus-within .info {
 
-      height: 270px;
 
-    }
 
-    .t4:focus-within .info {
 
-      height: 270px;
 
-    }
 
-    .t1 {
 
-      .title {
 
-        span {
 
-          background: url("../../assets/images/bottom_ico1.png") no-repeat left
 
-            center;
 
-        }
 
-      }
 
-      .p {
 
-        border-bottom: 3px solid #1116e5;
 
-      }
 
-      border-top: 3px solid #1116e5;
 
-    }
 
-    .t2 {
 
-      .title {
 
-        span {
 
-          background: url("../../assets/images/bottom_ico2.png") no-repeat left
 
-            center;
 
-        }
 
-      }
 
-      .p {
 
-        border-bottom: 3px solid #a211e5;
 
-      }
 
-      border-top: 3px solid #a211e5;
 
-    }
 
-    .t3 {
 
-      .title {
 
-        span {
 
-          background: url("../../assets/images/bottom_ico3.png") no-repeat left
 
-            center;
 
-        }
 
-      }
 
-      .p {
 
-        border-bottom: 3px solid #229382;
 
-      }
 
-      .d {
 
-        padding-top: 40px !important;
 
-        padding-bottom: 40px !important;
 
-      }
 
-      border-top: 3px solid #229382;
 
-    }
 
-    .t4 {
 
-      .title {
 
-        span {
 
-          background: url("../../assets/images/bottom_ico4.png") no-repeat left
 
-            center;
 
-        }
 
-      }
 
-      .p {
 
-        border-bottom: 3px solid #7a9322;
 
-      }
 
-      .d {
 
-        padding-top: 40px !important;
 
-        padding-bottom: 40px !important;
 
-      }
 
-
 
-      border-top: 3px solid #7a9322;
 
-    }
 
-    p {
 
-      margin-bottom: 5px;
 
-    }
 
-    .n1 {
 
-      line-height: 30px;
 
-      background: url(../../assets/images/bottom_sub_ico1.png) no-repeat left
 
-        center;
 
-      text-indent: 25px;
 
-      & > a {
 
-        color: #ff0000;
 
-        text-decoration: underline;
 
-        margin-left: 20px;
 
-      }
 
-    }
 
-    .n2 {
 
-      line-height: 30px;
 
-      background: url(../../assets/images/bottom_sub_ico2.png) no-repeat left
 
-        center;
 
-      text-indent: 25px;
 
-      margin-bottom: 10px;
 
-    }
 
-    .n3 {
 
-      width: 200px;
 
-      margin-bottom: 5px;
 
-      & > span {
 
-        float: right;
 
-      }
 
-    }
 
-    .n4 {
 
-      line-height: 30px;
 
-      background: url(../../assets/images/bottom_sub_ico3.png) no-repeat left
 
-        center;
 
-      text-indent: 25px;
 
-    }
 
-    .n5 {
 
-      font-size: 12px;
 
-      color: #828282;
 
-      margin-bottom: 0;
 
-    }
 
-    .n6 {
 
-      line-height: 30px;
 
-      background: url(../../assets/images/bottom_sub_ico2.png) no-repeat left
 
-        center;
 
-      text-indent: 25px;
 
-    }
 
-    .n7 {
 
-      font-size: 18px;
 
-      background: url(../../assets/images/bottom_ico3.png) no-repeat left center;
 
-      padding-left: 30px;
 
-    }
 
-    .n8 {
 
-      font-size: 18px;
 
-      background: url(../../assets/images/bottom_ico4.png) no-repeat left center;
 
-      padding-left: 30px;
 
-    }
 
-  }
 
-}
 
-</style>
 
+<template>

+  <div class="Home">

+    <!-- 轮播组件 -->

+    <el-carousel

+      data-aria-viewport-area

+      tabindex="0"

+      aria-label

+      aria-description="You've reached the slider section. This section has four image URLs. To browse the content, please use the tab key."

+    >

+      <!-- 新增的轮播图模块 -->

+      <el-carousel-item key="8">

+        <router-link

+          to="/Layout/ExhibitionsInfo?id=60&k=1"

+          replace

+          tabindex="0"

+          aria-label="Image link"

+          aria-description="Unveiling Sanxingdui And Jinsha Of Ancient Shu Civilization"

+        >

+          <img

+            :src="require(`@/assets/images/swiper8.jpg`)"

+            alt="Unveiling Sanxingdui And Jinsha Of Ancient Shu Civilization"

+          />

+        </router-link>

+      </el-carousel-item>

+

+      <el-carousel-item key="7">

+        <router-link

+          to="/Layout/ExhibitionsInfo?id=11&k=2"

+          replace

+          tabindex="0"

+          aria-label="Image link"

+          aria-description="Eternal Witness of Civilization: History of Beijing"

+        >

+          <img

+            :src="require(`@/assets/images/swiper7.jpg`)"

+            alt="Eternal Witness of Civilization: History of Beijing"

+          />

+        </router-link>

+      </el-carousel-item>

+

+      <el-carousel-item key="6">

+        <router-link

+          to="/Layout/ExhibitionsInfo?id=58&k=1"

+          replace

+          tabindex="0"

+          aria-label="Image link"

+          aria-description="Splendid Central Axis of Beijing."

+        >

+          <img

+            :src="require(`@/assets/images/swiper6.jpg`)"

+            alt="Splendid Central Axis of Beijing."

+          />

+        </router-link>

+      </el-carousel-item>

+

+      <!-- <el-carousel-item key="1">

+        <router-link

+          to="/Layout/ExhibitionsInfo?id=1&k=3"

+          replace

+          tabindex="0"

+          aria-label="Image link"

+          aria-description="The Great Journey: the 100th Anniversary of the Founding of the Communist Party of China."

+        >

+          <img

+            :src="require(`@/assets/images/swiper1.jpg`)"

+            alt="The Great Journey: the 100th Anniversary of the Founding of the Communist Party of China."

+          />

+        </router-link>

+      </el-carousel-item> -->

+      <el-carousel-item key="2">

+        <router-link

+          to="/Layout/Collections/Bronzes"

+          replace

+          tabindex="0"

+          aria-label="Image link"

+          aria-description="What's new? More arts just added to our online collections."

+        >

+          <img

+            :src="require(`@/assets/images/swiper2.jpg`)"

+            alt="What's new? More arts just added to our online collections."

+          />

+        </router-link>

+      </el-carousel-item>

+      <el-carousel-item key="3">

+        <router-link

+          to="/Layout/ExhibitionsInfo?id=10&k=2"

+          replace

+          tabindex="0"

+          aria-label="Image link"

+          aria-description="Folk Customs in old beijing."

+        >

+          <img

+            :src="require(`@/assets/images/swiper3.jpg`)"

+            alt="Folk Customs in old beijing."

+          />

+        </router-link>

+      </el-carousel-item>

+      <el-carousel-item key="4">

+        <router-link

+          to="/Layout/Publications/2"

+          replace

+          tabindex="0"

+          aria-label="Image link"

+          aria-description="Exhibition catalogues newly added to our website."

+        >

+          <img

+            :src="require(`@/assets/images/swiper4.jpg`)"

+            alt="Exhibition catalogues newly added to our website."

+          />

+        </router-link>

+      </el-carousel-item>

+    </el-carousel>

+    <!-- 底部 -->

+    <div

+      class="bottomNav"

+      data-aria-viewport-area

+      tabindex="0"

+      aria-label

+      aria-description="You've reached the pop-up window section; this section contains four URLs; please use the tab key to go through the content."

+    >

+      <div

+        class="t1"

+        @click="$router.push('/Layout/Visit/2')"

+        tabindex="0"

+        aria-label="Link"

+        aria-description="Reservation"

+      >

+        <div class="title">

+          <span class="aria-theme-independent"> Reservation </span>

+        </div>

+        <div class="info">

+          <router-link

+            class="p"

+            to="/Layout/Visit/2"

+            replace

+            tabindex="0"

+            aria-label="Image link"

+            aria-description="Reservation"

+          >

+            <img src="../../assets/images/bott1.jpg" alt="Reservation" />

+          </router-link>

+          <div class="d">

+            <p class="n1 aria-theme-independent" tabindex="0">

+              Online Reservation

+            </p>

+            <p class="n2 aria-theme-independent" tabindex="0">

+              Telephone Reservation

+            </p>

+            <p class="n3" tabindex="0">

+              Individual <span>+86 (10) 63393339</span>

+            </p>

+            <p class="n3" tabindex="0">Group <span>+86 (10) 63370458</span></p>

+          </div>

+        </div>

+      </div>

+      <div

+        class="t2"

+        @click="$router.push('/Layout/Visit/1')"

+        tabindex="0"

+        aria-label="Link"

+        aria-description="Visit Info"

+      >

+        <div class="title">

+          <span class="aria-theme-independent">Visit Info</span>

+        </div>

+        <div class="info">

+          <router-link

+            class="p"

+            to="/Layout/Visit/1"

+            replace

+            tabindex="0"

+            aria-label="Image link"

+            aria-description="Hours, Direction & Admission"

+          >

+            <img

+              src="../../assets/images/bott2.jpg"

+              alt="Hours, Direction & Admission"

+            />

+          </router-link>

+          <div class="d">

+            <p class="n4 aria-theme-independent" tabindex="0">

+              Opening Hours 09:00-17:00

+            </p>

+            <p class="n5" tabindex="0">No admission after 16:00</p>

+            <p class="n5" tabindex="0">Closed on Monday</p>

+            <p class="n6 aria-theme-independent" tabindex="0">Phone</p>

+            <p tabindex="0">+86 (10) 63370491</p>

+          </div>

+        </div>

+      </div>

+      <div

+        class="t3"

+        @click="botskip()"

+        tabindex="0"

+        aria-label="Link"

+        aria-description="Partners & Connections"

+      >

+        <div class="title">

+          <span class="aria-theme-independent">Partners & Connections</span>

+        </div>

+        <div class="info">

+          <router-link

+            class="p"

+            to="/Layout/About"

+            replace

+            tabindex="0"

+            aria-label="Image link"

+            aria-description="Partners & Connections"

+          >

+            <img

+              src="../../assets/images/bott3.jpg"

+              alt="Partners & Connections"

+            />

+          </router-link>

+          <div class="d">

+            <p class="n7 aria-theme-independent" tabindex="0">

+              Partners & Connections

+            </p>

+          </div>

+        </div>

+      </div>

+      <div

+        class="t4"

+        @click="$router.push('/Layout/Events')"

+        tabindex="0"

+        aria-label="Link"

+        aria-description="Events"

+      >

+        <div class="title">

+          <span class="aria-theme-independent">Events</span>

+        </div>

+        <div class="info">

+          <router-link

+            class="p"

+            to="/Layout/Events"

+            replace

+            tabindex="0"

+            aria-label="Image link"

+            aria-description="Events"

+          >

+            <img src="../../assets/images/bott4.jpg" alt="Events" />

+          </router-link>

+          <div class="d">

+            <p class="n8 aria-theme-independent" tabindex="0">Events</p>

+          </div>

+        </div>

+      </div>

+    </div>

+  </div>

+</template>

+

+<script>

+export default {

+  name: "Home",

+  components: {},

+  data() {

+    //这里存放数据

+    return {};

+  },

+  //监听属性 类似于data概念

+  computed: {},

+  //监控data中的数据变化

+  watch: {},

+  //方法集合

+  methods: {

+    // 底部的跳转

+    botskip() {

+      this.$router.push("/Layout/About").catch(() => {});

+      setTimeout(() => {

+        window.scrollTo({ top: 1307, behavior: "smooth" });

+      }, 100);

+    },

+  },

+  //生命周期 - 创建完成（可以访问当前this实例）

+  created() {},

+  //生命周期 - 挂载完成（可以访问DOM元素）

+  mounted() {

+    this.$eventBus.$emit(

+      "request-read",

+      `You've reached the Home Page, which features one navigation section, four window sections, and one interactive section. To choose a section, please hit the shortcut key.`

+    );

+  },

+  beforeCreate() {}, //生命周期 - 创建之前

+  beforeMount() {}, //生命周期 - 挂载之前

+  beforeUpdate() {}, //生命周期 - 更新之前

+  updated() {}, //生命周期 - 更新之后

+  beforeDestroy() {}, //生命周期 - 销毁之前

+  destroyed() {}, //生命周期 - 销毁完成

+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发

+};

+</script>

+<style lang="less" scoped>

+.Home {

+  position: relative;

+  width: 100%;

+  height: calc(100vh - 45px);

+  background-color: black;

+

+  img {

+    width: 100%;

+    height: 100%;

+    object-fit: cover;

+    cursor: pointer;

+  }

+  .bottomNav {

+    padding: 0 100px;

+    background-color: rgba(0, 0, 0, 0.8);

+    width: 100%;

+    height: 55px;

+    position: absolute;

+    left: 0;

+    bottom: 0;

+    z-index: 4;

+    display: flex;

+    & > div {

+      display: block;

+      cursor: pointer;

+      width: 25%;

+      height: 58px;

+      position: relative;

+      transform: translateY(-3px);

+      .title {

+        font-size: 14px;

+        color: #fff;

+        line-height: 55px;

+        text-align: center;

+        width: 100%;

+        span {

+          padding-left: 30px;

+        }

+      }

+      .info {

+        transition: all 0.3s;

+        height: 0;

+        overflow: hidden;

+        width: 100%;

+        position: absolute;

+        left: 0;

+        bottom: 0;

+        z-index: 99;

+        .d {

+          font-size: 14px;

+          color: #ccc;

+          background: #000;

+          padding: 20px;

+        }

+        .p {

+          display: block;

+          img {

+            vertical-align: bottom;

+          }

+        }

+      }

+    }

+    .t1:hover .info {

+      height: 320px;

+    }

+    .t2:hover .info {

+      height: 320px;

+    }

+    .t3:hover .info {

+      height: 270px;

+    }

+    .t4:hover .info {

+      height: 270px;

+    }

+    .t1:focus-within .info {

+      height: 320px;

+    }

+    .t2:focus-within .info {

+      height: 320px;

+    }

+    .t3:focus-within .info {

+      height: 270px;

+    }

+    .t4:focus-within .info {

+      height: 270px;

+    }

+    .t1 {

+      .title {

+        span {

+          background: url("../../assets/images/bottom_ico1.png") no-repeat left

+            center;

+        }

+      }

+      .p {

+        border-bottom: 3px solid #1116e5;

+      }

+      border-top: 3px solid #1116e5;

+    }

+    .t2 {

+      .title {

+        span {

+          background: url("../../assets/images/bottom_ico2.png") no-repeat left

+            center;

+        }

+      }

+      .p {

+        border-bottom: 3px solid #a211e5;

+      }

+      border-top: 3px solid #a211e5;

+    }

+    .t3 {

+      .title {

+        span {

+          background: url("../../assets/images/bottom_ico3.png") no-repeat left

+            center;

+        }

+      }

+      .p {

+        border-bottom: 3px solid #229382;

+      }

+      .d {

+        padding-top: 40px !important;

+        padding-bottom: 40px !important;

+      }

+      border-top: 3px solid #229382;

+    }

+    .t4 {

+      .title {

+        span {

+          background: url("../../assets/images/bottom_ico4.png") no-repeat left

+            center;

+        }

+      }

+      .p {

+        border-bottom: 3px solid #7a9322;

+      }

+      .d {

+        padding-top: 40px !important;

+        padding-bottom: 40px !important;

+      }

+

+      border-top: 3px solid #7a9322;

+    }

+    p {

+      margin-bottom: 5px;

+    }

+    .n1 {

+      line-height: 30px;

+      background: url(../../assets/images/bottom_sub_ico1.png) no-repeat left

+        center;

+      text-indent: 25px;

+      & > a {

+        color: #ff0000;

+        text-decoration: underline;

+        margin-left: 20px;

+      }

+    }

+    .n2 {

+      line-height: 30px;

+      background: url(../../assets/images/bottom_sub_ico2.png) no-repeat left

+        center;

+      text-indent: 25px;

+      margin-bottom: 10px;

+    }

+    .n3 {

+      width: 200px;

+      margin-bottom: 5px;

+      & > span {

+        float: right;

+      }

+    }

+    .n4 {

+      line-height: 30px;

+      background: url(../../assets/images/bottom_sub_ico3.png) no-repeat left

+        center;

+      text-indent: 25px;

+    }

+    .n5 {

+      font-size: 12px;

+      color: #828282;

+      margin-bottom: 0;

+    }

+    .n6 {

+      line-height: 30px;

+      background: url(../../assets/images/bottom_sub_ico2.png) no-repeat left

+        center;

+      text-indent: 25px;

+    }

+    .n7 {

+      font-size: 18px;

+      background: url(../../assets/images/bottom_ico3.png) no-repeat left center;

+      padding-left: 30px;

+    }

+    .n8 {

+      font-size: 18px;

+      background: url(../../assets/images/bottom_ico4.png) no-repeat left center;

+      padding-left: 30px;

+    }

+  }

+}

+</style>

+ 446 - 446
web/src/views/LearnEngage/info.vue
Переглянути файл 

@@ -1,447 +1,447 @@
 
-<template>
 
-  <div class="LearnEngageInfo">
 
-    <div
 
-      class="banWrapper"
 
-      data-aria-viewport-area
 
-      tabindex="0"
 
-      aria-label
 
-      aria-description="You've reached the banner area of the tertiary Learn & Engage page; this area has one image; please use the tab key to go through the content."
 
-    >
 
-      <div
 
-        class="ban aria-theme-independent"
 
-        tabindex="0"
 
-        aria-label="Image"
 
-        aria-description="tertiary Learn & Engage"
 
-      ></div>
 
-    </div>
 
-    <!-- 面包屑 -->
 
-    <div
 
-      class="pos"
 
-      data-aria-viewport-area
 
-      tabindex="0"
 
-      aria-label
 
-      aria-description="You've reached the path area; this area has three URLs; please use the tab key to go through the content."
 
-    >
 
-      <div>
 
-        <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
 
-        <Router-link
 
-          to="/Layout/Home"
 
-          replace
 
-          tabindex="0"
 
-          aria-description="Home"
 
-        >
 
-          Home>
 
-        </Router-link>
 
-        <Router-link
 
-          to="/Layout/LearnEngage/Students"
 
-          replace
 
-          tabindex="0"
 
-          aria-description="Learn & Engage"
 
-        >
 
-          Learn & Engage>
 
-        </Router-link>
 
-        <Router-link
 
-          :to="`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`"
 
-          replace
 
-          tabindex="0"
 
-          :aria-description="mbTxt"
 
-        >
 
-          {{ mbTxt }}>
 
-        </Router-link>
 
-      </div>
 
-    </div>
 
-    <!-- 内容 -->
 
-    <div
 
-      class="conten"
 
-      data-aria-viewport-area
 
-      tabindex="0"
 
-      aria-label
 
-      aria-description="You've reached the content area of the tertiary Learn & Engage page, please use the tab key to navigate through the content."
 
-    >
 
-      <div class="left">
 
-        <img
 
-          :src="`/data/LearnEngage/in/${id}.jpg`"
 
-          :alt="dataObj.title"
 
-          v-if="dataObj.imgShow !== 0"
 
-          tabindex="0"
 
-          :aria-description="dataObj.title"
 
-        />
 
-        <p
 
-          class="info1 aria-theme-independent"
 
-          tabindex="0"
 
-          v-show="dataObj.time"
 
-        >
 
-          {{ dataObj.time }}
 
-        </p>
 
-
 
-        <p
 
-          class="info3 aria-theme-independent"
 
-          tabindex="0"
 
-          v-show="dataObj.ren"
 
-        >
 
-          {{ dataObj.ren }}
 
-        </p>
 
-        <p
 
-          class="info2 aria-theme-independent"
 
-          tabindex="0"
 
-          v-show="dataObj.loc"
 
-        >
 
-          {{ dataObj.loc }}
 
-        </p>
 
-      </div>
 
-
 
-      <div class="right">
 
-        <h3 class="title" tabindex="0">{{ dataObj.title }}</h3>
 
-        <div class="rightMain">
 
-          <p
 
-            v-html="dataObj.top"
 
-            v-if="dataObj.top"
 
-            tabindex="0"
 
-            :aria-description="dataObj.top.replace(/(<([^>]+)>)/gi, '')"
 
-          ></p>
 
-          <div
 
-            v-html="dataObj.txt"
 
-            tabindex="0"
 
-            :aria-description="dataObj.txt.replace(/(<([^>]+)>)/gi, '')"
 
-          ></div>
 
-          <div
 
-            class="baoMingSta"
 
-            v-if="dataObj.baoming"
 
-            v-html="dataObj.baoming"
 
-          ></div>
 
-          <div class="Tip" v-if="dataObj.tip">
 
-            <h3 class="h3xx">Tip</h3>
 
-            <p v-html="dataObj.tip" tabindex="0"></p>
 
-          </div>
 
-        </div>
 
-      </div>
 
-
 
-      <!-- <div class="main bottom">
 
-        <div
 
-          class="top aria-theme-independent"
 
-          tabindex="0"
 
-          aria-description="Online Reservation"
 
-        >
 
-          <span tabindex="0" class="aria-theme-independent">{{
 
-            dataObj.tipTime
 
-          }}</span>
 
-        </div>
 
-        <div class="m2">
 
-          <img
 
-            src="/data/LearnEngage/m-27.jpg"
 
-            alt="tip"
 
-            tabindex="0"
 
-            aria-description="Tip"
 
-          />
 
-          <p v-html="dataObj.tip" tabindex="0"></p>
 
-        </div>
 
-        <div
 
-          class="back"
 
-          @click="$router.push(`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`)"
 
-          @keydown.enter.passive="
 
-            $router.push(`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`)
 
-          "
 
-          tabindex="0"
 
-          aria-label="Link"
 
-        >
 
-          Back
 
-        </div>
 
-      </div> -->
 
-    </div>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-import { LearnEngage } from "../dataAll";
 
-export default {
 
-  name: "LearnEngageInfo",
 
-  components: {},
 
-  data() {
 
-    //这里存放数据
 
-    return {
 
-      mbTxt: "",
 
-      dataObj: {},
 
-      id: null,
 
-      pageSize: null,
 
-    };
 
-  },
 
-  //监听属性 类似于data概念
 
-  computed: {},
 
-  //监控data中的数据变化
 
-  watch: {},
 
-  //方法集合
 
-  methods: {},
 
-  //生命周期 - 创建完成（可以访问当前this实例）
 
-  created() {
 
-    // 获取id和面包屑
 
-    let id = this.$route.query.id;
 
-    id = Number(id);
 
-    this.id = id;
 
-    this.mbTxt = this.$route.query.k;
 
-    // 获取数据
 
-    let temp = LearnEngage[this.mbTxt];
 
-    temp.forEach((v) => {
 
-      if (v.id === id) this.dataObj = v.info;
 
-    });
 
-    // 如果有分页
 
-    let mm = this.$route.query.m;
 
-    if (mm) {
 
-      this.pageSize = Number(mm);
 
-    }
 
-  },
 
-  //生命周期 - 挂载完成（可以访问DOM元素）
 
-  mounted() {
 
-    this.$eventBus.$emit(
 
-      "request-read",
 
-      `You've reached the tertiary page of the Learn & Engage section. This page contains one navigation section, five window sections, and one interactive section. To choose a section, please hit the shortcut key.`
 
-    );
 
-  },
 
-  beforeCreate() {}, //生命周期 - 创建之前
 
-  beforeMount() {}, //生命周期 - 挂载之前
 
-  beforeUpdate() {}, //生命周期 - 更新之前
 
-  updated() {}, //生命周期 - 更新之后
 
-  beforeDestroy() {}, //生命周期 - 销毁之前
 
-  destroyed() {}, //生命周期 - 销毁完成
 
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 
-};
 
-</script>
 
-<style lang='less' scoped>
 
-.LearnEngageInfo {
 
-  background-color: #f1f1f1;
 
-  .ban {
 
-    width: 100%;
 
-    margin: auto;
 
-    background: url("/data/LearnEngage/topBan.jpg") no-repeat center top #000000;
 
-    height: 300px;
 
-  }
 
-  .pos {
 
-    width: 100%;
 
-    overflow: hidden;
 
-    zoom: 1;
 
-    height: 50px;
 
-    & > div {
 
-      border-bottom: 1px solid black;
 
-      padding: 12px 20px 0;
 
-      height: 48px;
 
-      width: 1180px;
 
-      overflow: hidden;
 
-      zoom: 1;
 
-      margin: 0 auto;
 
-      & > span {
 
-        font-size: 12px;
 
-      }
 
-      & > a {
 
-        font-size: 12px;
 
-      }
 
-    }
 
-    .pos1 {
 
-      color: #c20e11;
 
-    }
 
-  }
 
-  .conten {
 
-    width: 1180px;
 
-    margin: 0 auto;
 
-    height: calc(100vh - 395px);
 
-    padding: 20px 50px 10px;
 
-    display: flex;
 
-    min-height: 514px;
 
-    .left {
 
-      width: 260px;
 
-      height: 100%;
 
-      & > img {
 
-        width: 100%;
 
-        max-height: calc(100% - 80px);
 
-        object-fit: cover;
 
-      }
 
-      & > p {
 
-        color: #888887;
 
-        font-size: 14px;
 
-        padding: 10px 0 10px 30px;
 
-        background: url("../../assets/images/date.png") left 5px no-repeat;
 
-        background-size: 25px 25px;
 
-      }
 
-      .info1 {
 
-        margin-top: 10px;
 
-      }
 
-      .info2 {
 
-        background: url("../../assets/images/person.png") left 5px no-repeat;
 
-        background-size: 25px 25px;
 
-      }
 
-      .info3 {
 
-        background: url("../../assets/images/address.png") left 5px no-repeat;
 
-        background-size: 25px 25px;
 
-      }
 
-    }
 
-
 
-    .right {
 
-      margin-left: 30px;
 
-      width: calc(100% - 290px);
 
-      height: 100%;
 
-      overflow-y: auto;
 
-      &::-webkit-scrollbar {
 
-        /*滚动条整体样式*/
 
-        width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
 
-        height: 1px;
 
-      }
 
-      &::-webkit-scrollbar-thumb {
 
-        /*滚动条里面小方块*/
 
-        border-radius: 10px;
 
-        -webkit-box-shadow: inset 0 0 5px transparent;
 
-        background: #e0e0e0;
 
-      }
 
-      &::-webkit-scrollbar-track {
 
-        /*滚动条里面轨道*/
 
-        -webkit-box-shadow: inset 0 0 5px transparent;
 
-        border-radius: 10px;
 
-        background: transparent;
 
-      }
 
-      .title {
 
-        font-size: 24px;
 
-        font-weight: bold;
 
-        line-height: 34px;
 
-        margin-bottom: 10px;
 
-      }
 
-      .rightMain {
 
-        font-size: 14px;
 
-        line-height: 26px;
 
-        /deep/b {
 
-          font-weight: 700;
 
-        }
 
-        .h3xx {
 
-          font-size: 16px;
 
-          font-weight: 700;
 
-        }
 
-        /deep/.myImg {
 
-          width: 300px;
 
-        }
 
-        & > p {
 
-          /deep/ p {
 
-            font-size: 14px;
 
-            line-height: 20px;
 
-            color: #1f1d1d;
 
-            margin-bottom: 10px;
 
-          }
 
-          /deep/ .centen {
 
-            text-align: center;
 
-            font-size: 16px;
 
-            font-weight: 700;
 
-          }
 
-          /deep/ .xx {
 
-            font-size: 16px;
 
-            font-weight: 700;
 
-          }
 
-        }
 
-        /deep/img {
 
-          display: block;
 
-          margin: 15px auto;
 
-          max-height: 580px;
 
-        }
 
-        & > div {
 
-          /deep/ .xx {
 
-            font-size: 16px;
 
-            font-weight: 700;
 
-          }
 
-          /deep/ span {
 
-            font-style: italic;
 
-          }
 
-          /deep/ i {
 
-            font-size: 16px;
 
-            font-weight: 700;
 
-          }
 
-          /deep/ p {
 
-            font-size: 14px;
 
-            line-height: 20px;
 
-            color: #1f1d1d;
 
-            margin-bottom: 10px;
 
-          }
 
-        }
 
-      }
 
-    }
 
-
 
-    .main {
 
-      padding: 30px 0;
 
-      background: url("/data/LearnEngage/xian.png") left top no-repeat;
 
-      font-size: 18px;
 
-      line-height: 26px;
 
-      & > p {
 
-        /deep/ p {
 
-          font-size: 18px;
 
-          line-height: 26px;
 
-          color: #1f1d1d;
 
-          margin-bottom: 15px;
 
-        }
 
-        /deep/ .centen {
 
-          text-align: center;
 
-          font-size: 20px;
 
-          font-weight: 700;
 
-        }
 
-        /deep/ .xx {
 
-          font-size: 20px;
 
-          font-weight: 700;
 
-        }
 
-      }
 
-      /deep/img {
 
-        display: block;
 
-        margin: 20px auto;
 
-        max-height: 580px;
 
-      }
 
-      & > div {
 
-        /deep/ .xx {
 
-          font-size: 20px;
 
-          font-weight: 700;
 
-        }
 
-        /deep/ span {
 
-          font-style: italic;
 
-        }
 
-        /deep/ i {
 
-          font-size: 20px;
 
-          font-weight: 700;
 
-        }
 
-        /deep/ p {
 
-          font-size: 18px;
 
-          line-height: 26px;
 
-          color: #1f1d1d;
 
-          margin-bottom: 15px;
 
-        }
 
-      }
 
-    }
 
-    .bottom {
 
-      .top {
 
-        color: #fff;
 
-        padding-left: 400px;
 
-        width: 1200px;
 
-        height: 60px;
 
-        background: url("/data/LearnEngage/m-26.jpg");
 
-        font-size: 20px;
 
-        line-height: 60px;
 
-      }
 
-      .m2 {
 
-        width: 1200px;
 
-        font-size: 18px;
 
-        line-height: 26px;
 
-        color: #666;
 
-        padding-top: 20px;
 
-        & > img {
 
-          margin-bottom: 10px;
 
-          margin-left: 0;
 
-          margin-top: 0;
 
-        }
 
-      }
 
-    }
 
-    .back {
 
-      height: 38px;
 
-      width: 160px;
 
-      margin: 30px auto;
 
-      margin-bottom: 0;
 
-      border: 1px solid #000;
 
-      font-size: 16px;
 
-      line-height: 38px;
 
-      text-align: center;
 
-      font-weight: bold;
 
-      cursor: pointer;
 
-      display: block;
 
-      background: #f1f1f1;
 
-    }
 
-  }
 
-}
 
+<template>

+  <div class="LearnEngageInfo">

+    <div

+      class="banWrapper"

+      data-aria-viewport-area

+      tabindex="0"

+      aria-label

+      aria-description="You've reached the banner area of the tertiary Learn & Engage page; this area has one image; please use the tab key to go through the content."

+    >

+      <div

+        class="ban aria-theme-independent"

+        tabindex="0"

+        aria-label="Image"

+        aria-description="tertiary Learn & Engage"

+      ></div>

+    </div>

+    <!-- 面包屑 -->

+    <div

+      class="pos"

+      data-aria-viewport-area

+      tabindex="0"

+      aria-label

+      aria-description="You've reached the path area; this area has three URLs; please use the tab key to go through the content."

+    >

+      <div>

+        <span class="pos1" tabindex="0">Your Position:&nbsp;</span>

+        <Router-link

+          to="/Layout/Home"

+          replace

+          tabindex="0"

+          aria-description="Home"

+        >

+          Home>

+        </Router-link>

+        <Router-link

+          to="/Layout/LearnEngage/Students"

+          replace

+          tabindex="0"

+          aria-description="Learn & Engage"

+        >

+          Learn & Engage>

+        </Router-link>

+        <Router-link

+          :to="`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`"

+          replace

+          tabindex="0"

+          :aria-description="mbTxt"

+        >

+          {{ mbTxt }}>

+        </Router-link>

+      </div>

+    </div>

+    <!-- 内容 -->

+    <div

+      class="conten"

+      data-aria-viewport-area

+      tabindex="0"

+      aria-label

+      aria-description="You've reached the content area of the tertiary Learn & Engage page, please use the tab key to navigate through the content."

+    >

+      <div class="left">

+        <img

+          :src="`/data/LearnEngage/in/${id}.jpg`"

+          :alt="dataObj.title"

+          v-if="dataObj.imgShow !== 0"

+          tabindex="0"

+          :aria-description="dataObj.title"

+        />

+        <p

+          class="info1 aria-theme-independent"

+          tabindex="0"

+          v-show="dataObj.time"

+        >

+          {{ dataObj.time }}

+        </p>

+

+        <p

+          class="info3 aria-theme-independent"

+          tabindex="0"

+          v-show="dataObj.ren"

+        >

+          {{ dataObj.ren }}

+        </p>

+        <p

+          class="info2 aria-theme-independent"

+          tabindex="0"

+          v-show="dataObj.loc"

+        >

+          {{ dataObj.loc }}

+        </p>

+      </div>

+

+      <div class="right">

+        <h3 class="title" tabindex="0">{{ dataObj.title }}</h3>

+        <div class="rightMain">

+          <p

+            v-html="dataObj.top"

+            v-if="dataObj.top"

+            tabindex="0"

+            :aria-description="dataObj.top.replace(/(<([^>]+)>)/gi, '')"

+          ></p>

+          <div

+            v-html="dataObj.txt"

+            tabindex="0"

+            :aria-description="dataObj.txt.replace(/(<([^>]+)>)/gi, '')"

+          ></div>

+          <div

+            class="baoMingSta"

+            v-if="dataObj.baoming"

+            v-html="dataObj.baoming"

+          ></div>

+          <div class="Tip" v-if="dataObj.tip">

+            <h3 class="h3xx">Tip</h3>

+            <p v-html="dataObj.tip" tabindex="0"></p>

+          </div>

+        </div>

+      </div>

+

+      <!-- <div class="main bottom">

+        <div

+          class="top aria-theme-independent"

+          tabindex="0"

+          aria-description="Online Reservation"

+        >

+          <span tabindex="0" class="aria-theme-independent">{{

+            dataObj.tipTime

+          }}</span>

+        </div>

+        <div class="m2">

+          <img

+            src="/data/LearnEngage/m-27.jpg"

+            alt="tip"

+            tabindex="0"

+            aria-description="Tip"

+          />

+          <p v-html="dataObj.tip" tabindex="0"></p>

+        </div>

+        <div

+          class="back"

+          @click="$router.push(`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`)"

+          @keydown.enter.passive="

+            $router.push(`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`)

+          "

+          tabindex="0"

+          aria-label="Link"

+        >

+          Back

+        </div>

+      </div> -->

+    </div>

+  </div>

+</template>

+

+<script>

+import { LearnEngage } from "../dataAll";

+export default {

+  name: "LearnEngageInfo",

+  components: {},

+  data() {

+    //这里存放数据

+    return {

+      mbTxt: "",

+      dataObj: {},

+      id: null,

+      pageSize: null,

+    };

+  },

+  //监听属性 类似于data概念

+  computed: {},

+  //监控data中的数据变化

+  watch: {},

+  //方法集合

+  methods: {},

+  //生命周期 - 创建完成（可以访问当前this实例）

+  created() {

+    // 获取id和面包屑

+    let id = this.$route.query.id;

+    id = Number(id);

+    this.id = id;

+    this.mbTxt = this.$route.query.k;

+    // 获取数据

+    let temp = LearnEngage[this.mbTxt];

+    temp.forEach((v) => {

+      if (v.id === id) this.dataObj = v.info;

+    });

+    // 如果有分页

+    let mm = this.$route.query.m;

+    if (mm) {

+      this.pageSize = Number(mm);

+    }

+  },

+  //生命周期 - 挂载完成（可以访问DOM元素）

+  mounted() {

+    this.$eventBus.$emit(

+      "request-read",

+      `You've reached the tertiary page of the Learn & Engage section. This page contains one navigation section, five window sections, and one interactive section. To choose a section, please hit the shortcut key.`

+    );

+  },

+  beforeCreate() {}, //生命周期 - 创建之前

+  beforeMount() {}, //生命周期 - 挂载之前

+  beforeUpdate() {}, //生命周期 - 更新之前

+  updated() {}, //生命周期 - 更新之后

+  beforeDestroy() {}, //生命周期 - 销毁之前

+  destroyed() {}, //生命周期 - 销毁完成

+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发

+};

+</script>

+<style lang='less' scoped>

+.LearnEngageInfo {

+  background-color: #f1f1f1;

+  .ban {

+    width: 100%;

+    margin: auto;

+    background: url("/data/LearnEngage/topBan.jpg") no-repeat center top #000000;

+    height: 300px;

+  }

+  .pos {

+    width: 100%;

+    overflow: hidden;

+    zoom: 1;

+    height: 50px;

+    & > div {

+      border-bottom: 1px solid black;

+      padding: 12px 20px 0;

+      height: 48px;

+      width: 1180px;

+      overflow: hidden;

+      zoom: 1;

+      margin: 0 auto;

+      & > span {

+        font-size: 12px;

+      }

+      & > a {

+        font-size: 12px;

+      }

+    }

+    .pos1 {

+      color: #c20e11;

+    }

+  }

+  .conten {

+    width: 1180px;

+    margin: 0 auto;

+    height: calc(100vh - 395px);

+    padding: 20px 50px 10px;

+    display: flex;

+    min-height: 514px;

+    .left {

+      width: 260px;

+      height: 100%;

+      & > img {

+        width: 100%;

+        max-height: calc(100% - 80px);

+        object-fit: cover;

+      }

+      & > p {

+        color: #888887;

+        font-size: 14px;

+        padding: 10px 0 10px 30px;

+        background: url("../../assets/images/date.png") left 5px no-repeat;

+        background-size: 25px 25px;

+      }

+      .info1 {

+        margin-top: 10px;

+      }

+      .info2 {

+        background: url("../../assets/images/address.png") left 5px no-repeat;

+        background-size: 25px 25px;

+      }

+      .info3 {

+        background: url("../../assets/images/person.png") left 5px no-repeat;

+        background-size: 25px 25px;

+      }

+    }

+

+    .right {

+      margin-left: 30px;

+      width: calc(100% - 290px);

+      height: 100%;

+      overflow-y: auto;

+      &::-webkit-scrollbar {

+        /*滚动条整体样式*/

+        width: 3px; /*高宽分别对应横竖滚动条的尺寸*/

+        height: 1px;

+      }

+      &::-webkit-scrollbar-thumb {

+        /*滚动条里面小方块*/

+        border-radius: 10px;

+        -webkit-box-shadow: inset 0 0 5px transparent;

+        background: #e0e0e0;

+      }

+      &::-webkit-scrollbar-track {

+        /*滚动条里面轨道*/

+        -webkit-box-shadow: inset 0 0 5px transparent;

+        border-radius: 10px;

+        background: transparent;

+      }

+      .title {

+        font-size: 24px;

+        font-weight: bold;

+        line-height: 34px;

+        margin-bottom: 10px;

+      }

+      .rightMain {

+        font-size: 14px;

+        line-height: 26px;

+        /deep/b {

+          font-weight: 700;

+        }

+        .h3xx {

+          font-size: 16px;

+          font-weight: 700;

+        }

+        /deep/.myImg {

+          width: 300px;

+        }

+        & > p {

+          /deep/ p {

+            font-size: 14px;

+            line-height: 20px;

+            color: #1f1d1d;

+            margin-bottom: 10px;

+          }

+          /deep/ .centen {

+            text-align: center;

+            font-size: 16px;

+            font-weight: 700;

+          }

+          /deep/ .xx {

+            font-size: 16px;

+            font-weight: 700;

+          }

+        }

+        /deep/img {

+          display: block;

+          margin: 15px auto;

+          max-height: 580px;

+        }

+        & > div {

+          /deep/ .xx {

+            font-size: 16px;

+            font-weight: 700;

+          }

+          /deep/ span {

+            font-style: italic;

+          }

+          /deep/ i {

+            font-size: 16px;

+            font-weight: 700;

+          }

+          /deep/ p {

+            font-size: 14px;

+            line-height: 20px;

+            color: #1f1d1d;

+            margin-bottom: 10px;

+          }

+        }

+      }

+    }

+

+    .main {

+      padding: 30px 0;

+      background: url("/data/LearnEngage/xian.png") left top no-repeat;

+      font-size: 18px;

+      line-height: 26px;

+      & > p {

+        /deep/ p {

+          font-size: 18px;

+          line-height: 26px;

+          color: #1f1d1d;

+          margin-bottom: 15px;

+        }

+        /deep/ .centen {

+          text-align: center;

+          font-size: 20px;

+          font-weight: 700;

+        }

+        /deep/ .xx {

+          font-size: 20px;

+          font-weight: 700;

+        }

+      }

+      /deep/img {

+        display: block;

+        margin: 20px auto;

+        max-height: 580px;

+      }

+      & > div {

+        /deep/ .xx {

+          font-size: 20px;

+          font-weight: 700;

+        }

+        /deep/ span {

+          font-style: italic;

+        }

+        /deep/ i {

+          font-size: 20px;

+          font-weight: 700;

+        }

+        /deep/ p {

+          font-size: 18px;

+          line-height: 26px;

+          color: #1f1d1d;

+          margin-bottom: 15px;

+        }

+      }

+    }

+    .bottom {

+      .top {

+        color: #fff;

+        padding-left: 400px;

+        width: 1200px;

+        height: 60px;

+        background: url("/data/LearnEngage/m-26.jpg");

+        font-size: 20px;

+        line-height: 60px;

+      }

+      .m2 {

+        width: 1200px;

+        font-size: 18px;

+        line-height: 26px;

+        color: #666;

+        padding-top: 20px;

+        & > img {

+          margin-bottom: 10px;

+          margin-left: 0;

+          margin-top: 0;

+        }

+      }

+    }

+    .back {

+      height: 38px;

+      width: 160px;

+      margin: 30px auto;

+      margin-bottom: 0;

+      border: 1px solid #000;

+      font-size: 16px;

+      line-height: 38px;

+      text-align: center;

+      font-weight: bold;

+      cursor: pointer;

+      display: block;

+      background: #f1f1f1;

+    }

+  }

+}

 </style>

Різницю між файлами не показано, бо вона завелика
+ 2933 - 2919
web/src/views/Search/data.js


Різницю між файлами не показано, бо вона завелика
+ 2956 - 2900
web/src/views/Search/dataAll.js


Різницю між файлами не показано, бо вона завелика
+ 6407 - 6287
web/src/views/dataAll.js


Різницю між файлами не показано, бо вона завелика
+ 776 - 776
web/src/views/layout/index.vue


BIN
webM/public/data/LearnEngage/in/107.jpg
Переглянути файл


BIN
webM/public/data/LearnEngage/in/108.jpg
Переглянути файл


BIN
webM/public/data/LearnEngage/in/109.jpg
Переглянути файл


BIN
webM/public/data/LearnEngage/in/110.jpg
Переглянути файл


BIN
webM/public/data/LearnEngage/in/111.jpg
Переглянути файл


BIN
webM/public/data/LearnEngage/in/112.jpg
Переглянути файл


BIN
webM/public/data/LearnEngage/in/113.jpg
Переглянути файл


BIN
webM/public/data/LearnEngage/sm/107.png
Переглянути файл


BIN
webM/public/data/LearnEngage/sm/108.png
Переглянути файл


BIN
webM/public/data/LearnEngage/sm/109.png
Переглянути файл


BIN
webM/public/data/LearnEngage/sm/110.png
Переглянути файл


BIN
webM/public/data/LearnEngage/sm/111.png
Переглянути файл


BIN
webM/public/data/LearnEngage/sm/112.png
Переглянути файл


BIN
webM/public/data/LearnEngage/sm/113.png
Переглянути файл


BIN
webM/src/assets/img/Layout/banner8.png
Переглянути файл


+ 0 - 1
webM/src/views/Exhibitions/Detail.vue
Переглянути файл 

@@ -255,7 +255,6 @@ export default {
 
 }
 
 
 .ExDetail {
 
-  padding-top: 50px;
 
   width: 100%;
 
   .topImg {
 
     width: 100%;

Різницю між файлами не показано, бо вона завелика
+ 2152 - 2124
webM/src/views/Exhibitions/data.js


Різницю між файлами не показано, бо вона завелика
+ 2163 - 2135
webM/src/views/Exhibitions/dataAll.js


+ 248 - 247
webM/src/views/Home/index.vue
Переглянути файл 

@@ -1,247 +1,248 @@
 
-<template>
 
-  <div class="Home">
 
-    <div class="one">
 
-      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
 
-        <van-swipe-item v-for="item in topImg" :key="item.id">
 
-          <img
 
-            @click="skip(item.path)"
 
-            class="topImg"
 
-            :src="require(`@/assets/img/Layout/banner${item.id}.png`)"
 
-            alt=""
 
-          />
 
-        </van-swipe-item>
 
-      </van-swipe>
 
-    </div>
 
-    <div class="main">
 
-      <div class="tow">
 
-        <div class="towTop">
 
-          <img src="../../assets/img/Layout/title.png" alt="" />
 
-          <h3>Visit Info.</h3>
 
-        </div>
 
-        <div class="towTxt">
 
-          <h3>Opening Hours 09:00-17:00</h3>
 
-          <p>
 
-            No admission after 16:00 <br />Closed on Mondays(Except for
 
-            holidays)
 
-          </p>
 
-        </div>
 
-        <div class="towTxt">
 
-          <h3>Individual visitors:</h3>
 
-          <p>+86 (10) 63393339</p>
 
-        </div>
 
-        <div class="towTxt">
 
-          <h3>Group visitors:</h3>
 
-          <p>+86 (10) 63370458</p>
 
-        </div>
 
-        <ul class="row">
 
-          <li v-for="item in vData" :key="item.id" @click="skip(item.path)">
 
-            <img :src="require(`@/assets/img/Layout/v${item.id}.png`)" alt="" />
 
-            <p>{{ item.name }}</p>
 
-          </li>
 
-        </ul>
 
-      </div>
 
-      <div class="three">
 
-        <div class="towTop">
 
-          <img src="../../assets/img/Layout/title.png" alt="" />
 
-          <h3>Partners & Connections</h3>
 
-        </div>
 
-        <ul class="row">
 
-          <li v-for="(item, index) in link" :key="index">
 
-            <a :href="item" target="_blank">
 
-              <img
 
-                :src="require(`@/assets/img/Layout/link${index + 1}.jpg`)"
 
-                alt=""
 
-              />
 
-            </a>
 
-          </li>
 
-        </ul>
 
-        <div class="more" @click="$router.push('/Layout/AboutLink')">
 
-          See More
 
-        </div>
 
-      </div>
 
-    </div>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-export default {
 
-  name: "Home",
 
-  components: {},
 
-  data() {
 
-    //这里存放数据
 
-    return {
 
-      topImg: [
 
-        // { id: 1, path: "/Layout/Detail?id=1&k=3" },
 
-        { id: 7, path: "/Layout/Detail?id=11&k=2" },
 
-        { id: 6, path: "/Layout/Detail?id=58&k=1" },
 
-        { id: 2, path: "/Layout/Collections/Bronzes" },
 
-        { id: 3, path: "/Layout/Detail?id=10&k=2" },
 
-        { id: 4, path: "/Layout/Publications/Catalogues" },
 
-      ],
 
-      vData: [
 
-        {
 
-          id: 1,
 
-          name: "Hours, Direction & Admission",
 
-          path: "/Layout/Visit/1",
 
-        },
 
-        { id: 2, name: "Floor Plans", path: "/Layout/Visit/3" },
 
-        { id: 3, name: "Audio Guide & Tour", path: "/Layout/Visit/4" },
 
-        { id: 4, name: "Accessibility", path: "/Layout/Visit/5" },
 
-        { id: 5, name: "Café & Shop", path: "/Layout/Visit/6" },
 
-        { id: 6, name: "Visitor Guidelines", path: "/Layout/Visit/7" },
 
-      ],
 
-      link: [
 
-        "http://www.edo-tokyo-museum.or.jp/en/",
 
-        "https://en.shm.ru/",
 
-        "https://www.rom.on.ca/en",
 
-        "https://museum.seoul.go.kr/eng/index.do",
 
-        "https://museumsvictoria.com.au/",
 
-        "https://www.vmfa.museum/",
 
-      ],
 
-    };
 
-  },
 
-  //监听属性 类似于data概念
 
-  computed: {},
 
-  //监控data中的数据变化
 
-  watch: {},
 
-  //方法集合
 
-  methods: {
 
-    skip(path) {
 
-      this.$router.push(path).catch(() => {});
 
-    },
 
-  },
 
-  //生命周期 - 创建完成（可以访问当前this实例）
 
-  created() {},
 
-  //生命周期 - 挂载完成（可以访问DOM元素）
 
-  mounted() {},
 
-  beforeCreate() {}, //生命周期 - 创建之前
 
-  beforeMount() {}, //生命周期 - 挂载之前
 
-  beforeUpdate() {}, //生命周期 - 更新之前
 
-  updated() {}, //生命周期 - 更新之后
 
-  beforeDestroy() {}, //生命周期 - 销毁之前
 
-  destroyed() {}, //生命周期 - 销毁完成
 
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 
-};
 
-</script>
 
-<style lang="less" scoped>
 
-.Home {
 
-  width: 100%;
 
-  // padding-top: 50px;
 
-  .one {
 
-    width: 100%;
 
-    .my-swipe {
 
-      width: 100%;
 
-      .topImg {
 
-        width: 100%;
 
-      }
 
-    }
 
-  }
 
-  .main {
 
-    padding: 0 15px;
 
-    padding-bottom: 40px;
 
-    background: url("../../assets/img/Layout/bg.png");
 
-    background-size: 100% 100%;
 
-    .towTop {
 
-      display: flex;
 
-      align-items: center;
 
-      margin-bottom: 24px;
 
-      & > img {
 
-        width: 41px;
 
-        height: 29px;
 
-        margin-right: 20px;
 
-      }
 
-      & > h3 {
 
-        color: #c1aa7b;
 
-        font-size: 22px;
 
-      }
 
-    }
 
-    .tow {
 
-      padding: 40px 0;
 
-      border-bottom: 1px solid #ccc;
 
-      .towTxt {
 
-        padding: 0 0px 0 61px;
 
-        margin-bottom: 24px;
 
-        & > h3 {
 
-          font-weight: 400;
 
-          color: #bc1c24;
 
-          font-size: 18px;
 
-          margin-bottom: 5px;
 
-        }
 
-        & > p {
 
-          color: #6a6a6a;
 
-          font-size: 14px;
 
-          line-height: 16px;
 
-        }
 
-      }
 
-      .row {
 
-        display: flex;
 
-        flex-wrap: wrap;
 
-        justify-content: space-between;
 
-        & > li {
 
-          padding-top: 5px;
 
-          background: url("../../assets/img/Layout/frame.png");
 
-          background-size: 100% 100%;
 
-          width: 161px;
 
-          height: 70px;
 
-          text-align: center;
 
-          margin-bottom: 10px;
 
-          color: #c1aa7b;
 
-          &:nth-of-type(1) {
 
-            color: #bc1c24;
 
-          }
 
-          & > p {
 
-            font-family: "Franklin Gothic Medium", "Arial Narrow", Arial,
 
-              sans-serif;
 
-            font-size: 12px;
 
-            line-height: 12px;
 
-            text-align: center;
 
-          }
 
-        }
 
-      }
 
-    }
 
-    .three {
 
-      border-bottom: 1px solid #ccc;
 
-      padding: 40px 0;
 
-      .row {
 
-        display: flex;
 
-        flex-wrap: wrap;
 
-        justify-content: space-between;
 
-        & > li {
 
-          width: 168px;
 
-          height: 62px;
 
-          margin-bottom: 10px;
 
-          & > a {
 
-            display: block;
 
-            width: 100%;
 
-            height: 100%;
 
-            & > img {
 
-              width: 100%;
 
-            }
 
-          }
 
-        }
 
-      }
 
-      .more {
 
-        margin: 20px auto 0;
 
-        width: 117px;
 
-        height: 37px;
 
-        background: url("../../assets/img/Layout/see.png");
 
-        background-size: 100% 100%;
 
-        color: #c1aa7b;
 
-        line-height: 40px;
 
-        text-align: center;
 
-      }
 
-    }
 
-  }
 
-}
 
-@media screen and (max-width: 370px) {
 
-  .main {
 
-    padding: 0 8px 40px !important;
 
-  }
 
-  .row {
 
-    display: block !important;
 
-    & > li {
 
-      margin: 0 auto 10px !important;
 
-    }
 
-  }
 
-}
 
-</style>
 
+<template>

+  <div class="Home">

+    <div class="one">

+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">

+        <van-swipe-item v-for="item in topImg" :key="item.id">

+          <img

+            @click="skip(item.path)"

+            class="topImg"

+            :src="require(`@/assets/img/Layout/banner${item.id}.png`)"

+            alt=""

+          />

+        </van-swipe-item>

+      </van-swipe>

+    </div>

+    <div class="main">

+      <div class="tow">

+        <div class="towTop">

+          <img src="../../assets/img/Layout/title.png" alt="" />

+          <h3>Visit Info.</h3>

+        </div>

+        <div class="towTxt">

+          <h3>Opening Hours 09:00-17:00</h3>

+          <p>

+            No admission after 16:00 <br />Closed on Mondays(Except for

+            holidays)

+          </p>

+        </div>

+        <div class="towTxt">

+          <h3>Individual visitors:</h3>

+          <p>+86 (10) 63393339</p>

+        </div>

+        <div class="towTxt">

+          <h3>Group visitors:</h3>

+          <p>+86 (10) 63370458</p>

+        </div>

+        <ul class="row">

+          <li v-for="item in vData" :key="item.id" @click="skip(item.path)">

+            <img :src="require(`@/assets/img/Layout/v${item.id}.png`)" alt="" />

+            <p>{{ item.name }}</p>

+          </li>

+        </ul>

+      </div>

+      <div class="three">

+        <div class="towTop">

+          <img src="../../assets/img/Layout/title.png" alt="" />

+          <h3>Partners & Connections</h3>

+        </div>

+        <ul class="row">

+          <li v-for="(item, index) in link" :key="index">

+            <a :href="item" target="_blank">

+              <img

+                :src="require(`@/assets/img/Layout/link${index + 1}.jpg`)"

+                alt=""

+              />

+            </a>

+          </li>

+        </ul>

+        <div class="more" @click="$router.push('/Layout/AboutLink')">

+          See More

+        </div>

+      </div>

+    </div>

+  </div>

+</template>

+

+<script>

+export default {

+  name: "Home",

+  components: {},

+  data() {

+    //这里存放数据

+    return {

+      topImg: [

+        // { id: 1, path: "/Layout/Detail?id=1&k=3" },

+        { id: 8, path: "/Layout/Detail?id=60&k=1" },

+        { id: 7, path: "/Layout/Detail?id=11&k=2" },

+        { id: 6, path: "/Layout/Detail?id=58&k=1" },

+        { id: 2, path: "/Layout/Collections/Bronzes" },

+        { id: 3, path: "/Layout/Detail?id=10&k=2" },

+        { id: 4, path: "/Layout/Publications/Catalogues" },

+      ],

+      vData: [

+        {

+          id: 1,

+          name: "Hours, Direction & Admission",

+          path: "/Layout/Visit/1",

+        },

+        { id: 2, name: "Floor Plans", path: "/Layout/Visit/3" },

+        { id: 3, name: "Audio Guide & Tour", path: "/Layout/Visit/4" },

+        { id: 4, name: "Accessibility", path: "/Layout/Visit/5" },

+        { id: 5, name: "Café & Shop", path: "/Layout/Visit/6" },

+        { id: 6, name: "Visitor Guidelines", path: "/Layout/Visit/7" },

+      ],

+      link: [

+        "http://www.edo-tokyo-museum.or.jp/en/",

+        "https://en.shm.ru/",

+        "https://www.rom.on.ca/en",

+        "https://museum.seoul.go.kr/eng/index.do",

+        "https://museumsvictoria.com.au/",

+        "https://www.vmfa.museum/",

+      ],

+    };

+  },

+  //监听属性 类似于data概念

+  computed: {},

+  //监控data中的数据变化

+  watch: {},

+  //方法集合

+  methods: {

+    skip(path) {

+      this.$router.push(path).catch(() => {});

+    },

+  },

+  //生命周期 - 创建完成（可以访问当前this实例）

+  created() {},

+  //生命周期 - 挂载完成（可以访问DOM元素）

+  mounted() {},

+  beforeCreate() {}, //生命周期 - 创建之前

+  beforeMount() {}, //生命周期 - 挂载之前

+  beforeUpdate() {}, //生命周期 - 更新之前

+  updated() {}, //生命周期 - 更新之后

+  beforeDestroy() {}, //生命周期 - 销毁之前

+  destroyed() {}, //生命周期 - 销毁完成

+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发

+};

+</script>

+<style lang="less" scoped>

+.Home {

+  width: 100%;

+  // padding-top: 50px;

+  .one {

+    width: 100%;

+    .my-swipe {

+      width: 100%;

+      .topImg {

+        width: 100%;

+      }

+    }

+  }

+  .main {

+    padding: 0 15px;

+    padding-bottom: 40px;

+    background: url("../../assets/img/Layout/bg.png");

+    background-size: 100% 100%;

+    .towTop {

+      display: flex;

+      align-items: center;

+      margin-bottom: 24px;

+      & > img {

+        width: 41px;

+        height: 29px;

+        margin-right: 20px;

+      }

+      & > h3 {

+        color: #c1aa7b;

+        font-size: 22px;

+      }

+    }

+    .tow {

+      padding: 40px 0;

+      border-bottom: 1px solid #ccc;

+      .towTxt {

+        padding: 0 0px 0 61px;

+        margin-bottom: 24px;

+        & > h3 {

+          font-weight: 400;

+          color: #bc1c24;

+          font-size: 18px;

+          margin-bottom: 5px;

+        }

+        & > p {

+          color: #6a6a6a;

+          font-size: 14px;

+          line-height: 16px;

+        }

+      }

+      .row {

+        display: flex;

+        flex-wrap: wrap;

+        justify-content: space-between;

+        & > li {

+          padding-top: 5px;

+          background: url("../../assets/img/Layout/frame.png");

+          background-size: 100% 100%;

+          width: 161px;

+          height: 70px;

+          text-align: center;

+          margin-bottom: 10px;

+          color: #c1aa7b;

+          &:nth-of-type(1) {

+            color: #bc1c24;

+          }

+          & > p {

+            font-family: "Franklin Gothic Medium", "Arial Narrow", Arial,

+              sans-serif;

+            font-size: 12px;

+            line-height: 12px;

+            text-align: center;

+          }

+        }

+      }

+    }

+    .three {

+      border-bottom: 1px solid #ccc;

+      padding: 40px 0;

+      .row {

+        display: flex;

+        flex-wrap: wrap;

+        justify-content: space-between;

+        & > li {

+          width: 168px;

+          height: 62px;

+          margin-bottom: 10px;

+          & > a {

+            display: block;

+            width: 100%;

+            height: 100%;

+            & > img {

+              width: 100%;

+            }

+          }

+        }

+      }

+      .more {

+        margin: 20px auto 0;

+        width: 117px;

+        height: 37px;

+        background: url("../../assets/img/Layout/see.png");

+        background-size: 100% 100%;

+        color: #c1aa7b;

+        line-height: 40px;

+        text-align: center;

+      }

+    }

+  }

+}

+@media screen and (max-width: 370px) {

+  .main {

+    padding: 0 8px 40px !important;

+  }

+  .row {

+    display: block !important;

+    & > li {

+      margin: 0 auto 10px !important;

+    }

+  }

+}

+</style>

Різницю між файлами не показано, бо вона завелика
+ 1850 - 1759
webM/src/views/Learn/data.js


Різницю між файлами не показано, бо вона завелика
+ 3090 - 3076
webM/src/views/Search/data.js


Різницю між файлами не показано, бо вона завелика
+ 2867 - 2811
webM/src/views/Search/dataAll.js