change

.env.development

@@ -1,2 +1,3 @@
 
 VITE_PUBLIC_DIR="/"
+VITE_COVER_DIR="/cover/"

.env.production

@@ -1 +1,2 @@
 VITE_PUBLIC_DIR="./"
+VITE_COVER_DIR="./cover/"

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Logo />
-    <RightMenu @toggle-menu="handleNavi" />
+    <RightMenu @toggle-menu="handleNavi" @change-scene="handleChangeScene"/>
     <Container :url="currentScene"></Container>
     <NavigationBar :show="navi" @change-scene="handleChangeScene" />
   </div>
@@ -20,16 +20,15 @@ provide('data', data)
 
 const navi = ref(false)
 const currentScene = ref('')
+
 const handleNavi = () => {
   navi.value = !navi.value
   console.log('navi', navi.value)
 }
 
 onMounted(() => {
-  const scenes = Array.from(data.value).filter(item => item.type === 'scene');
-  if (scenes[0]) {
-    currentScene.value = scenes[0].url
-  }
+  const scenes = Array.from(data.value).find(item => item.id === 'home');
+  currentScene.value = scenes.url
 
 });
 

src/components/Container.vue

@@ -13,7 +13,7 @@ const props = defineProps({
 
 watchEffect(() => {
     if (props.url) {
-        frameUrl.value = `${props.url}?t=${Date.now()}`
+        frameUrl.value = props.url
     }
 })
 
@@ -27,5 +27,7 @@ watchEffect(() => {
     left: 0;
     overflow: hidden;
     scrollbar-width: 0px;
+    outline: 0;
+    border: 0;
 }
 </style>

src/components/NavigationBar.vue

@@ -7,7 +7,7 @@
                 <swiper-slide @click="handleClick(item)">
 
                     <div class="cover">
-                        <img :src="`/cover/${item.cover}`" />
+                        <img :src="`${imagePath}${item.cover}`" />
                     </div>
                     <div class="desc">
                         <span class="cap">{{ item.zhName }}</span>
@@ -33,6 +33,8 @@ import { onMounted, onUnmounted } from 'vue';
 const data = inject('data');
 const emits = defineEmits(['changeScene'])
 
+const imagePath = ref(import.meta.env.VITE_COVER_DIR)
+
 defineProps({
     show: {
         type: Boolean,

src/components/RightMenu.vue

@@ -1,12 +1,10 @@
 <template>
     <Teleport to="body">
         <ul class="right-menu">
-            <li class="item">
-                <a :href="homeLink.url">
-                    <img :src="homeICON" />
-                    <span class="cap">{{ homeLink.zhName }}</span>
-                    <span class="sub">{{ homeLink.enName }}</span>
-                </a>
+            <li class="item" @click="changeScene(homeLink)">
+                <img :src="homeICON" />
+                <span class="cap">{{ homeLink.zhName }}</span>
+                <span class="sub">{{ homeLink.enName }}</span>
 
             </li>
             <li class="item" @click="toggleMenu">
@@ -33,14 +31,16 @@ import selectionICON from '../assets/scene_selection_n.png'
 import officialICON from '../assets/official_website.png'
 const data = inject('data');
 
-const emits = defineEmits(['toggleMenu'])
+const emits = defineEmits(['toggleMenu', 'changeScene'])
 const homeLink = computed(() => Array.from(data.value).find(item => item.id === 'home'));
 const official = computed(() => Array.from(data.value).find(item => item.id === 'official_website'));
 
 const toggleMenu = () => {
     emits('toggleMenu')
 }
-
+const changeScene = (item) => {
+    emits('changeScene', item)
+}
 </script>
 <style lang="scss" scoped>
 .right-menu {

src/config copy.json

@@ -1,142 +0,0 @@
-[
-    {
-        "id": "home",
-        "type": "scene",
-        "zhName": "主頁",
-        "enName": "home",
-        "url": "https://www.4dmodel.com/UICcode/code/?from=timeline&isappinstalled=0#/"
-    },
-    {
-        "id": "General Office",
-        "type": "scene",
-        "zhName": "校務處",
-        "enName": "General Office",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-PLlub3e24b&lang=en"
-    },
-    {
-        "id": "Staff Room A",
-        "type": "scene",
-        "zhName": "教員室 A",
-        "enName": "Staff Room A",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-FlV1b3e199&lang=en"
-    },
-    {
-        "id": "Staff Room B",
-        "type": "scene",
-        "zhName": "教員室 B",
-        "enName": "Staff Room B",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-cCc4b3e0e1&lang=en"
-    },
-    {
-        "id": "Physics classroom",
-        "type": "scene",
-        "zhName": "物理室",
-        "enName": "Physics classroom",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-3oSfb3dca8&lang=en"
-    },
-    {
-        "id": "Library",
-        "type": "scene",
-        "zhName": "圖書館",
-        "enName": "Library",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-zC8ub3dec4&lang=en"
-    },
-    {
-        "id": "Music Room",
-        "type": "scene",
-        "zhName": "音樂室",
-        "enName": "Music Room",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-589Ab3e300&lang=en"
-    },
-    {
-        "id": "self-study rooms",
-        "type": "scene",
-        "zhName": "自修室",
-        "enName": "self-study rooms",
-        "url": "https://laser.4dkankan.com/spg.html?m=SG-eur-uLWib3e02c&lang=en#/"
-    },
-    {
-        "id": "3A Classroom",
-        "type": "scene",
-        "zhName": "3A課室",
-        "enName": "3A Classroom",
-        "url": "https://laser.4dkankan.com/spg.html?m=SG-eur-uSKrb3df7a&lang=en#/"
-    },
-    {
-        "id": "DT1",
-        "type": "scene",
-        "zhName": "設計與科技工場(1)",
-        "enName": "Design & Technology Workshop(1)",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-xZ3qb3de0d&lang=en#/"
-    },
-    {
-        "id": "Student Activity Room",
-        "type": "scene",
-        "zhName": "學生活動室",
-        "enName": "Student Activity Room",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-WdGJb3dd5a&lang=en"
-    },
-    {
-        "id": "Chemistry Laboratory",
-        "type": "scene",
-        "zhName": "化學實驗室",
-        "enName": "Chemistry Laboratory",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-FGQ6b3dbf7&lang=en"
-    },
-    {
-        "id": "Preparation Room",
-        "type": "scene",
-        "zhName": "預備室",
-        "enName": "Preparation Room",
-        "url": "https://eur.4dkankan.com/smg.html?m=SG-eur-gcHEb3d710&lang=en"
-    },
-    {
-        "id": "Biological Laboratory",
-        "type": "scene",
-        "zhName": "生物實驗室",
-        "enName": "Biological Laboratory",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-ayReb3d65d&lang=en"
-    },
-    {
-        "id": "DT4",
-        "type": "scene",
-        "zhName": "設計與科技工場(4)",
-        "enName": "Design & Technology Workshop(4)",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-KpGbb3d38c&lang=en"
-    },
-    {
-        "id": "ART ROOM",
-        "type": "scene",
-        "zhName": "美術室",
-        "enName": "ART ROOM",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-ZUtqb3d5ae&lang=en"
-    },
-    {
-        "id": "Computer Graphic Studio",
-        "type": "scene",
-        "zhName": "電腦繪圖室",
-        "enName": "Computer Graphic Studio",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-woEgb3d171&lang=en"
-    },
-    {
-        "id": "DT3",
-        "type": "scene",
-        "zhName": "設計與科技工場（3）",
-        "enName": "Design & Technology Workshop(3)",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-R1Teb3d0bb&lang=en"
-    },
-    {
-        "id": "School History Center",
-        "type": "scene",
-        "zhName": "校史館",
-        "enName": "School History Center",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-ANecb379ae&lang=en"
-    },
-    {
-        "id": "hall",
-        "type": "scene",
-        "zhName": "禮堂",
-        "enName": "Hall",
-        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-XUYLaf7632&lang=en"
-    }
-]

src/config.json

@@ -4,7 +4,7 @@
         "type": "link",
         "zhName": "主頁",
         "enName": "home",
-        "url": "/"
+        "url": "https://eurs3.4dkankan.com/showcase/hklongxiang/spg.html?m=SG-eur-ayAiaf8bd3"
     },
     {
         "id": "official_website",