|
@@ -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>
|