尾声页

src/router/index.js

@@ -3,6 +3,7 @@ import HomeView from '../views/HomeView.vue'
 import PanoView from "@/views/PanoView.vue"
 import RelicList from "@/views/RelicList.vue"
 import RelicDetail from "@/views/RelicDetail.vue"
+import EpilogueView from "@/views/EpilogueView.vue"
 // import store from '@/store/index.js'
 
 const routes = [
@@ -26,6 +27,11 @@ const routes = [
     name: 'RelicDetail',
     component: RelicDetail,
   },
+  {
+    path: '/epilogue-view',
+    name: 'EpilogueView',
+    component: EpilogueView,
+  },
 ]
 
 const router = createRouter({

src/views/EpilogueView.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="epilogue-view">
+    <transition name="fade-out">
+      <video
+        v-show="isShowVideo"
+        class="epilogue-video"
+        src="@/assets/videos/epilogue.mp4"
+        autoplay
+        playsinline
+        webkit-playsinline="true"
+        x5-video-player-type="h5"
+        @ended="isShowVideo = false"
+      />
+    </transition>
+    <div class="mask" />
+    <img
+      class="handwritting"
+      src="@/assets/images/handwriting.png"
+      alt=""
+      draggable="false"
+    >
+    <div class="bottom-wrap">
+      <div class="text-wrap">
+        <h3>明朱元璋行书手谕卷</h3>
+        <div class="desc">
+          元末明初 纸本<br>
+          纵 35.9 厘米，横 58.7 厘米<br>
+          无锡博物院藏
+        </div>
+      </div>
+      <div class="qr-code">
+        <img
+          class="qr-code"
+          src="@/assets/images/qr-code.png"
+          alt=""
+          draggable="false"
+        >
+        <span>扫码体验小程序</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const isShowVideo = ref(true)
+
+</script>
+
+<style lang="less" scoped>
+.epilogue-view{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(@/assets/images/epilogue-bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  >video.epilogue-video{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    z-index: 3;
+  }
+  >.mask{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    top: 48%;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 30px 30px 0 0;
+  }
+  >img.handwritting{
+    width: 744px;
+    height: 462px;
+    margin-bottom: 22px;
+    position: relative;
+    z-index: 1;
+  }
+  >.bottom-wrap{
+    width: 744px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+    >.text-wrap{
+      >h3{
+        font-size: 30px;
+        font-family: Source Han Serif CN, Source Han Serif CN;
+        font-weight: 800;
+        color: #AC9468;
+        line-height: 35px;
+        letter-spacing: 3px;
+        margin-bottom: 17px;
+      }
+      >.desc{
+        font-size: 20px;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 23px;
+        letter-spacing: 2px;
+      }
+    }
+    >.qr-code{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      >img.qr-code{
+        width: 125px;
+        height: 125px;
+        margin-bottom: 10px;
+      }
+      >span{
+        font-size: 14px;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 16px;
+        letter-spacing: 1px;
+      }
+    }
+  }
+}
+</style>

src/views/PanoView.vue

@@ -133,8 +133,8 @@
         >
       </button>
       <button
-        class="next-camera"
-        @click="onClickNextCamera"
+        class="next-scene"
+        @click="onClickNextScene"
       />
     </div>
     <CameraContent1
@@ -347,7 +347,7 @@ const sceneChangeEffectVideo2 = ref(null)
 const isShowEffectVideo1 = ref(false)
 const isShowEffectVideo2 = ref(false)
 const isShowEffectCloud = ref(false)
-function onClickNextCamera() {
+function onClickNextScene() {
   if (sceneIdx.value === 0) {
     isShowEffectVideo1.value = true
     setTimeout(() => {
@@ -358,6 +358,10 @@ function onClickNextCamera() {
     setTimeout(() => {
       sceneChangeEffectVideo2.value.play()
     }, 1000)
+  } else if (sceneIdx.value === 2) {
+    router.push({
+      name: 'EpilogueView',
+    })
   }
 }
 function onEffectVideoEnd() {
@@ -767,7 +771,7 @@ onBeforeRouteUpdate((to, from) => {
         display: initial;
       }
     }
-    >button.next-camera{
+    >button.next-scene{
       position: absolute;
       top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       right: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/views/temp.js

@@ -1,78 +0,0 @@
-function fixPanoData(panoData) {
-  // 丢弃没有包含场景的二级分组
-  let tmp = []
-  panoData.scenes.forEach((item) => {
-    panoData.catalogs.forEach((sub) => {
-      if (item.category == sub.id) {
-        if (tmp.indexOf(sub) < 0) {
-          tmp.push(sub)
-        }
-      }
-    })
-  })
-  tmp = utils.unique(tmp)
-  panoData.catalogs = tmp
-
-  // 丢弃没有包含二级分组的一级分组
-  let rootmp = []
-  tmp.forEach((item) => {
-    panoData.catalogRoot.forEach((sub) => {
-      sub.children = utils.unique(sub.children)
-
-      if (sub.children.indexOf(item.id) > -1) {
-        rootmp.push(sub)
-      }
-    })
-  })
-  rootmp = utils.unique(rootmp)
-
-  // 一级分组按名称排序
-  let sortArr = panoData.catalogRoot.map((item) => item.name)
-  rootmp.sort((a, b) => {
-    return sortArr.indexOf(a.name) - sortArr.indexOf(b.name)
-  })
-
-  // 各个一级分组的children去重，只留下有实际的二级分组相对应的那些children item。
-  panoData.catalogRoot = rootmp.map((item) => {
-    let temp = []
-    item.children = utils.unique(item.children)
-    item.children.forEach((sub) => {
-      tmp.forEach((jj) => {
-        if (jj.id == sub) {
-          temp.push(sub)
-        }
-      })
-    })
-    return {
-      ...item,
-      children: temp,
-    }
-  })
-
-  // 多余
-  panoData.catalogs = tmp
-
-  // 如果没有一级分组（一定也就没有二级分组）就创建一级分组和二级分组 有必要吗？
-  let cid = "c_" + utils.randomWord(true, 8, 8)
-  if (panoData.catalogRoot.length <= 0) {
-    panoData.catalogRoot.push({
-      id: "r_" + utils.randomWord(true, 8, 8),
-      name: "全部场景",
-      children: [cid],
-    })
-  }
-  if (panoData.catalogs.length <= 0) {
-    panoData.catalogs.push({
-      id: cid,
-      name: "默认二级分组",
-    })
-  }
-
-  // 如果有初始场景，改为引用场景列表中对应的那个场景的js对象
-  if (panoData.firstScene) {
-    panoData.firstScene = panoData.scenes.find(
-      (item) => item.sceneCode == panoData.firstScene.sceneCode
-    )
-  }
-}
-