change

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "mobile-detect": "^1.4.5",
     "swiper": "^11.1.1",
     "vue": "^3.4.21"
   },

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  mobile-detect:
+    specifier: ^1.4.5
+    version: 1.4.5
   swiper:
     specifier: ^11.1.1
     version: 11.1.1
@@ -643,6 +646,10 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /mobile-detect@1.4.5:
+    resolution: {integrity: sha512-yc0LhH6tItlvfLBugVUEtgawwFU2sIe+cSdmRJJCTMZ5GEJyLxNyC/NIOAOGk67Fa8GNpOttO3Xz/1bHpXFD/g==}
+    dev: false
+
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}

src/App.vue

@@ -1,7 +1,10 @@
 <template>
-  <div>
+  <template v-if="isMo">
+    <NoMobile />
+  </template>
+  <div v-else>
     <Logo />
-    <RightMenu @toggle-menu="handleNavi" @change-scene="handleChangeScene"/>
+    <RightMenu @toggle-menu="handleNavi" @change-scene="handleChangeScene" />
     <Container :url="currentScene"></Container>
     <NavigationBar :show="navi" @change-scene="handleChangeScene" />
   </div>
@@ -12,9 +15,13 @@ import Logo from './components/Logo.vue';
 import RightMenu from './components/RightMenu.vue';
 import Container from './components/Container.vue';
 import NavigationBar from './components/NavigationBar.vue';
+import NoMobile from './components/Nomobile.vue';
+import MobileDetect from 'mobile-detect';
+
 import config from './config.json'
 const data = ref([])
-
+const isMo = ref(false)
+const md = new MobileDetect(window.navigator.userAgent);
 data.value = config
 provide('data', data)
 
@@ -27,6 +34,14 @@ const handleNavi = () => {
 }
 
 onMounted(() => {
+  if (md.mobile()) {
+    console.log('isMo')
+    isMo.value = true
+   document.body.classList.add('isMo')
+    return
+  }
+
+
   const scenes = Array.from(data.value).find(item => item.id === 'home');
   currentScene.value = scenes.url
 

src/components/Nomobile.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="isMo">
+        <div class="box">
+            <img class="logo-cube" :src="logoCube" />
+
+            <span class="cap">請在電腦端瀏覽網站</span>
+            <span class="sub">Please browse the website from your computer</span>
+        </div>
+
+    </div>
+</template>
+<script setup>
+import logoCube from '../assets/mobile_logo.png'
+</script>
+<style scoped lang="scss">
+.isMo {
+    background: white;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .box {
+        margin-top: -30vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: #000;
+        font-size: 14px;
+
+        img {
+            margin-bottom: 20px;
+        }
+
+        .cap {
+            font-weight: bolder;
+            font-size: 18px;
+            line-height: 32px;
+
+        }
+    }
+}
+</style>

src/config.json

@@ -74,7 +74,7 @@
         "cover": "study_room.png",
         "zhName": "自修室",
         "enName": "self-study rooms",
-        "url": "https://laser.4dkankan.com/spg.html?m=SG-eur-uLWib3e02c&lang=en#/"
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-uLWib3e02c&lang=en#/"
     },
     {
         "id": "3A Classroom",
@@ -82,7 +82,7 @@
         "cover": "3A_lassroom.png",
         "zhName": "3A課室",
         "enName": "3A Classroom",
-        "url": "https://laser.4dkankan.com/spg.html?m=SG-eur-uSKrb3df7a&lang=en#/"
+        "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-uSKrb3df7a&lang=en#/"
     },
     {
         "id": "DT1",
@@ -151,7 +151,7 @@
     {
         "id": "DT3",
         "type": "scene",
-        "cover": "Computer_drawing_room.png",
+        "cover": "Design_and_Technology_Workshop(3).png",
         "zhName": "設計與科技工場（3）",
         "enName": "Design & Technology Workshop(3)",
         "url": "https://eur.4dkankan.com/spg.html?m=SG-eur-R1Teb3d0bb&lang=en"

src/style.css

@@ -58,7 +58,7 @@ button:focus-visible {
   padding: 2em;
 }
 
-#app {
+body:not(.isMo) #app {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;