Merge branch 'master' of http://192.168.0.115:3000/shaogen1995/ShouBo

webM/src/components/card.vue

@@ -135,6 +135,7 @@ export default {
     display: flex;
     flex-direction: column;
     & > img {
+      touch-action: pan-y!important;
       width: 100%;
       height: 254px;
       object-fit: cover;
@@ -148,6 +149,7 @@ export default {
     }
 
     .txt {
+      touch-action: pan-y!important;
       height: 260px;
       overflow-y: auto;
       padding: 20px 20px 0;

webM/src/router/index.js

@@ -207,6 +207,68 @@ const routes = [
         component: () => import('../views/Join/info.vue'),
         meta: { myTitle: 'Join & Support', topColor: '#b37f52' },
       },
+      // About页面
+      {
+        path: '/Layout/About/:id',
+        name: 'About',
+        component: () => import('../views/About/index.vue'),
+        meta: { myTitle: 'About', topColor: '#9f5b14' },
+      },
+      {
+        path: '/Layout/AboutDirector',
+        name: 'AboutDirector',
+        component: () => import('../views/About/Director.vue'),
+        meta: { myTitle: 'About', topColor: '#9f5b14' },
+      },
+      {
+        path: '/Layout/AboutLink',
+        name: 'AboutLink',
+        component: () => import('../views/About/Link.vue'),
+        meta: { myTitle: 'About', topColor: '#9f5b14' },
+      },
+      // 底部 
+      {
+        path: '/Layout/Use',
+        name: 'Use',
+        component: () => import('../views/bottom/Use.vue'),
+        meta: { myTitle: 'Terms of Use', topColor: '#806245' },
+      },
+      {
+        path: '/Layout/Employment',
+        name: 'Employment',
+        component: () => import('../views/bottom/Employment.vue'),
+        meta: { myTitle: 'Employment', topColor: '#806245' },
+      },
+      {
+        path: '/Layout/Events',
+        name: 'Events',
+        component: () => import('../views/bottom/Events/index.vue'),
+        meta: { myTitle: 'Events', topColor: '#a39382' },
+      },
+      {
+        path: '/Layout/EventsInfo1/:id',
+        name: 'EventsInfo1',
+        component: () => import('../views/bottom/Events/info1.vue'),
+        meta: { myTitle: 'Events', topColor: '#2d425a' },
+      },
+      {
+        path: '/Layout/EventsInfo2/:id',
+        name: 'EventsInfo2',
+        component: () => import('../views/bottom/Events/info2.vue'),
+        meta: { myTitle: 'Events', topColor: '#4c2949' },
+      },
+      {
+        path: '/Layout/EventsInfo3/:id',
+        name: 'EventsInfo3',
+        component: () => import('../views/bottom/Events/info3.vue'),
+        meta: { myTitle: 'Events', topColor: '#712018' },
+      },
+      {
+        path: '/Layout/EventsInfo4/:id',
+        name: 'EventsInfo4',
+        component: () => import('../views/bottom/Events/info4.vue'),
+        meta: { myTitle: 'Events', topColor: '#9b7000' },
+      },
     ]
   }
 ]

webM/src/views/About/Link.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="AboutLink">
+    <div class="ban">
+      <img src="@/assets/img/bannerA.png" alt="" />
+      <h3>About</h3>
+      <div class="main">
+        <div class="box" v-for="(item, index) in data" :key="index">
+          <h3 class="title">{{ item.title }}</h3>
+          <div
+            class="row"
+            v-for="val in item.son"
+            :key="val.img"
+            @click="skip(val.url)"
+          >
+            <img :src="`/data/About/link/${val.img}.jpg`" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AboutLink",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [
+        {
+          title: "Australia",
+          son: [
+            {
+              img: "1",
+              url: "https://museumsvictoria.com.au/",
+              pop: "Museums Victoria",
+            },
+          ],
+        },
+        {
+          title: "Cambodia",
+          bac: true,
+          son: [
+            {
+              img: "2",
+              url: "https://apsaraauthority.gov.kh/?page=front&lg=en",
+              pop: "The Authority for the protection of the site and the Management of the Region of Angkor (APSARA National Authority or ANA)",
+            },
+          ],
+        },
+        {
+          title: "Canada",
+          son: [
+            {
+              img: "3",
+              url: "https://www.rom.on.ca/en",
+              pop: "Royal Ontario Museum",
+            },
+            {
+              img: "4",
+              url: "https://royalbcmuseum.bc.ca/",
+              pop: "The Royal British Columbia Museum",
+            },
+          ],
+        },
+        {
+          title: "Colombia",
+          bac: true,
+          son: [
+            {
+              img: "5",
+              url: "http://www.museonacional.gov.co/Paginas/default.aspx",
+              pop: "Museo Nacional de Columbia",
+            },
+          ],
+        },
+        {
+          title: "Hungary",
+          son: [
+            {
+              img: "6",
+              url: "https://mnm.hu/en",
+              pop: "Hungarian National Museum",
+            },
+            {
+              img: "7",
+              url: "http://www.btm.hu/en/",
+              pop: "Budapesti Történeti Múzeum",
+            },
+          ],
+        },
+        {
+          title: "Japan",
+          bac: true,
+          son: [
+            {
+              img: "8",
+              url: "http://www.edo-tokyo-museum.or.jp/en/",
+              pop: "Edo-Tokyo Museum",
+            },
+          ],
+        },
+        {
+          title: "Mauritius",
+          son: [
+            {
+              img: "9",
+              url: "http://www.mauritiusmuseums.mu/English/Pages/default.aspx",
+              pop: "Mauritius Museums Council",
+            },
+          ],
+        },
+        {
+          title: "Poland",
+          bac: true,
+          son: [
+            {
+              img: "10",
+              url: "https://mnwr.pl/en/",
+              pop: "National Museum in Wroclaw",
+            },
+          ],
+        },
+        {
+          title: "Republic of Korea",
+          son: [
+            {
+              img: "11",
+              url: "https://museum.seoul.go.kr/eng/index.do",
+              pop: "Seoul Museum of History",
+            },
+          ],
+        },
+        {
+          title: "Russia",
+          bac: true,
+          son: [
+            {
+              img: "12",
+              url: "https://en.shm.ru/",
+              pop: "Russian State Historical Museum",
+            },
+            {
+              img: "13",
+              url: "https://mosmuseum.ru/",
+              pop: "Museum of Moscow",
+            },
+          ],
+        },
+        {
+          title: "Thailand",
+          son: [
+            {
+              img: "14",
+              url: "https://www.mynmv.com/",
+              pop: "National Museum Bangkok",
+            },
+          ],
+        },
+        {
+          title: "Ukraine",
+          bac: true,
+          son: [
+            {
+              img: "15",
+              url: "http://www.lhm.lviv.ua/eng/index.html",
+              pop: "Lviv Historical Museum",
+            },
+            {
+              img: "16",
+              url: "https://khanenkomuseum.kiev.ua/en/main",
+              pop: "The Khanenko Museum",
+            },
+            {
+              img: "17",
+              url: "http://www.kyivhistorymuseum.org/en/museum-affiliates",
+              pop: "Museum of Kyiv History",
+            },
+          ],
+        },
+        {
+          title: "United States of America",
+          son: [
+            {
+              img: "18",
+              url: "https://fisher.usc.edu/",
+              pop: "University of Southern California Fisher Museum of Art",
+            },
+            {
+              img: "19",
+              url: "https://www.samuseum.org/",
+              pop: "San Antonio Museum of Art",
+            },
+            {
+              img: "20",
+              url: "https://www.vmfa.museum/",
+              pop: "Virginia Museum of Fine Arts",
+            },
+          ],
+        },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    skip(url){
+      window.open(url)
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.AboutLink {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 20px;
+      bottom: 20px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    padding: 20px 20px 40px;
+    .box {
+      width: 100%;
+      margin: 0 auto 20px;
+      max-width: 305px;
+      .title {
+        font-size: 22px;
+        font-weight: 700;
+        padding-left: 30px;
+        background: url("../../assets/img/Layout/chosen.png") left center
+          no-repeat;
+        background-size: 22px 18px;
+        margin-bottom: 12px;
+      }
+      .row {
+        background: url("/data/About/a2.gif");
+        border-start-start-radius: 100% 100%;
+        width: 100%;
+        margin-bottom: 5px;
+        & > img {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

webM/src/views/About/index.vue

@@ -0,0 +1,376 @@
+<template>
+  <div class="About">
+    <div class="ban" ref="ban">
+      <img src="@/assets/img/bannerA.png" alt="" />
+      <h3>About</h3>
+    </div>
+    <div class="main">
+      <div class="mainBox" :class="{ curSorll: menaSon }">
+        <div class="rowAll">
+          <div
+            @click="cutTab(index)"
+            class="row"
+            v-for="(item, index) in tabData"
+            :key="index"
+            :class="{ active: idMate === index }"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <!-- 1 -->
+      <div id="About1">
+        <h3 class="title">From the Director</h3>
+        <p>Welcome to the website of the Capital Museum of China.</p>
+        <p>
+          We are looking forward to your visit. The Capital Museum is a palace
+          of Beijing culture. Its collections relate to the long development of
+          the capital city, showcasing its magnificent living history of 500,000
+          years, urban history of 3,000 years and history as the Chinese capital
+          for 800 years. The museum also presents cultural and artistic
+          exhibitions from different regions and displays the achievements of
+          various ethnic groups at home and abroad. You can feel the breadth of
+          both Chinese and world civilizations.
+        </p>
+        <p>
+          Historical culture is the soul of a city and in the case of Beijing it
+          is a great witness to the long history of Chinese civilization. We are
+          looking forward to welcoming you to share with us the full
+          interpretation of this glorious civilization while immersing yourself
+          in the great wisdom of Beijing.
+        </p>
+        <div class="more" @click="$router.push('/Layout/AboutDirector')">
+          See More
+        </div>
+      </div>
+      <!-- 2 -->
+      <div id="About2">
+        <h3 class="title">History</h3>
+        <p>
+          The Capital Museum, located in the Confucius Temple, was prepared in
+          1953 and formally opened in 1981.
+        </p>
+        <p>
+          As a major cultural construction project in Beijing in the "10th
+          Five-Year Plan", the new complex of the Capital Museum, approved by
+          the Beijing Municipal Government in 1999, further approved by the
+          State Council after being submitted by the National Development and
+          Reform Commission in 2001, commenced its construction in December
+          2001.
+        </p>
+        <p>
+          The new Capital Museum had the trial operation in December 2005 and
+          was officially opened on May 18, 2006. With its magnificent
+          architecture, abundant exhibitions, advanced technology and complete
+          functions, the Capital Museum contributes to Beijing's standing as a
+          famous historical and cultural city, a cultural centre and an
+          international metropolis and ranks among the first class museums both
+          at home and abroad and is regarded as one of the first "State
+          First-class Museums" in 2008.
+        </p>
+      </div>
+      <!-- 3 -->
+      <div id="About3">
+        <h3 class="title">Partners & Connections</h3>
+        <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>
+      <!-- 4 -->
+      <div id="About4">
+        <h3 class="title">Contact Us</h3>
+        <div class="pp">Official website of Capital Museum:</div>
+        <p>首页（地址待定）</p>
+        <div class="pp">Telephone reservation (individual visitors):</div>
+        <p>+86 (10) 63393339</p>
+        <div class="pp">Telephone reservation (group visitors):</div>
+        <p>+86 (10) 63370458</p>
+        <div class="pp">Inquiry Hotline:</div>
+        <p>+86 (10) 63370491</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "About",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      menaSon: false,
+      idMate: 0,
+      tabData: [
+        { name: "From the Director", path: "/Layout/About/1" },
+        { name: "History", path: "/Layout/About/2" },
+        { name: "Partners & Connections", path: "/Layout/About/3" },
+        { name: "Contact", path: "/Layout/About/4" },
+      ],
+      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: {
+    $route() {
+      // 获取地址栏参数id
+      let id = this.$route.params.id;
+      id = Number(id);
+      this.pageSrool(id - 1);
+      this.erjiTop(id - 1);
+    },
+  },
+  //方法集合
+  methods: {
+    cutTab(index) {
+      this.pageSrool(index);
+      this.erjiTop(index);
+    },
+    // 封装一个二级顶部滑动的方法
+    erjiTop(index) {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.idMate = index;
+          // 获取二级选中元素距离左侧的距离
+          let sonScroll = document.querySelectorAll(".rowAll .row");
+          let sonScrollAll = document.querySelector(".mainBox");
+          sonScrollAll.scrollTo({
+            left: sonScroll[index].offsetLeft - 100,
+            behavior: "smooth",
+          });
+        }, 100);
+      });
+    },
+    // 封装一个页面的滚动
+    pageSrool(index) {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          // 滚动
+          // 获取元素距离顶部的距离
+          let dom = document.querySelector(`#About${index + 1}`);
+          // 获取主滚动元素
+          let domScroll = document.querySelector(".Layout");
+          domScroll.scrollTo({ top: dom.offsetTop - 70 });
+        }, 100);
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        // 获取顶部元素ban的高度
+        let banDom = this.$refs.ban;
+        // 获取滚动的总元素
+        let scrollDom = document.querySelector(".Layout");
+        // 获取顶部固定栏
+        let LayoutTop = document.querySelector(".Layout .top");
+        // 动态改变idMate高亮效果
+        let About1 = document.querySelector("#About1");
+        let About2 = document.querySelector("#About2");
+        let About3 = document.querySelector("#About3");
+        let temp;
+
+        scrollDom.onscroll = () => {
+          if (scrollDom.scrollTop > banDom.offsetHeight) {
+            LayoutTop.style.display = "none";
+            this.menaSon = true;
+          } else {
+            LayoutTop.style.display = "flex";
+            this.menaSon = false;
+          }
+          if (scrollDom.scrollTop < About1.offsetTop + About1.offsetHeight - 70)
+            temp = 0;
+          else if (
+            scrollDom.scrollTop <
+            About2.offsetTop + About2.offsetHeight - 70
+          )
+            temp = 1;
+          else if (
+            scrollDom.scrollTop <
+            About3.offsetTop + About3.offsetHeight - 70
+          )
+            temp = 2;
+          else temp = 3;
+          this.erjiTop(temp);
+        };
+
+        // 获取地址栏参数id
+        let id = this.$route.params.id;
+        id = Number(id);
+        this.pageSrool(id - 1);
+        this.erjiTop(id - 1);
+      }, 200);
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {
+    // 获取滚动的总元素,删除滚动事件
+    let scrollDom = document.querySelector(".Layout");
+    scrollDom.onscroll = null;
+    // 获取顶部固定栏
+    let LayoutTop = document.querySelector(".Layout .top");
+    LayoutTop.style.display = "flex";
+  }, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+::-webkit-scrollbar {
+  height: 0;
+  width: 0;
+  color: transparent;
+}
+
+.About {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 20px;
+      bottom: 20px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    padding: 0 15px;
+    background: url("../../assets/img/bgA.png");
+    background-size: 100% 100%;
+    .mainBox {
+      width: 100%;
+      overflow-x: auto;
+      z-index: 10;
+      .rowAll {
+        width: 545px;
+        padding: 20px;
+        background-color: #f7f6f3;
+        .row {
+          display: inline-block;
+          font-size: 16px;
+          height: 30px;
+          line-height: 30px;
+          margin-right: 10px;
+          padding: 0 8px;
+        }
+        .active {
+          background-color: #c1aa7b;
+          border-radius: 15px;
+          color: #fff;
+        }
+      }
+    }
+    .title {
+      font-size: 22px;
+      font-weight: 700;
+      padding-left: 30px;
+      background: url("../../assets/img/Layout/chosen.png") left center
+        no-repeat;
+      background-size: 22px 18px;
+      margin-bottom: 20px;
+    }
+    p {
+      font-size: 14px;
+      line-height: 18px;
+      color: #6a6a6a;
+      margin-bottom: 15px;
+    }
+    .more {
+      margin: 20px auto 10px;
+      width: 117px;
+      height: 37px;
+      background: url("../../assets/img/Layout/see.png");
+      background-size: 100% 100%;
+      color: #c1aa7b;
+      line-height: 40px;
+      text-align: center;
+    }
+    #About1 {
+      padding: 20px 10px 30px;
+      border-bottom: 1px solid #ccc;
+    }
+    #About2 {
+      padding: 40px 10px;
+      border-bottom: 1px solid #ccc;
+    }
+    #About3 {
+      padding: 40px 0;
+      border-bottom: 1px solid #ccc;
+      .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%;
+            }
+          }
+        }
+      }
+    }
+    #About4 {
+      padding: 40px 10px;
+      .pp {
+        font-weight: 18px;
+        font-weight: 700;
+        line-height: 20px;
+        color: #bc1c24;
+      }
+    }
+  }
+  .curSorll {
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+}
+@media screen and (max-width: 370px) {
+  #About3 {
+    .row {
+      display: block !important;
+      & > li {
+        margin: 0 auto 10px !important;
+      }
+    }
+  }
+}
+</style>

webM/src/views/Exhibitions/Detail.vue

@@ -331,6 +331,7 @@ export default {
           font-size: 14px;
         }
         .txt {
+          touch-action: pan-y!important;
           padding: 20px;
           width: 100%;
           height: 480px;
@@ -368,6 +369,7 @@ export default {
     }
     padding: 40px 0 0;
     .box3_Obj {
+      touch-action: pan-y!important;
       display: flex;
       align-items: center;
       justify-content: space-around;

webM/src/views/Home/index.vue

@@ -4,6 +4,7 @@
       <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=""
@@ -26,7 +27,7 @@
           <p>+86 (10) 63370491</p>
         </div>
         <ul class="row">
-          <li v-for="item in vData" :key="item.id">
+          <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>
@@ -47,7 +48,9 @@
             </a>
           </li>
         </ul>
-        <div class="more">See More</div>
+        <div class="more" @click="$router.push('/Layout/AboutLink')">
+          See More
+        </div>
       </div>
     </div>
   </div>
@@ -61,18 +64,22 @@ export default {
     //这里存放数据
     return {
       topImg: [
-        { id: 1, path: "" },
-        { id: 2, path: "" },
-        { id: 3, path: "" },
-        { id: 4, path: "" },
+        { id: 1, path: "/Layout/Detail?id=1&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: "" },
-        { id: 2, name: "Floor Plans", path: "" },
-        { id: 3, name: "Audio Guide & Tour", path: "" },
-        { id: 4, name: "Accessibility", path: "" },
-        { id: 5, name: "Café & Shop", path: "" },
-        { id: 6, name: "Visitor Guidelines", path: "" },
+        {
+          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/",
@@ -89,7 +96,11 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    skip(path) {
+      this.$router.push(path).catch(() => {});
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）

webM/src/views/Join/Volunteer.vue

@@ -73,6 +73,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .JoinVo {
+  touch-action: pan-y!important;
   padding: 20px 0 40px;
   background-color: #f7f6f3;
   .row {

webM/src/views/Join/info.vue

@@ -5,8 +5,16 @@
       <h3>Join & Support</h3>
     </div>
     <div class="main">
-      <h3>{{data.h3}}</h3>
+      <h3>{{ data.h3 }}</h3>
       <div class="txt" v-html="data.txt"></div>
+      <!-- 第二个 -->
+      <div class="card" v-if="data.card">
+        <div v-for="(item, index) in data.card" :key="index">
+          <h3>{{ item.h2 }}</h3>
+          <div class="cardTxt" v-html="item.pp"></div>
+        </div>
+      </div>
+      <div class="bottom" v-if="data.bott" v-html="data.bott"></div>
     </div>
   </div>
 </template>
@@ -19,7 +27,6 @@ export default {
   data() {
     //这里存放数据
     return {
-      menaSon: false,
       data: {},
     };
   },
@@ -38,40 +45,16 @@ export default {
     Volunteer.forEach((v) => {
       if (v.id === id) this.data = v;
     });
-    console.log(id);
-    this.$nextTick(() => {
-      setTimeout(() => {
-        // 获取顶部元素ban的高度
-        let banDom = this.$refs.ban;
-        // 获取滚动的总元素
-        let scrollDom = document.querySelector(".Layout");
-        // 获取顶部固定栏
-        let LayoutTop = document.querySelector(".Layout .top");
-        scrollDom.onscroll = () => {
-          if (scrollDom.scrollTop > banDom.offsetHeight) {
-            LayoutTop.style.display = "none";
-            this.menaSon = true;
-          } else {
-            LayoutTop.style.display = "flex";
-            this.menaSon = false;
-          }
-        };
-      }, 0);
-    });
+    setTimeout(() => {
+      document.title = this.data.h3;
+    }, 100);
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {
-    // 获取滚动的总元素,删除滚动事件
-    let scrollDom = document.querySelector(".Layout");
-    scrollDom.onscroll = null;
-    // 获取顶部固定栏
-    let LayoutTop = document.querySelector(".Layout .top");
-    LayoutTop.style.display = "flex";
-  }, //生命周期 - 销毁完成
+  destroyed() {}, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
@@ -94,8 +77,8 @@ export default {
     }
   }
   .main {
-    padding:30px 20px;
-    background: url('../../assets/img/Join/bgD.png');
+    padding: 30px 20px;
+    background: url("../../assets/img/Join/bgD.png");
     background-size: 100% 100%;
     & > h3 {
       margin-bottom: 15px;
@@ -106,10 +89,39 @@ export default {
         no-repeat;
       background-size: 22px 18px;
     }
-    .txt{
-      /deep/p{
+    .txt {
+      font-size: 14px;
+      color: #6a6a6a;
+      line-height: 16px;
+      margin-bottom: 15px;
+
+      /deep/p {
+        font-size: 14px;
+        color: #6a6a6a;
+        line-height: 16px;
+        margin-bottom: 15px;
+      }
+    }
+    .card {
+      h3 {
+        font-size: 16px;
+        font-weight: 400;
+        margin-bottom: 15px;
+      }
+    }
+    .cardTxt {
+      /deep/p {
+        font-size: 14px;
+        color: #6a6a6a;
+        line-height: 16px;
+        margin-bottom: 15px;
+      }
+    }
+    .bottom {
+      padding-top: 20px;
+      /deep/ p {
+        text-align: center;
         font-size: 14px;
-        color: #6A6A6A;
         line-height: 16px;
         margin-bottom: 15px;
       }

webM/src/views/Layout/index.vue

@@ -109,9 +109,9 @@
         </p>
       </div>
       <div class="link">
-        <span>Terms of Use</span>
-        <span>Events</span>
-        <span>Employmen</span>
+        <span @click="$router.push('/Layout/Use')">Terms of Use</span>
+        <span @click="$router.push('/Layout/Events')">Events</span>
+        <span @click="$router.push('/Layout/Employment')">Employmen</span>
       </div>
     </div>
   </div>
@@ -222,10 +222,10 @@ export default {
           name: "About",
           path: "",
           son: [
-            { name: "From the Director", path: "" },
-            { name: "History", path: "" },
-            { name: "Partners & Connections", path: "" },
-            { name: "Contact", path: "" },
+            { name: "From the Director", path: "/Layout/About/1" },
+            { name: "History", path: "/Layout/About/2" },
+            { name: "Partners & Connections", path: "/Layout/About/3" },
+            { name: "Contact", path: "/Layout/About/4" },
           ],
         },
       ],

webM/src/views/Publications/Catalogues.vue

@@ -140,6 +140,7 @@ export default {
       background-color: #fff;
       box-shadow: 0px 1px 4px 3px #ccc;
       & > img {
+        touch-action: pan-y!important;
         border-radius: 8px;
         width: 100%;
         height: 100%;

webM/src/views/Publications/Magazines.vue

@@ -385,6 +385,7 @@ export default {
         background: url("../../assets/img/PuBc.jpg");
         background-size: 100% 100%;
         & > img {
+          touch-action: pan-y!important;
           border-radius: 8px;
           width: 100%;
           height: 100%;

webM/src/views/Visit/index.vue

@@ -260,6 +260,7 @@ export default {
           // 获取元素距离顶部的距离
           let dom = document.querySelector(`#Visit${index + 1}`);
           // 获取主滚动元素
+          console.log('------',dom.offsetTop);
           let domScroll = document.querySelector(".Layout");
           domScroll.scrollTo({ top: dom.offsetTop - 70 });
         }, 100);
@@ -267,7 +268,12 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    // if (location.href.indexOf("#reloaded") == -1) {
+    //   location.href = location.href + "#reloaded";
+    //   window.location.reload();
+    // }
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.$nextTick(() => {
@@ -330,7 +336,7 @@ export default {
         id = Number(id);
         this.pageSrool(id - 1);
         this.erjiTop(id - 1);
-      }, 0);
+      }, 200);
     });
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -364,7 +370,7 @@ export default {
     & > img {
       width: 100%;
     }
-    &>h3{
+    & > h3 {
       position: absolute;
       font-size: 24px;
       color: #fff;

webM/src/views/bottom/Employment.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="Employment">
+    <div class="ban" ref="ban">
+      <img src="@/assets/img/bannerUse.png" alt="" />
+      <h3>Employment</h3>
+    </div>
+    <div class="main">
+      <div class="box1">
+        <h3>
+          2017 Second-Half Public Recruitment Notice of the Capital Museum
+        </h3>
+        <div class="info">
+          <span class="info_1">2018</span>
+          <span class="info_3">Capital Museum</span>
+        </div>
+      </div>
+      <div class="box2">
+        <h3>Exhibition Overview</h3>
+        <p>
+          In accordance with the regulations covering open recruitment of public
+          institutions issued by the Beijing Municipal Human Resources and
+          Social Security Bureau and the Beijing Municipal Administration of
+          Cultural Heritage, and considering the growing work demands of the
+          Museum, 12 job vacancies have now become available. The details are as
+          follows:
+        </p>
+        <p>
+          ⅠRequirements: <br />1. Chinese nationality; support the leadership of
+          the Communist Party of China <br />2. Have a passion for museum work;
+          healthy, honest, law-abiding <br />3. Have permanent residence and
+          personal files lodged in Beijing <br />4. For requirements of each
+          position, please refer to the “2017 Second-Half Public Recruitment
+          Notice of the Capital Museum (Attachment 1)” <br />5. “35 and under”
+          refers to people born after October 13, 1981; “40 and under” refers to
+          people born after October 13, 1976.
+        </p>
+        <p>
+          ⅡApplication and Eligibility Assessment
+          <br />All applicants will have to undergo a through eligibility
+          assessment on the spot. Please fill out and print the application form
+          (Attachment 2) beforehand and take it with you to the assessment.
+          <br />1. Time and Location of Assessment <br />September 26 to 27
+          <br />A.M. : 9:30—11:30 P.M. : 13:30—16:30 <br />Location: Management
+          Office of the White Dagoba Temple in Beijing (No. 171 Funei Street,
+          Xicheng District. Please show your application form when entering.)
+          <br />2. Materials to Be Submitted <br />1). Application form, ID
+          card, details of household registration <br />2). Diploma, stamped
+          materials showing your work experience or labor contract supplemented
+          by payment records of social insurance, and required certificates of
+          title. <br />3). Other certificates and materials to be stipulated as
+          needed. <br />All materials above should be presented in the original.
+        </p>
+        <p>
+          Ⅲ Admission Card <br />For candidates who pass the initial eligibility
+          assessment, please collect your admission card at the Management
+          Office of the White Dagoba Temple on October 11 (9:30—11:30 A.M.
+          13:30—16:30 P.M.) with assessment card, original ID card and a recent
+          one-inch certified personal photo.
+        </p>
+        <p>
+          Ⅳ Written Examination <br />The written examination will be conducted
+          in the form of a comprehensive capacity test and organized by the
+          Beijing Talent Service Center and the Beijing Municipal Administration
+          of Cultural Heritage. <br />Time: 9:00—11:30 A.M. on October 14
+          <br />Location：please refer to the admission card
+        </p>
+        <p>
+          Ⅴ Interview <br />One-fifth of candidates scoring over 60 will be
+          interviewed. The list of interviewees will be uploaded onto the
+          website of the Beijing Municipal Administration of Cultural Heritage
+          20 days after the written test.
+        </p>
+        <p>
+          Ⅵ Total Score <br />The pass mark for the interview is 60. The total
+          score will comprise of the written test (60%) and the interview score
+          (40%).
+        </p>
+        <p>
+          Ⅶ Physical Examination <br />All the candidates who sored over 60 at
+          the final stage will be subjected to a physical examination. This will
+          be organized and conducted by the recruiting organization.
+        </p>
+        <p>
+          Ⅷ Completion of Employment Formalities <br />Personnel to be recruited
+          will be chosen from candidates who emerged as the best in the written
+          exam and interview and qualified through the physical examination. The
+          list will be uploaded onto the website of Beijing Municipal
+          Administration of Cultural Heritage for seven working days, after
+          which we will inform chosen personnel to complete employment
+          formalities.
+        </p>
+        <p>
+          Ⅸ Notes <br />Eligibility assessment will be conducted throughout the
+          entire recruitment process. At any stage, any candidates believed to
+          have violated the recruitment regulations, provided false information
+          or forged certificates, deemed to have cheated in the examination,
+          etc., will be dealt with seriously and be disqualified from
+          consideration for the advertised position. From the eligibility
+          assessment to the end of the recruitment process, candidates should
+          ensure they are always available by phone. If not, the candidate will
+          take full responsibility of our failing to inform them.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Employment",
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Employment {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 20px;
+      bottom: 20px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    padding: 20px 20px 40px;
+    background: url("../../assets/img/bgEm.png");
+    background-size: 100% 100%;
+    .box1 {
+      padding: 0 15px 5px;
+      border-bottom: 1px solid #ccc;
+      & > h3 {
+        font-size: 22px;
+        font-weight: 700;
+        padding-left: 30px;
+        background: url("../../assets/img/Layout/chosen.png") left center
+          no-repeat;
+        background-size: 22px 18px;
+        margin-bottom: 5px;
+      }
+      .info {
+        font-size: 14px;
+        line-height: 30px;
+        color: #666;
+        overflow: hidden;
+        zoom: 1;
+        margin-bottom: 20px;
+        & > span {
+          padding: 0 0px 0 30px;
+          display: block;
+        }
+        .info_1 {
+          background: url("../../assets/img/bg_5.png") left 5px no-repeat;
+        }
+        .info_3 {
+          background: url("../../assets/img/bg_7.png") left 5px no-repeat;
+        }
+      }
+    }
+    .box2 {
+      padding: 20px 15px 0;
+      & > h3 {
+        font-size: 20px;
+        font-weight: 700;
+        margin-bottom: 15px;
+      }
+      & > p {
+        font-size: 14px;
+        line-height: 18px;
+        color: #6a6a6a;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+</style>

webM/src/views/bottom/Events/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="Events">
+    <div class="ban" ref="ban">
+      <img src="@/assets/img/Events/banner.png" alt="" />
+      <h3>Events</h3>
+    </div>
+    <div class="main">
+      <div class="row" @click="$router.push(`/Layout/EventsInfo${item.id}/${item.id}`)" v-for="(item, index) in data" :key="index">
+        <img :src="`/data/EventsM/T${index + 1}.png`" alt="" />
+        <div class="txt">
+          <h3 v-html="item.h3"></h3>
+          <p v-for="(val, index) in item.txt" :key="index">
+            {{ val.name }}
+          </p>
+          <i>Date:{{ item.i }}</i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AboutOne } from "./data";
+export default {
+  name: "Events",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.data = AboutOne;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Events {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 20px;
+      bottom: 20px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    background-color: #faf9f6;
+    padding: 22px 17px 40px;
+    .row {
+      position: relative;
+      width: 100%;
+      border-radius: 8px;
+      overflow: hidden;
+      margin-bottom: 15px;
+      & > img {
+        width: 100%;
+      }
+      .txt {
+        padding: 20px 15px 0;
+        color: #fff;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        & > h3 {
+          text-align: center;
+          font-size: 16px;
+          margin-bottom: 5px;
+        }
+        & > p {
+          font-size: 12px;
+          line-height: 16px;
+        }
+        & > i {
+          margin-top: 5px;
+          display: block;
+          font-size: 14px;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+@media screen and (max-width: 355px) {
+  .main {
+    padding: 20px 8px 30px !important;
+  }
+  .txt {
+    padding: 5px 5px 0 !important;
+  }
+}
+</style>

webM/src/views/bottom/Events/info1.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="EventsInfo1">
+    <div class="ban" ref="ban">
+      <img src="/data/EventsM/1.png" alt="" />
+      <h3 @click="$router.push('/Layout/Events')">Events</h3>
+    </div>
+    <div class="main">
+      <div class="box1">
+        <h3>{{data.h3}}</h3>
+        <div class="info">
+          <span class="info_1">{{data.i}}</span>
+        </div>
+      </div>
+      <div class="box2">
+        <p v-for="(item,index) in data.txt" :key="index" @click="skip(item.path)">{{item.name}}</p>
+      </div>
+      <div class="box3" v-html="data.main"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+// <i>XXXXXXXXXXXXX</i>
+import { Events } from "./data";
+export default {
+  name: "EventsInfo1",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route(){
+      this.dataChange()
+    }
+  },
+  //方法集合
+  methods: {
+    skip(path){
+      this.$router.push(`/Layout/EventsInfo1/${path}`).catch(()=>{})
+    },
+    // 封装获取数据的方法
+    dataChange() {
+      let id = this.$route.params.id;
+      id =Number(id)
+      Events.forEach(v=>{
+        if(v.id===id) this.data=v
+      })
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.dataChange()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.EventsInfo1 {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 20px;
+      bottom: 20px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    padding: 20px 15px 40px;
+    background: url('../../../assets/img/bgEI.png');
+    .box1 {
+      padding: 0 15px 5px;
+      border-bottom: 1px solid #ccc;
+      & > h3 {
+        font-size: 22px;
+        font-weight: 700;
+        padding-left: 30px;
+        background: url("../../../assets/img/Layout/chosen.png") left center
+          no-repeat;
+        background-size: 22px 18px;
+        margin-bottom: 5px;
+      }
+      .info {
+        font-size: 14px;
+        line-height: 30px;
+        color: #666;
+        overflow: hidden;
+        zoom: 1;
+        margin-bottom: 20px;
+        & > span {
+          padding: 0 0px 0 30px;
+          display: block;
+        }
+        .info_1 {
+          background: url("../../../assets/img/bg_5.png") left 5px no-repeat;
+        }
+      }
+    }
+    .box2{
+      padding: 20px 15px;
+      border-bottom: 1px solid #ccc;
+      &>p{
+        font-size: 14px;
+        color: #6A6A6A;
+      }
+    }
+    .box3{
+      padding: 20px 15px 10px;
+      /deep/.xx{
+        font-size: 16px;
+        color: #000000;
+        font-weight: 700;
+      }
+      /deep/ p{
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 15px;
+        color: #6A6A6A;
+      }
+      /deep/ img{
+        width: 100%;
+        display: block;
+        margin-bottom: 15px;
+      }
+      /deep/ i {
+        display: block;
+        font-size: 12px;
+        font-style: normal;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+</style>

webM/src/views/bottom/Events/info2.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="EventsInfo2">
+    <div class="ban" ref="ban">
+      <img src="/data/EventsM/2.png" alt="" />
+      <h3 @click="$router.push('/Layout/Events')">Events</h3>
+    </div>
+    <div class="main">
+      <div class="box1">
+        <h3 v-html="data.h3"></h3>
+        <div class="info">
+          <span class="info_1">{{data.i}}</span>
+        </div>
+      </div>
+      <div class="box2">
+        <p v-for="(item,index) in data.txt" :key="index" @click="skip(item.path)">{{item.name}}</p>
+      </div>
+      <div class="box3" v-html="data.main"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+// <i>XXXXXXXXXXXXX</i>
+import { Events } from "./data";
+export default {
+  name: "EventsInfo2",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route(){
+      this.dataChange()
+    }
+  },
+  //方法集合
+  methods: {
+    skip(path){
+      this.$router.push(`/Layout/EventsInfo2/${path}`).catch(()=>{})
+    },
+    // 封装获取数据的方法
+    dataChange() {
+      let id = this.$route.params.id;
+      id =Number(id)
+      Events.forEach(v=>{
+        if(v.id===id) this.data=v
+      })
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.dataChange()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.EventsInfo2 {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 20px;
+      bottom: 20px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    padding: 20px 15px 40px;
+    background: url('../../../assets/img/bgEI.png');
+    .box1 {
+      padding: 0 15px 5px;
+      border-bottom: 1px solid #ccc;
+      & > h3 {
+        font-size: 22px;
+        font-weight: 700;
+        padding-left: 30px;
+        background: url("../../../assets/img/Layout/chosen.png") left center
+          no-repeat;
+        background-size: 22px 18px;
+        margin-bottom: 5px;
+      }
+      .info {
+        font-size: 14px;
+        line-height: 30px;
+        color: #666;
+        overflow: hidden;
+        zoom: 1;
+        margin-bottom: 20px;
+        & > span {
+          padding: 0 0px 0 30px;
+          display: block;
+        }
+        .info_1 {
+          background: url("../../../assets/img/bg_5.png") left 5px no-repeat;
+        }
+      }
+    }
+    .box2{
+      padding: 20px 15px;
+      border-bottom: 1px solid #ccc;
+      &>p{
+        font-size: 14px;
+        color: #6A6A6A;
+      }
+    }
+    .box3{
+      padding: 20px 15px 10px;
+      /deep/.xx{
+        font-size: 16px;
+        color: #000000;
+        font-weight: 700;
+      }
+      /deep/ p{
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 15px;
+        color: #6A6A6A;
+      }
+      /deep/ img{
+        width: 100%;
+        display: block;
+        margin-bottom: 15px;
+      }
+      /deep/ i {
+        color: #000000;
+        display: block;
+        font-size: 12px;
+        font-style: normal;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+</style>

webM/src/views/bottom/Events/info3.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="EventsInfo3">
+    <div class="ban" ref="ban">
+      <img src="/data/EventsM/3.png" alt="" />
+      <h3 @click="$router.push('/Layout/Events')">Events</h3>
+    </div>
+    <div class="main">
+      <div class="box1">
+        <h3 v-html="data.h3"></h3>
+        <div class="info">
+          <span class="info_1">{{data.i}}</span>
+        </div>
+      </div>
+      <!-- <div class="box2">
+        <p v-for="(item,index) in data.txt" :key="index" @click="skip(item.path)">{{item.name}}</p>
+      </div> -->
+      <div class="box3" v-html="data.main"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+// <i>XXXXXXXXXXXXX</i>
+import { Events } from "./data";
+export default {
+  name: "EventsInfo3",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route(){
+      this.dataChange()
+    }
+  },
+  //方法集合
+  methods: {
+    // skip(path){
+    //   this.$router.push(`/Layout/EventsInfo3/${path}`).catch(()=>{})
+    // },
+    // 封装获取数据的方法
+    dataChange() {
+      let id = this.$route.params.id;
+      id =Number(id)
+      Events.forEach(v=>{
+        if(v.id===id) this.data=v
+      })
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.dataChange()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.EventsInfo3 {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 20px;
+      bottom: 20px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    padding: 20px 15px 40px;
+    background: url('../../../assets/img/bgEI.png');
+    .box1 {
+      padding: 0 15px 5px;
+      border-bottom: 1px solid #ccc;
+      & > h3 {
+        font-size: 22px;
+        font-weight: 700;
+        padding-left: 30px;
+        background: url("../../../assets/img/Layout/chosen.png") left center
+          no-repeat;
+        background-size: 22px 18px;
+        margin-bottom: 5px;
+      }
+      .info {
+        font-size: 14px;
+        line-height: 30px;
+        color: #666;
+        overflow: hidden;
+        zoom: 1;
+        margin-bottom: 20px;
+        & > span {
+          padding: 0 0px 0 30px;
+          display: block;
+        }
+        .info_1 {
+          background: url("../../../assets/img/bg_5.png") left 5px no-repeat;
+        }
+      }
+    }
+    .box2{
+      padding: 20px 15px;
+      border-bottom: 1px solid #ccc;
+      &>p{
+        font-size: 14px;
+        color: #6A6A6A;
+      }
+    }
+    .box3{
+      padding: 20px 15px 10px;
+      /deep/video{
+        width: 100%;
+        margin-bottom: 15px;
+      }
+      /deep/.xx{
+        font-size: 16px;
+        color: #000000;
+        font-weight: 700;
+      }
+      /deep/ p{
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 15px;
+        color: #6A6A6A;
+      }
+      /deep/ img{
+        width: 100%;
+        display: block;
+        margin-bottom: 15px;
+      }
+      /deep/ i {
+        color: #000000;
+        display: block;
+        font-size: 12px;
+        font-style: normal;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+</style>

webM/src/views/bottom/Events/info4.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="EventsInfo4">
+    <div class="ban" ref="ban">
+      <img src="/data/EventsM/4.png" alt="" />
+      <h3 @click="$router.push('/Layout/Events')">Events</h3>
+    </div>
+    <div class="main">
+      <div class="box1">
+        <h3 v-html="data.h3"></h3>
+        <div class="info">
+          <span class="info_1">{{data.i}}</span>
+        </div>
+      </div>
+      <div class="box2">
+        <p v-for="(item,index) in data.txt" :key="index" @click="skip(item.path)">{{item.name}}</p>
+      </div>
+      <div class="box3" v-html="data.main"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+// <i>XXXXXXXXXXXXX</i>
+import { Events } from "./data";
+export default {
+  name: "EventsInfo4",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route(){
+      this.dataChange()
+    }
+  },
+  //方法集合
+  methods: {
+    skip(path){
+      this.$router.push(`/Layout/EventsInfo4/${path}`).catch(()=>{})
+    },
+    // 封装获取数据的方法
+    dataChange() {
+      let id = this.$route.params.id;
+      id =Number(id)
+      Events.forEach(v=>{
+        if(v.id===id) this.data=v
+      })
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.dataChange()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.EventsInfo4 {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 20px;
+      bottom: 20px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    padding: 20px 15px 40px;
+    background: url('../../../assets/img/bgEI.png');
+    .box1 {
+      padding: 0 15px 5px;
+      border-bottom: 1px solid #ccc;
+      & > h3 {
+        font-size: 22px;
+        font-weight: 700;
+        padding-left: 30px;
+        background: url("../../../assets/img/Layout/chosen.png") left center
+          no-repeat;
+        background-size: 22px 18px;
+        margin-bottom: 5px;
+      }
+      .info {
+        font-size: 14px;
+        line-height: 30px;
+        color: #666;
+        overflow: hidden;
+        zoom: 1;
+        margin-bottom: 20px;
+        & > span {
+          padding: 0 0px 0 30px;
+          display: block;
+        }
+        .info_1 {
+          background: url("../../../assets/img/bg_5.png") left 5px no-repeat;
+        }
+      }
+    }
+    .box2{
+      padding: 20px 15px;
+      border-bottom: 1px solid #ccc;
+      &>p{
+        font-size: 14px;
+        color: #6A6A6A;
+      }
+    }
+    .box3{
+      padding: 20px 15px 10px;
+      /deep/.xx{
+        font-size: 16px;
+        color: #000000;
+        font-weight: 700;
+      }
+      /deep/ p{
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 15px;
+        color: #6A6A6A;
+      }
+      /deep/ img{
+        width: 100%;
+        display: block;
+        margin-bottom: 15px;
+      }
+      /deep/ i {
+        color: #000000;
+        display: block;
+        font-size: 12px;
+        font-style: normal;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+</style>

webM/src/views/bottom/Use.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="UseC">
+    <div class="ban" ref="ban">
+      <img src="@/assets/img/bannerUse.png" alt="" />
+      <h3>Terms of Use</h3>
+    </div>
+    <div class="main">
+      <div class="box1">
+        <h3>Terms of Use</h3>
+        <div class="info">
+          <span class="info_1">2018</span>
+          <span class="info_3">Capital Museum</span>
+        </div>
+      </div>
+      <div class="box2">
+        <h3>Exhibition Overview</h3>
+        <p>Legal Notice</p>
+        <p>
+          Welcome to www.capitalmuseum.org.cn (hereinafter referred to as "this
+          website"). You are expected to comply with following terms while using
+          this website:
+        </p>
+        <p>
+          Copyright of all contents on this website, including but not limited
+          to the website design, texts, pictures, audio and video works, etc.,
+          belong to the Capital Museum and all the parties concerned. All media,
+          websites, organizations or individuals are allowed to read these
+          contents, but cannot use them in the ways including but not limited to
+          reprinting, excerpting, linking, reposting, publication, transfer,
+          distribution, etc. And unauthorized use of this website and its
+          contents for commercial purposes is also prohibited.
+        </p>
+        <p>
+          If you download materials you consider you need from this website for
+          non-commercial use (except for information with copyrights and
+          proprietary rights), please contact us for permission.
+        </p>
+        <p>
+          Any reprints and quotes of any copyrighted articles on this website
+          should conform to following requirements:
+        </p>
+        <p>
+          (1) For non-commercial, non-profit and non-advertising uses, author's
+          name and source of the used article or picture, "首都博物馆网站" or
+          "首页（地址待定）", should be attached.
+        </p>
+        <p>
+          (2) For business, profit-making and advertising use, you should obtain
+          consent of the original author, and attach the name of that author,
+          limits of authority and the source, "首都博物馆网站"or
+          "首页（地址待定）".
+        </p>
+        <p>
+          (3) Any modification and cancellation of any articles or pictures
+          should be approved by the author, with the limits of authority
+          attached.
+        </p>
+        <p>
+          This website and the Capital Museum are not liable for any direct or
+          indirect incidental damage resulting from the use or inability to use
+          the information on this website. This website also does not assume any
+          criminal or civil liability arising from any violation of the
+          provisions of this website or the laws of the People's Republic of
+          China.
+        </p>
+        <p>
+          This website will make announcement in advance if services are to be
+          suspended due to system maintenance or upgrading. The website and the
+          Capital Museum are not be liable for any inconvenience or losses
+          caused by the suspension of services due to hardware failure or force
+          majeure.
+        </p>
+        <p>
+          The right of final interpretation of all contents of this website is
+          owned by the Capital Museum.
+        </p>
+        <p>
+          To safeguard rights and interests of this website and respect for the
+          authors' copyrights, we entrust Lyu Xiaojing of the Beijing Realizer
+          Law Firm as the legal adviser to this website. Anyone violating the
+          terms of this notice and laws will be held accountable. If any
+          contents published and reposted on this website violate your
+          copyrights, please contact our lawyer within two weeks.
+        </p>
+        <p>The Capital Museum</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UseC",
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.UseC {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 20px;
+      bottom: 20px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    padding: 20px 20px 40px;
+    background: url('../../assets/img/bgUse.png');
+    background-size: 100% 100%;
+    .box1 {
+      padding: 0 15px 5px;
+      border-bottom: 1px solid #ccc;
+      & > h3 {
+        font-size: 22px;
+        font-weight: 700;
+        padding-left: 30px;
+        background: url("../../assets/img/Layout/chosen.png") left center
+          no-repeat;
+        background-size: 22px 18px;
+        margin-bottom: 5px;
+      }
+      .info {
+        font-size: 14px;
+        line-height: 30px;
+        color: #666;
+        overflow: hidden;
+        zoom: 1;
+        margin-bottom: 20px;
+        & > span {
+          padding: 0 0px 0 30px;
+          display: block;
+        }
+        .info_1 {
+          background: url("../../assets/img/bg_5.png") left 5px no-repeat;
+        }
+        .info_3 {
+          background: url("../../assets/img/bg_7.png") left 5px no-repeat;
+        }
+      }
+    }
+    .box2 {
+      padding: 20px 15px 0;
+      & > h3 {
+        font-size: 20px;
+        font-weight: 700;
+        margin-bottom: 15px;
+      }
+      &>p{
+        font-size: 14px;
+        line-height: 18px;
+        color: #6A6A6A;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+</style>