to4

src/App.vue

@@ -1,32 +1,15 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <keep-alive>
+      <Router-view />
+    </keep-alive>
   </div>
 </template>
 
 <style lang="less">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+  background: url('./assets/img/bodyBac.jpg');
+  max-width: 480px;
+  margin: 0 auto;
 }
 </style>

src/assets/base.css

@@ -0,0 +1,188 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video,
+input {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font-weight: normal;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* custom */
+a {
+  color: #7e8c8d;
+  text-decoration: none;
+  -webkit-backface-visibility: hidden;
+}
+
+li {
+  list-style: none;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track-piece {
+  background-color: rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  height: 5px;
+  background-color: rgba(125, 125, 125, 0.7);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  width: 5px;
+  background-color: rgba(125, 125, 125, 0.7);
+  -webkit-border-radius: 6px;
+}
+
+html,
+body {
+  width: 100%;
+}
+
+body {
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.sonBj1{
+  margin: 0px auto 80px;
+  width: 62px;
+  height: 71px;
+  background: url('./img/title1.png');
+  background-size: 100% 100%;
+}
+.sonBj2{
+  margin: 0px auto 80px;
+  width: 62px;
+  height: 71px;
+  background: url('./img/title2.png');
+  background-size: 100% 100%;
+}
+.shuming{
+  margin: 10px 0 50px;
+  text-align: center;
+  font-size: 16px;
+  color: #fff;
+}

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/son2.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="son2">
+    <div class="sonBj1"></div>
+    <div class="rowBox" v-for="item in data" :key="item.id" :class="{noPad:item.pad}">
+      <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
+        <img
+          :style="`height: ${item.hh};`"
+          :src="require(`@/assets/img/zhongxi/${item.id}.png`)"
+          alt=""
+        />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "son2",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [
+        {
+          id: 1,
+          name: "清“乾隆”款珐琅蓝彩十三行通景画瓷碗",
+          ww: "170px",
+          hh: "79px",
+        },
+        {
+          id: 2,
+          name: "清光绪二十三年广彩十三行四方瓷瓶",
+          ww: "244px",
+          hh: "131px",
+        },
+        { id: 3, name: "清道光广彩人物故事纹瓷碗", ww: "169px", hh: "80px" },
+        { id: 4, name: "19世纪镀金人物铜座钟", ww: "132px", hh: "194px" },
+        { id: 5, name: "19世纪法国铜鎏金配烛台座钟", ww: "167px", hh: "112px"},
+        {
+          id: 6,
+          name: "19世纪英国皇家定制珐琅彩纹章纹陶茶叶罐",
+          ww: "135px",
+          hh: "191px",
+        },
+        {
+          id: 7,
+          name: "19世纪佚名画家绘茶叶制作组图通草水彩画",
+          ww: "242px",
+          hh: "175px",
+          pad:true 
+        },
+        { id: 8, name: "清“宝丰银局”五十两银锭", ww: "163px", hh: "114px" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    toInfo(id){
+      this.$router.push(`/info/${id}`)
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.son2 {
+  .rowBox {
+    padding: 0 24px;
+    margin-bottom: 50px;
+    display: flex;
+    .row {
+      & > img {
+        width: 100%;
+      }
+      & > p {
+        color: #ffffff;
+        font-size: 16px;
+        text-align: center;
+        width: 100%;
+        padding: 10px;
+        line-height: 24px;
+      }
+    }
+    &:nth-of-type(2n+1){
+      justify-content: end;
+    }
+  }
+  .noPad{
+    padding: 0;
+  }
+}
+</style>

src/components/son3.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="son3">
+    <!-- 点击视频播放的盒子 -->
+    <div class="videoPlayBox" v-if="videoId">
+      <video controls autoplay :src="`/data/${videoId}.mp4`"></video>
+      <!-- 关闭按钮 -->
+      <div class="close" @click="videoId=null"></div>
+    </div>
+    <!-- 视频 -->
+    <div class="videoBox">
+      <div class="vidPlay" @click="videoId='1'"></div>
+      <img src="../assets/img/vid1.png" alt="" />
+    </div>
+    <div class="shuming">《鸦片成瘾机制》</div>
+    <div class="sonBj1"></div>
+    <div
+      class="rowBox"
+      v-for="item in data"
+      :key="item.id"
+      :class="{ noPad: item.pad }"
+    >
+      <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
+        <img
+          :style="`height: ${item.hh};`"
+          :src="require(`@/assets/img/maoyi/${item.id}.png`)"
+          alt=""
+        />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+    <div class="sonBj2"></div>
+    <div class="videoBox">
+      <div class="vidPlay" @click="videoId='2'"></div>
+      <img src="../assets/img/vid2.png" alt="" />
+    </div>
+    <div class="shuming">《鸦片走私贸易》</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "son3",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      videoId:null,
+      data: [
+        {
+          id: 9,
+          name: "鸦片趸船",
+          ww: "231px",
+          hh: "143px",
+          pad: true,
+        },
+        {
+          id: 10,
+          name: "飞剪船模型",
+          ww: "161px",
+          hh: "188px",
+          pad: true,
+        },
+        {
+          id: 11,
+          name: "1864年印度到香港的鸦片保险单",
+          ww: "194px",
+          hh: "175px",
+        },
+        {
+          id: 12,
+          name: "1860年印度比尔把鸦片运送至香港的运单",
+          ww: "200px",
+          hh: "174px",
+        },
+        {
+          id: 13,
+          name: "1854年广州和香港的鸦片售卖报告",
+          ww: "194px",
+          hh: "305px",
+        },
+        {
+          id: 14,
+          name: "1865年香港鸦片交换支票",
+          ww: "200px",
+          hh: "181px",
+        },
+        {
+          id: 15,
+          name: "1855年印度比尔把鸦片运至中国的运单",
+          ww: "194px",
+          hh: "207px",
+        },
+        {
+          id: 16,
+          name: "1856年印度比尔把鸦片运至中国WOOSUNG的运单",
+          ww: "200px",
+          hh: "181px",
+        },
+        { id: 17, name: "1858年香港鸦片交换支票", ww: "193px", hh: "188px" },
+        {
+          id: 18,
+          name: "1859年印度比尔把鸦片运至香港的运单",
+          ww: "195px",
+          hh: "307px",
+        },
+        {
+          id: 19,
+          name: "1855年从印度运送鸦片到香港的保险单",
+          ww: "194px",
+          hh: "300px",
+        },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    toInfo(id) {
+      this.$router.push(`/info/${id}`);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.son3 {
+  .videoPlayBox{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    background-color: rgba(0,0,0,.9);
+    video{
+      position: absolute;
+      width: 100%;
+      max-height: 60vh;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .close{
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 32px;
+      height: 32px;
+      background: url('../assets/img/close.png');
+      background-size: 100% 100%;
+    }
+  }
+  .videoBox {
+    position: relative;
+    & > img {
+      width: 100%;
+    }
+    .vidPlay{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      width: 77px;
+      height: 77px;
+      background: url('../assets/img/videoPlay.png');
+      background-size: 100% 100%;
+    }
+  }
+  .rowBox {
+    padding: 0;
+    margin-bottom: 50px;
+    display: flex;
+    .row {
+      & > img {
+        width: 100%;
+      }
+      & > p {
+        color: #ffffff;
+        font-size: 16px;
+        text-align: center;
+        width: 100%;
+        padding: 10px;
+        line-height: 24px;
+      }
+    }
+    &:nth-of-type(2n + 1) {
+      justify-content: end;
+    }
+  }
+  .noPad {
+    padding: 0 24px;
+  }
+}
+</style>

src/components/son4.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="son4">
+    <!-- 点击视频播放的盒子 -->
+    <div class="videoPlayBox" v-if="videoId">
+      <video controls autoplay :src="`/data/${videoId}.mp4`"></video>
+      <!-- 关闭按钮 -->
+      <div class="close" @click="videoId = null"></div>
+    </div>
+
+    <div class="sonBj1"></div>
+    <div
+      class="rowBox"
+      v-for="item in data"
+      :key="item.id"
+      :class="{ noPad: item.pad }"
+    >
+      <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
+        <img
+          :style="`height: ${item.hh};`"
+          :src="require(`@/assets/img/shengchan/${item.id}.png`)"
+          alt=""
+        />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+    <div class="sonBj2"></div>
+    <!-- 视频 -->
+    <div class="videoBox">
+      <div class="vidPlay" @click="videoId = '3'"></div>
+      <img src="../assets/img/vid3.png" alt="" />
+    </div>
+    <div class="shuming">《鸦片生产制作》</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "son4",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      videoId: null,
+      data: [
+        {
+          id: 20,
+          name: "罂粟壳",
+          ww: "166px",
+          hh: "90px",
+          pad: true,
+        },
+        {
+          id: 21,
+          name: "东印度公司刀剑",
+          ww: "218px",
+          hh: "311px",
+          pad: true,
+        },
+        {
+          id: 22,
+          name: "东印度旗帜",
+          ww: "254px",
+          hh: "161px",
+        },
+        {
+          id: 23,
+          name: "1810年东印度公司伦敦总部印刷铜版画",
+          ww: "232px",
+          hh: "169px",
+        },
+        {
+          id: 24,
+          name: "1828年东印度公司伦敦总部印刷铜版画 ",
+          ww: "233px",
+          hh: "200px",
+        },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    toInfo(id) {
+      this.$router.push(`/info/${id}`);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.son4 {
+  .videoPlayBox {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.9);
+    video {
+      position: absolute;
+      width: 100%;
+      max-height: 60vh;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .close {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 32px;
+      height: 32px;
+      background: url("../assets/img/close.png");
+      background-size: 100% 100%;
+    }
+  }
+  .videoBox {
+    position: relative;
+    & > img {
+      width: 100%;
+    }
+    .vidPlay {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 77px;
+      height: 77px;
+      background: url("../assets/img/videoPlay.png");
+      background-size: 100% 100%;
+    }
+  }
+  .rowBox {
+    padding: 0;
+    margin-bottom: 50px;
+    display: flex;
+    .row {
+      & > img {
+        width: 100%;
+      }
+      & > p {
+        color: #ffffff;
+        font-size: 16px;
+        text-align: center;
+        width: 100%;
+        padding: 10px;
+        line-height: 24px;
+      }
+    }
+    &:nth-of-type(2n + 1) {
+      justify-content: end;
+    }
+  }
+  .noPad {
+    padding: 0 24px;
+  }
+}
+</style>

src/components/son5.vue

@@ -0,0 +1,45 @@
+<template>
+<div class='son5'>son5</div>
+</template>
+
+<script>
+export default {
+name:'son5',
+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>
+.son5{
+  color: red;
+}
+
+</style>

src/components/son6.vue

@@ -0,0 +1,45 @@
+<template>
+<div class='son6'>son6</div>
+</template>
+
+<script>
+export default {
+name:'son6',
+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>
+.son6{
+  color: red;
+}
+
+</style>

src/components/son7.vue

@@ -0,0 +1,45 @@
+<template>
+<div class='son7'>son7</div>
+</template>
+
+<script>
+export default {
+name:'son7',
+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>
+.son7{
+  color: red;
+}
+
+</style>

src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import './assets/base.css'
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -1,23 +1,19 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
-
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: () => import('../views/Home.vue')
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    path: '/info/:id',
+    name: 'Info',
+    component: () => import('../views/info/index.vue')
   }
+
 ]
 
 const router = new VueRouter({

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +1,177 @@
+<!--  -->
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div class="Home" :class="{ last: topImgInd === 8 }">
+    <!-- 顶部图片 -->
+    <div class="topImg">
+      <img :src="require(`@/assets/img/${topImgInd}.png`)" alt="" />
+    </div>
+
+    <!-- 中间内容---使用动态组件 -->
+    <div class="main">
+      <keep-alive>
+        <component
+          v-if="topImgInd !== 1 && topImgInd !== 8"
+          :is="`Son${topImgInd}`"
+        ></component>
+      </keep-alive>
+    </div>
+
+    <!-- 菜单图片 -->
+    <div class="menu">
+      <img src="../assets/img/menu.png" alt="" />
+    </div>
+
+    <!-- 底部菜单选择 -->
+    <div class="bottom">
+      <div
+        class="row"
+        @click="topImgInd = item.id"
+        :class="{ active: topImgInd == item.id }"
+        v-for="item in data"
+        :key="item.id"
+      >
+        <div class="bs"></div>
+        {{ item.name }}
+      </div>
+    </div>
+    <!-- 下一章节 -->
+    <div class="next" v-if="topImgInd < data.length" @click="topImgInd++">
+      下一章节
+    </div>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
+import Son2 from "../components/son2.vue";
+import Son3 from "../components/son3.vue";
+import Son4 from "../components/son4.vue";
+import Son5 from "../components/son5.vue";
+import Son6 from "../components/son6.vue";
+import Son7 from "../components/son7.vue";
 export default {
-  name: 'Home',
-  components: {
-    HelloWorld
+  name: "Home",
+  components: { Son2, Son3, Son4, Son5, Son6, Son7 },
+  data() {
+    //这里存放数据
+    return {
+      data: [
+        { id: 1, name: "序言" },
+        { id: 2, name: "中西贸易" },
+        { id: 3, name: "鸦片贸易" },
+        { id: 4, name: "鸦片生产" },
+        { id: 5, name: "鸦片祸害" },
+        { id: 6, name: "林则徐禁烟" },
+        { id: 7, name: "虎门销烟" },
+        { id: 8, name: "结束语" },
+      ],
+      topImgInd: 1,
+      // 内容动态组件的值
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    topImgInd() {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    },
+  },
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Home {
+  padding-bottom: 30px;
+  width: 100%;
+  .topImg {
+    width: 100%;
+    img {
+      width: 100%;
+      vertical-align: middle;
+    }
+  }
+  .main{
+    background: url('../assets/img/bg.jpg');
+    background-size: cover;
+  }
+  .menu {
+    text-align: right;
+    padding: 12px 30px 20px 0;
+    & > img {
+      width: 61px;
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: space-around;
+    background: url("../assets/img/line.png") top left no-repeat;
+    background-size: 100% 2px;
+    // border-top: 2px dashed #827d70;
+    width: 100%;
+    .row {
+      position: relative;
+      letter-spacing: 5px;
+      padding-top: 15px;
+      font-size: 14px;
+      color: #827d70;
+      writing-mode: vertical-lr;
+      .bs {
+        width: 14px;
+        height: 14px;
+        position: absolute;
+        top: -6px;
+        left: 0;
+        &::before {
+          content: "";
+          border-radius: 50%;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background-color: #827d70;
+          width: 10px;
+          height: 10px;
+        }
+      }
+    }
+    .active {
+      color: #ebdfbf;
+      pointer-events: none;
+      .bs {
+        left: 1px;
+        border-radius: 50%;
+        border: 1px solid #ebdfbf;
+        &::before {
+          width: 8px;
+          height: 8px;
+          background-color: #ebdfbf;
+        }
+      }
+    }
+  }
+  .next {
+    margin: 28px auto 0;
+    width: 90px;
+    padding-left: 30px;
+    color: #c8b992;
+    font-size: 14px;
+    background: url("../assets/img/next.png") left center no-repeat;
+    background-size: 20px 20px;
   }
 }
-</script>
+.last {
+  padding-bottom: 80px;
+}
+</style>

src/views/info/audio.vue

@@ -0,0 +1,375 @@
+<template>
+  <div class="images">
+    <audio id="audioTag" class="noshow" autoplay :src="`/data/${$route.params.id}.mp3`"></audio>
+    <div class="audiocon">
+      <!-- 左侧按钮 -->
+      <div class="leftBtn">
+        <div class="play">
+          <img
+            @click="bofang"
+            :src="require(`@/assets/img/${isPlay ? 'stop' : 'play'}.png`)"
+            alt=""
+          />
+        </div>
+      </div>
+      <div class="adcon">
+        <div class="time">
+          <span>{{ time }}</span
+          ><span> / {{ allTime }}</span>
+        </div>
+        <div class="bar">
+          <div class="activeLine" @click="seekTime"></div>
+          <div :style="{ width: currentPosi + '%' }" class="dot"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Audio",
+  props: {},
+  data() {
+    return {
+      active: 0,
+      time: 0,
+      _audio: "",
+      isPlay: this.isMobile,
+      currentPosi: 0,
+      allTime: 0,
+    };
+  },
+  methods: {
+    bofang() {
+      if (this._audio.paused) {
+        this._audio.play();
+        this.isPlay = true;
+      } else {
+        this._audio.pause();
+        this.isPlay = false;
+      }
+    },
+    transTime(time) {
+      var duration = parseInt(time);
+      var minute = parseInt(duration / 60);
+      var sec = (duration % 60) + "";
+      var isM0 = ":";
+      if (minute == 0) {
+        minute = "00";
+      } else if (minute < 10) {
+        minute = "0" + minute;
+      }
+      if (sec.length == 1) {
+        sec = "0" + sec;
+      }
+      return minute + isM0 + sec;
+    },
+    updateProgress() {
+      this.currentPosi = (this._audio.currentTime / this._audio.duration) * 100;
+      this.time = this.transTime(this._audio.currentTime);
+    },
+
+    audioEnded() {
+      this._audio.currentTime = 0;
+      this._audio.pause();
+      this.isPlay = false;
+    },
+
+    seekTime(e) {
+      var rate = e.offsetX / e.target.clientWidth;
+      this._audio.currentTime = this._audio.duration * rate;
+      this.updateProgress();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this._audio = document.querySelector("#audioTag");
+      document.querySelector("#audioTag").addEventListener("loadedmetadata", (e) => {
+        this.time = this.isMobile
+          ? "00:00"
+          : this.transTime(e.currentTarget.duration);
+        this.allTime = this.transTime(e.currentTarget.duration);
+        this._audio.play();
+        this.isPlay = true;
+      });
+
+      document.addEventListener(
+        "WeixinJSBridgeReady",
+        function () {
+          this._audio.play();
+        },
+        false
+      );
+
+      document.querySelector("#audioTag").addEventListener("timeupdate", () => {
+        this.updateProgress();
+      });
+
+      document.querySelector("#audioTag").addEventListener("timeupdate", () => {
+        this.updateProgress();
+      });
+    });
+  },
+  activated() {
+    this.isPlay = this.isMobile;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.images {
+  overflow: hidden;
+  border-radius: 10px;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  text-align: center;
+  .title {
+    padding: 0 80px;
+    display: inline-block;
+    color: #dba761;
+    font-weight: bold;
+    font-size: 36px;
+    height: 70px;
+    line-height: 70px;
+    background: #bc1515;
+    border-radius: 60px;
+    margin: 45px auto;
+  }
+  .img-con {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
+    padding-bottom: 40px;
+    > img {
+      max-width: 1000px;
+      max-height: 600px;
+    }
+  }
+  @color: #dba761;
+  .audiocon {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .adcon {
+      .time {
+        font-size: 12px;
+        position: absolute;
+        right: 0px;
+        top: 50%;
+        transform: translateY(-50%) scale(.8);
+      }
+      width: calc(100% - 35px);
+      margin: 0 auto;
+      position: absolute;
+      bottom: 0px;
+      left: 32px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .bar {
+        position: relative;
+        background: none;
+        display: flex;
+        width: calc(100% - 74px);
+        height: 23px;
+        overflow: visible;
+        .activeLine {
+          height: 3px;
+          cursor: pointer;
+          overflow: hidden;
+          position: absolute;
+          background-color: rgba(255, 255, 255, 0.5);
+          top: 50%;
+          transform: translateY(-50%);
+          border-radius: 12px;
+          width: 100%;
+        }
+
+        @wh: 20px;
+        .dot {
+          pointer-events: none;
+          border-radius: 12px;
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 3px;
+          cursor: pointer;
+          background-color: rgba(255, 255, 255, 0.8);
+          top: 50%;
+          transform: translateY(-50%);
+
+          // width: @wh;
+          // height: @wh;
+          // display: inline-block;
+          // position: absolute;
+          // z-index: 999;
+          // background-color: #fff;
+          // top: 50%;
+          // transform: translate(-@wh*0.5, -50%);
+          // border-radius: 50%;
+          // cursor: pointer;
+        }
+      }
+
+      > img {
+        margin: 0 40px;
+        cursor: pointer;
+        width: 30px;
+        height: 36px;
+      }
+
+      .time {
+        text-align: center;
+        > span {
+          &:first-of-type {
+            color: #fff;
+          }
+
+          &:last-of-type {
+            color: #fff;
+          }
+        }
+      }
+    }
+    .leftBtn {
+      height: 100%;
+      display: flex;
+      width: 30px;
+      justify-content: space-around;
+      align-items: center;
+      .play {
+        width: 23px;
+        height: 23px;
+        & > img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+@position: 62px;
+.mbimages {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: bottom -@position;
+  text-align: center;
+  .title {
+    width: 90%;
+    padding: 10px;
+    display: inline-block;
+    color: #dba761;
+    font-weight: bold;
+    font-size: 18px;
+    background: #bc1515;
+    border-radius: 60px;
+    margin: 20px auto 0;
+  }
+
+  .img-con {
+    width: 90%;
+    margin: 0 auto;
+    > img {
+      width: 100%;
+    }
+  }
+
+  @color: #bc1515;
+  .audiocon {
+    width: 90%;
+    height: 80px;
+    margin: 0 auto;
+    .time {
+      width: 100%;
+      text-align: center;
+      > span {
+        &:first-of-type {
+          color: rgba(112, 112, 112, 1);
+        }
+
+        &:last-of-type {
+          color: @color;
+        }
+      }
+    }
+    .adcon {
+      width: 94%;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .bar {
+        flex: auto;
+        position: relative;
+        background: none;
+        display: flex;
+        width: 80%;
+        height: 30px;
+        overflow: visible;
+        .activeLine {
+          height: 10px;
+          cursor: pointer;
+          overflow: hidden;
+          position: absolute;
+          background-color: @color;
+          top: 50%;
+          transform: translateY(-50%);
+          border-radius: 12px;
+          width: 100%;
+        }
+
+        @wh: 20px;
+        .dot {
+          width: @wh;
+          height: @wh;
+          display: inline-block;
+          position: absolute;
+          z-index: 999;
+          background-color: rgba(219, 167, 97, 1);
+          top: 50%;
+          transform: translate(-@wh*0.5, -50%);
+          border-radius: 50%;
+          cursor: pointer;
+          border: 2px solid @color;
+        }
+      }
+
+      @whh: 36px;
+      .bfzt {
+        width: @whh;
+        height: @whh;
+        position: relative;
+        margin-left: 20px;
+        .bg {
+          width: 100%;
+          height: 100%;
+        }
+        .btnggg {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          cursor: pointer;
+          width: @whh*0.4;
+          height: @whh*0.4;
+        }
+      }
+    }
+  }
+}
+
+.noshow {
+  position: fixed;
+  top: -100%;
+  left: -100%;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+</style>

src/views/info/index.vue

@@ -0,0 +1,124 @@
+<!--  -->
+<template>
+  <div class="info">
+    <!-- 标题 -->
+    <div class="title">
+      <div class="back" @click="$router.go(-1)"></div>
+      <h3>清“乾隆”款珐琅蓝彩十三行通景画瓷碗</h3>
+    </div>
+    <!-- 模型 -->
+    <div class="model">
+      <iframe
+        src="http://4dscene.4dage.com/culturalrelics/YPZZ/Model.html?m=yp02&v=1"
+        frameborder="0"
+      ></iframe>
+    </div>
+    <!-- 索引 -->
+    <div class="indexBs">
+      <div>1/2</div>
+    </div>
+    <!-- 音乐 -->
+    <div class="myMusic">
+      <Audio/>
+    </div>
+    <!-- 文字介绍 -->
+    <div class="txtt" v-html="txtx"></div>
+  </div>
+</template>
+
+<script>
+import Audio from "./audio.vue";
+export default {
+  name: "info",
+  components: { Audio },
+  data() {
+    //这里存放数据
+    return {
+      txtx:`<p>文物尺寸：高8.6厘米，口径21厘米，足径8.5厘米，重753克。</p><p>文物说明：口沿镶金边，碗面通篇用珐琅蓝彩描绘广州十三行景色，画工精细，碗内中心绘帆船纹，碗底有方框篆书乾隆款，在清代广州出口瓷中极为少见。</p>`
+      };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {
+    window.scrollTo({ top: 0});
+  }, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.info {
+  min-height: 100vh;
+  .title {
+    position: relative;
+    padding: 15px 45px 70px 50px;
+    .back {
+      position: absolute;
+      top: 22px;
+      left: 20px;
+      width: 20px;
+      height: 20px;
+      background: url("../../assets/img/back.png");
+      background-size: 100% 100%;
+    }
+    & > h3 {
+      text-align: center;
+      font-size: 20px;
+      line-height: 30px;
+      color: #fff;
+    }
+  }
+  .model {
+    padding: 0 50px;
+    width: 100%;
+    height: 200px;
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .indexBs {
+    position: relative;
+    height: 50px;
+    & > div {
+      position: absolute;
+      bottom: 0;
+      right: 22px;
+      width: 54px;
+      height: 22px;
+      line-height: 22px;
+      text-align: center;
+      border-radius: 11px;
+      background-color: rgba(0, 0, 0, 0.7);
+      color: #fff;
+      font-size: 14px;
+      font-weight: 700;
+    }
+  }
+  .myMusic {
+    padding: 35px 20px 40px 30px;
+    border-bottom: 2px dashed rgba(235, 223, 191, 0.2);
+  }
+  .txtt{
+    padding: 30px 20px 40px 30px;
+    color: #E7DBBC;
+    font-size: 16px;
+    line-height: 24px;
+    /deep/p{
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>