feat: 对接线上展厅

.env.dev

@@ -1,4 +1,5 @@
 VUE_APP_CLI_MODE=dev
 NODE_ENV=development
 PUBLIC_PATH=/
-VUE_APP_DEPLOY_ORIGIN=
+VUE_APP_DEPLOY_ORIGIN=
+VUE_APP_SCENE_URL="https://culture.4dage.com/NanjingMuseumWuJinZangNew/scene/spg.html?m=KJ-et2X3su4ofm"

.env.mytest

@@ -1,4 +1,5 @@
 VUE_APP_CLI_MODE=test
 NODE_ENV=production
 PUBLIC_PATH=./
-VUE_APP_DEPLOY_ORIGIN=
+VUE_APP_DEPLOY_ORIGIN=
+VUE_APP_SCENE_URL="/NanjingMuseumWuJinZangNew/scene/smg.html?m=KJ-et2X3su4ofm"

.env.prod

@@ -1,4 +1,5 @@
 VUE_APP_CLI_MODE=prod
 NODE_ENV=production
 PUBLIC_PATH=./
-VUE_APP_DEPLOY_ORIGIN=
+VUE_APP_DEPLOY_ORIGIN=
+# VUE_APP_SCENE_URL="/NanjingMuseumWuJinZangNew/scene/smg.html?m=KJ-et2X3su4ofm"

src/router/index.js

@@ -8,6 +8,7 @@ import PaintingList from '../views/PaintingList.vue'
 import PaintingDetail from '../views/PaintingDetail'
 import GameView from '../views/GameView.vue'
 import BambooBookView from '../views/BambooBookView.vue'
+import SceneView from '../views/SceneView.vue'
 
 // import store from '@/store/index.js'
 
@@ -59,6 +60,12 @@ const routes = [
     name: 'Game',
     component: GameView,
   },
+  // 线上展厅
+  {
+    path: '/scene',
+    name: 'Scene',
+    component: SceneView,
+  },
   // 竹谱
   {
     path: '/bambooBook',

src/views/SceneView.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { inject } from "vue"
+import { useRouter } from 'vue-router'
+
+const $env = inject('$env')
+
+const router = useRouter()
+
+const closeScene = () => {
+  const musicDom = document.getElementById('bg-music')
+  musicDom.play()
+  router.replace('/more-content?anchorIdx=3')
+}
+</script>
+
+<template>
+  <div class="scene-box">
+    <BtnBack
+      class="scene-back"
+      @click="closeScene()"
+    />
+    <iframe
+      :src="$env.VUE_APP_SCENE_URL"
+      frameborder="0"
+    />
+  </div>
+</template>
+
+<style lang='less' scoped>
+.scene-box {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+
+  >.scene-back {
+    position: absolute;
+    left: 8px;
+    top: 45px;
+    transform: scale(1);
+    z-index: 2;
+  }
+
+  >iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+</style>