1

src/components/panoDesc.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="pano-desc">
+    <div class="title-bar">
+      <button
+        class="audio"
+        :class="{
+          play: !isPanoDescAudioPlaying,
+          stop: isPanoDescAudioPlaying
+        }"
+        @click="togglePanoDescAudioStatus"
+      >
+        <img
+          :src="isPanoDescAudioPlaying ? require(`@/assets/images/pano/desc-audio-play.png`) : require(`@/assets/images/pano/desc-audio-stop.png`)"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <h1>asdlfjsdfjasdfsdfasdfasf</h1>
+      <button
+        class="expand-status"
+        :class="{
+          shrinked: !isPanoDescExpanded,
+          expanded: isPanoDescExpanded
+        }"
+        @click="togglePanoDescExpandStatus"
+      >
+        <img
+          src="@/assets/images/pano/arrow-blunt.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+    </div>
+    <div
+      v-show="isPanoDescExpanded"
+      class="content"
+    >
+      了解工卡阿萨。阿拉贡附件，奥维考虑。
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...globalMapState([
+      'isPanoDescAudioPlaying',
+      'isPanoDescExpanded',
+    ])
+  },
+  mounted() {
+  },
+  methods: {
+    ...globalMapMutations([
+      'togglePanoDescAudioStatus',
+      'togglePanoDescExpandStatus',
+    ]),
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.pano-desc {
+  position: relative;
+  > .title-bar {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    background-image: url(@/assets/images/pano/desc-title-bar.png);
+    background-size: contain;
+    > button.audio {
+      width: 2.08rem;
+      height: 1.67rem;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    > h1 {
+      font-size: 1.67rem;
+      color: #FFFFFF;
+      width: 13.33rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: pre;
+    }
+    > button.expand-status {
+      width: 1.75rem;
+      > img {
+        width: 100%;
+      }
+      &.expanded {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  .content {
+    position: absolute;
+    top: calc(100% + 0.63rem);
+    left: 50%;
+    transform: translateX(-50%);
+    width: 29.17rem;
+    max-height: 30rem;
+    overflow: auto;
+    background-color: rgba(147, 9, 9, 0.9);
+    padding: 1.67rem;
+    border-radius: 0.42rem;
+    text-indent: 2em;
+    color: #fff;
+    font-size: 1.5rem;
+    line-height: 3rem;
+  }
+}
+</style>

src/store/index.js

@@ -10,6 +10,8 @@ export default new Vuex.Store({
     isFullScreen: false,
 
     panoData: null,
+    isPanoDescAudioPlaying: false,
+    isPanoDescExpanded: false,
   },
   getters: {
     catalogTopology: (state) => {
@@ -92,6 +94,18 @@ export default new Vuex.Store({
     setPanoData(state, value) {
       state.panoData = value
     },
+    setIsPanoDescAudioPlaying(state, value) {
+      state.isPanoDescAudioPlaying = value
+    },
+    setIsPanoDescExpanded(state, value) {
+      state.isPanoDescExpanded = value
+    },
+    togglePanoDescAudioStatus(state) {
+      state.isPanoDescAudioPlaying = !state.isPanoDescAudioPlaying
+    },
+    togglePanoDescExpandStatus(state) {
+      state.isPanoDescExpanded = !state.isPanoDescExpanded
+    }
   },
   actions: {
   },

src/views/PanoView.vue

@@ -29,16 +29,26 @@
       <div>全景切换</div>
     </button>
 
+    <PanoDesc
+      v-if="currentSceneDesc"
+      class="pano-desc"
+    />
+
     <router-view />
   </div>
 </template>
 
 <script>
 import * as krfn from "@/libs/pano-core/index.js"
+import PanoDesc from "@/components/panoDesc.vue"
+import { vrTxtInfo as sceneDescList } from "@/components/sceneDesc.js"
 
 let __krfn = krfn.default
 
 export default {
+  components: {
+    'PanoDesc': PanoDesc,
+  },
   beforeRouteUpdate(to, from, next) {
     next()
     if (to.name === 'PanoView') {
@@ -54,7 +64,16 @@ export default {
   computed: {
     ...globalMapState([
       'panoData',
-    ])
+    ]),
+    sceneDescList() {
+      return sceneDescList
+    },
+    currentSceneDesc() {
+      console.log('asdfsdf', this.scene)
+      return this.sceneDescList.find((item) => {
+        return item.code === this.scene?.sceneCode
+      })
+    }
   },
   async mounted() {
     console.log('this.$route.params.scene: ', this.$route.params.scene)
@@ -161,5 +180,13 @@ export default {
       right: 1.63rem;
     }
   }
+  > .pano-desc {
+    position: absolute;
+    top: 2.54rem;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 4.17rem;
+    width: 22.5rem;
+  }
 }
 </style>