瀏覽代碼

feat: 保存部分

gemercheung 1 年之前
父節點
當前提交
7b6260dd28
共有 4 個文件被更改,包括 70 次插入1 次删除
  1. 1 1
      public/sceneTree.js
  2. 二進制
      src/assets/audios/camera-intro-1-4.mp3
  3. 65 0
      src/views/OpenState.vue
  4. 4 0
      src/views/PanoView.vue

+ 1 - 1
public/sceneTree.js

@@ -41,7 +41,7 @@ export default [
           '大都城内的官署机构',
           '重要建筑构件',
         ],
-      },
+      }
     ]
   },
   {

二進制
src/assets/audios/camera-intro-1-4.mp3


+ 65 - 0
src/views/OpenState.vue

@@ -0,0 +1,65 @@
+<template>
+  <transition name="fade-in-out-slow">
+    <!-- 开场白 -->
+    <div
+      v-if="false"
+      class="text-wrap"
+    >
+      <div
+        class="text text-indent"
+        v-html="intro"
+      />
+      <!-- 人物 -->
+      <div
+        :class="['text-wrap__character', charactorSpeckPositionLeft && 'left']"
+      >
+        <img
+          draggable="false"
+          :src="
+            require(charactorSpeckPositionLeft
+              ? '@/assets/images/talk2-min.png'
+              : `@/assets/images/slow_talking.png`)
+          "
+        >
+      </div>
+    </div>
+  </transition>
+  <transition name="cloud-top">
+    <img
+      v-if="isShowCameraIntro"
+      class="cloud cloud-top"
+      src="@/assets/images/cloud-top.png"
+      alt=""
+      draggable="false"
+    >
+  </transition>
+  <transition name="cloud-left-bottom">
+    <img
+      v-if="isShowCameraIntro"
+      class="cloud-left-bottom"
+      src="@/assets/images/cloud-left-bottom.png"
+      alt=""
+      draggable="false"
+    >
+  </transition>
+  <transition name="cloud-right-bottom">
+    <img
+      v-if="isShowCameraIntro"
+      class="cloud-right-bottom"
+      src="@/assets/images/cloud-right-bottom.png"
+      alt=""
+      draggable="false"
+    >
+  </transition>
+</template>
+<script setup>
+import { ref, defineOptions } from 'vue'
+const charactorSpeckPositionLeft = ref(true)
+defineOptions({
+  name: "OpenState"
+})
+const intro = ref(`
+    <p>大家好,我是来自元代的赵孟頫,很高兴能够作为向导,带领大家一同游览这座“枕居
+    庸、奠朔方,左挹沧海、右拥太行、南控江淮、北连朔漠”的元大都城。</p>
+`)
+</script>

+ 4 - 0
src/views/PanoView.vue

@@ -217,6 +217,8 @@
         isShowHotspotDetail = true
       }"
     />
+
+    <!-- <OpenState /> -->
     <!-- 镜头切换过渡 -->
     <transition name="fade-in-out-slow">
       <div
@@ -260,6 +262,7 @@
         </div>
       </div>
     </transition>
+
     <transition name="cloud-top">
       <img
         v-if="isShowCameraIntro"
@@ -342,6 +345,7 @@ import HotspotDialog1 from '@/components/HotspotDialog-1.vue'
 import { useWindowSize } from '@vueuse/core'
 import MsgContent from '@/components/MsgContent.vue'
 import UserGuide from "@/components/UserGuide.vue"
+import OpenState from './OpenState.vue'
 
 const GUIDE_KEY = 'is-open-guide'
 const msgVisible = ref(false)