change

src/App.vue

@@ -2,8 +2,8 @@
   <div>
     <Logo />
     <RightMenu @toggle-menu="handleNavi" />
-    <Container></Container>
-    <NavigationBar @change-scene="handleChangeScene"/>
+    <Container :url="currentScene"></Container>
+    <NavigationBar :show="navi" @change-scene="handleChangeScene" />
   </div>
 </template>
 <script setup>
@@ -14,20 +14,20 @@ import Container from './components/Container.vue';
 import NavigationBar from './components/NavigationBar.vue';
 import config from './config.json'
 const data = ref([])
-console.log('config', config)
+
 data.value = config
 provide('data', data)
 
-
 const navi = ref(false)
+const currentScene = ref('https://houseoss.4dkankan.com/uic/UICcode/hp1/tour.html')
 const handleNavi = () => {
   navi.value = !navi.value
   console.log('navi', navi.value)
 }
 
 const handleChangeScene = (item) => {
-
   console.log('handleChangeScene', item)
+  currentScene.value = item.url
 }
 
 

src/components/Container.vue

@@ -3,10 +3,18 @@
 </template>
 <script setup>
 import { ref, watchEffect } from 'vue'
-const frameUrl = ref('https://houseoss.4dkankan.com/uic/UICcode/hp1/tour.html')
+const frameUrl = ref('')
+const props = defineProps({
+    url: {
+        type: String,
+        default: () => ""
+    }
+})
 
 watchEffect(() => {
-
+    if (props.url) {
+        frameUrl.value = `${props.url}?t=${Date.now()}`
+    }
 
 })
 

src/components/NavigationBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="bar">
+    <div class="bar" :class="{ show }">
         <swiper :slides-per-view="slidePreview" :grabCursor="true" :space-between="5" :freeMode="true"
             @swiper="onSwiper" @slideChange="onSlideChange">
 
@@ -33,6 +33,13 @@ import { onMounted, onUnmounted } from 'vue';
 const data = inject('data');
 const emits = defineEmits(['changeScene'])
 
+defineProps({
+    show: {
+        type: Boolean,
+        default: () => false
+    }
+})
+
 const lists = computed(() => Array.from(data.value).filter(item => item.type === 'scene'));
 
 const slidePreview = ref(5)
@@ -68,13 +75,18 @@ const onSlideChange = () => {
 .bar {
     position: fixed;
     z-index: 10;
-    bottom: 0;
+    bottom: -100%;
     left: 0;
     width: 100%;
     height: 206px;
     padding-right: 15px;
     padding-left: 15px;
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
+    transition: bottom 0.2s ease-in-out;
+
+    &.show {
+        bottom: 0;
+    }
 
     &::before {
         content: ' ';

src/config.json

@@ -11,7 +11,7 @@
         "type": "link",
         "zhName": "",
         "enName": "",
-        "url": "https://www.4dmodel.com/UICcode/code/?from=timeline&isappinstalled=0#/"
+        "url": "https://www.lcgss.edu.hk/"
     },
     {
         "id": "logo",