change

src/App.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 <script setup>
-import { provide, ref } from 'vue';
+import { onMounted, provide, ref, watchEffect } from 'vue';
 import Logo from './components/Logo.vue';
 import RightMenu from './components/RightMenu.vue';
 import Container from './components/Container.vue';
@@ -19,11 +19,18 @@ data.value = config
 provide('data', data)
 
 const navi = ref(false)
-const currentScene = ref('https://houseoss.4dkankan.com/uic/UICcode/hp1/tour.html')
+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 handleChangeScene = (item) => {
   console.log('handleChangeScene', item)

src/components/NavigationBar.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="bar" :class="{ show }">
-        <swiper :slides-per-view="slidePreview" :grabCursor="true" :space-between="5" :freeMode="true"
+        <swiper :slides-per-view="slidePreview" :grabCursor="true" :space-between="0" :freeMode="true"
             @swiper="onSwiper" @slideChange="onSlideChange">
 
             <template v-for="item in lists">
@@ -46,7 +46,7 @@ const slidePreview = ref(5)
 
 const handleWindowResize = () => {
     const innerWidth = window.innerWidth
-    const pre = Math.ceil(innerWidth / 230)
+    const pre = Math.ceil(innerWidth / 280)
     console.log('slidePreview', pre)
     slidePreview.value = pre
 }
@@ -77,7 +77,7 @@ const onSlideChange = () => {
     z-index: 10;
     bottom: -100%;
     left: 0;
-    width: 100%;
+    width: calc(100% - 30px);
     height: 206px;
     padding-right: 15px;
     padding-left: 15px;
@@ -116,14 +116,22 @@ const onSlideChange = () => {
         cursor: pointer;
 
         .cover {
-            width: 189px;
+            width: 230px;
             height: 117px;
             margin-top: 20px;
             margin-bottom: 10px;
+            overflow: hidden;
+            border-radius: 5px;
+
+            img {
+                width: 100%;
+                height: auto;
+                object-fit: cover;
+            }
         }
 
         .desc {
-            width: 189px;
+            width: 230px;
             height: 60px;
             color: black;
             text-align: left;
@@ -138,6 +146,7 @@ const onSlideChange = () => {
 
             span.sub {
                 font-size: 13px;
+                text-wrap: nowrap;
                 font-weight: normal;
             }
         }

src/config copy.json

@@ -0,0 +1,142 @@
+[
+    {
+        "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

@@ -21,19 +21,155 @@
         "url": "https://www.4dmodel.com/UICcode/code/?from=timeline&isappinstalled=0#/"
     },
     {
-        "id": "scene-1",
+        "id": "General Office",
         "type": "scene",
-        "zhName": "學校前門",
-        "enName": "Front door",
+        "zhName": "校務處",
+        "cover": "School_Affairs_Office.png",
+        "enName": "General Office",
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-PLlub3e24b&lang=en"
+    },
+    {
+        "id": "Staff Room A",
+        "type": "scene",
+        "zhName": "教員室 A",
+        "cover": "Teacher's_Room_A.png",
+        "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",
+        "cover": "Teacher's_Room.png",
+        "enName": "Staff Room B",
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-cCc4b3e0e1&lang=en"
+    },
+    {
+        "id": "Physics classroom",
+        "type": "scene",
+        "zhName": "物理室",
+        "cover": "physics_room.png",
+        "enName": "Physics classroom",
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-3oSfb3dca8&lang=en"
+    },
+    {
+        "id": "Library",
+        "type": "scene",
+        "zhName": "圖書館",
         "cover": "library.png",
-        "url": "https://www.4dmodel.com/UICcode/code/?from=timeline&isappinstalled=0#/list?ifr=https%3A%2F%2Fhouseoss.4dkankan.com%2Fuic%2FUICcode%2Fhp2%2Ftour.html"
+        "enName": "Library",
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-zC8ub3dec4&lang=en"
+    },
+    {
+        "id": "Music Room",
+        "type": "scene",
+        "cover": "music_room.png",
+        "zhName": "音樂室",
+        "enName": "Music Room",
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-589Ab3e300&lang=en"
+    },
+    {
+        "id": "self-study rooms",
+        "type": "scene",
+        "cover": "study_room.png",
+        "zhName": "自修室",
+        "enName": "self-study rooms",
+        "url": "https://laser.4dkankan.com/spg.html?m=SG-eur-uLWib3e02c&lang=en#/"
+    },
+    {
+        "id": "3A Classroom",
+        "type": "scene",
+        "cover": "3A_lassroom.png",
+        "zhName": "3A課室",
+        "enName": "3A Classroom",
+        "url": "https://laser.4dkankan.com/spg.html?m=SG-eur-uSKrb3df7a&lang=en#/"
+    },
+    {
+        "id": "DT1",
+        "type": "scene",
+        "cover": "D&T_room.png",
+        "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",
+        "cover": "student_activity_room.png",
+        "zhName": "學生活動室",
+        "enName": "Student Activity Room",
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-WdGJb3dd5a&lang=en"
+    },
+    {
+        "id": "Chemistry Laboratory",
+        "type": "scene",
+        "cover": "Chemistry_laboratory.png",
+        "zhName": "化學實驗室",
+        "enName": "Chemistry Laboratory",
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-FGQ6b3dbf7&lang=en"
+    },
+    {
+        "id": "Preparation Room",
+        "type": "scene",
+        "cover": "Preparatory_room.png",
+        "zhName": "預備室",
+        "enName": "Preparation Room",
+        "url": "https://eur.4dkankan.com/smg.html?m=SG-eur-gcHEb3d710&lang=en"
+    },
+    {
+        "id": "Biological Laboratory",
+        "type": "scene",
+        "cover": "biology_laboratory.png",
+        "zhName": "生物實驗室",
+        "enName": "Biological Laboratory",
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-ayReb3d65d&lang=en"
+    },
+    {
+        "id": "DT4",
+        "type": "scene",
+        "cover": "Design_and_Technology_Workshop(4).png",
+        "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",
+        "cover": "art_room.png",
+        "zhName": "美術室",
+        "enName": "ART ROOM",
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-ZUtqb3d5ae&lang=en"
+    },
+    {
+        "id": "Computer Graphic Studio",
+        "type": "scene",
+        "cover": "Computer_drawing_room.png",
+        "zhName": "電腦繪圖室",
+        "enName": "Computer Graphic Studio",
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-woEgb3d171&lang=en"
+    },
+    {
+        "id": "DT3",
+        "type": "scene",
+        "cover": "Computer_drawing_room.png",
+        "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",
+        "cover": "School_History_Museum.png",
+        "zhName": "校史館",
+        "enName": "School History Center",
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-ANecb379ae&lang=en"
     },
     {
-        "id": "scene-2",
+        "id": "hall",
         "type": "scene",
-        "zhName": "北师港浸大校园2",
-        "enName": "UIC Campus",
         "cover": "auditorium.png",
-        "url": "https://www.4dmodel.com/UICcode/code/?from=timeline&isappinstalled=0#/list?ifr=https%3A%2F%2Fhouseoss.4dkankan.com%2Fuic%2FUICcode%2Fhp2%2Ftour.html"
+        "zhName": "禮堂",
+        "enName": "Hall",
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-XUYLaf7632&lang=en"
     }
 ]