添加结尾页

src/App.vue

@@ -25,7 +25,8 @@ export default {
       } else if (
         (from.name === 'Home' && to.name === 'TreeAnimation') ||
         (from.name === 'TreeAnimation' && to.name === 'TreeSelection') ||
-        (from.name === 'TreeSelection' && to.name === 'Chart')
+        (from.name === 'TreeSelection' && to.name === 'Chart') ||
+        (from.name === 'Chart' && to.name === 'End')
       ) {
         this.transitionName = 'slide-to-next-page'
         this.transitionMode = ''

src/router/index.js

@@ -7,6 +7,7 @@ import Chart from "../views/Chart.vue"
 import TreeSelection from "../views/TreeSelection.vue"
 import ExhibitionDetail from "../views/ExhibitionDetail.vue"
 import ExhibitionDetailAnimation from "../views/ExhibitionDetailAnimation.vue"
+import End from "../views/End.vue"
 
 Vue.use(VueRouter)
 
@@ -50,6 +51,11 @@ const routes = [
     name: 'ExhibitionDetailAnimation',
     component: ExhibitionDetailAnimation
   },
+  {
+    path: '/End',
+    name: 'End',
+    component: End
+  },
 ]
 
 const router = new VueRouter({

src/views/Chart.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="hammer-target"
     class="chart"
   >
     <BackBtn
@@ -378,6 +379,14 @@ export default {
         clearInterval(this.addYearIntervalId)
       }
     }, 3000)
+
+    let mc = new Hammer(this.$refs['hammer-target'])
+    mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
+    const that = this
+    mc.on("panup", function me(ev) {
+      mc.off('panup', me)
+      that.$router.push({ name: 'End' })
+    })
   },
   destroyed() {
     this.chartHuodong.dispose()

src/views/End.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="comp-root">
+    <video
+      ref="video"
+      class="video"
+      :src="videoSrc"
+      autoplay
+      playsinline
+      @canplaythrough="onCanPlayThrough"
+      @play="onPlay"
+    />
+    <button
+      v-if="showPlayBtn"
+      class="play-btn"
+      @click="onClickPlay"
+    >
+      <img
+        :src="require('@/assets/image/play.png')"
+        alt=""
+      >
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      videoSrc: `${this.$backEndBaseUrl}publicityVideo/在此展览--中国陈设艺术专业委员会出品.mp4`,
+      beganPlay: false,
+      showPlayBtn: false,
+    }
+  },
+  methods: {
+    onPlay() {
+      this.beganPlay = true
+    },
+    onCanPlayThrough() {
+      if (!this.beganPlay) {
+        this.showPlayBtn = true
+      }
+    },
+    onClickPlay() {
+      this.showPlayBtn = false
+      this.$refs.video.play()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.comp-root {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background: #000;
+  .video {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .play-btn {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    background: transparent;
+    border: none;
+    border-radius: 50%;
+  }
+}
+</style>

src/views/ExhibitionDetail.vue

@@ -14,6 +14,7 @@
           :src="videoSrc"
           controls
           autoplay
+          playsinline
         />
         <img
           src="@/assets/image/close.png"