首頁 探索 說明
註冊 登入
zhangyupeng
/
hk-school
1
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

feat: save

gemercheung 1 年之前
父節點
12cf3cdd36
當前提交
ce5bc37e10
共有 6 個文件被更改，包括 129 次插入 和 5 次删除
統一視圖 顯示文件統計
  1. 5 1
      index.html
  2. 二進制
      public/cover/under.png
  3. 10 3
      src/App.vue
  4. 1 1
      src/components/NavigationBar.vue
  5. 105 0
      src/components/Opening.vue
  6. 8 0
      src/config.json

+ 5 - 1
index.html
查看文件 

@@ -1,10 +1,14 @@
 
-<!doctype html>
 
+<!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
   <head>
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
     <link rel="icon" href="/favicon.ico" />
 
     <link rel="icon" href="/favicon.ico" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>龍翔官立中學</title>
 
     <title>龍翔官立中學</title>
 
+    <!-- <script src="https://4dkk.4dage.com/v4-test/www/viewer/static/lib/vconsole.js"></script>
 
+    <script>
 
+      var vConsole = new window.VConsole();
 
+    </script> -->
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

二進制
public/cover/under.png
查看文件


+ 10 - 3
src/App.vue
查看文件 

@@ -2,7 +2,8 @@
 
   <!-- <template v-if="isMo">
 
   <!-- <template v-if="isMo">
 
     <NoMobile />
 
     <NoMobile />
 
   </template> -->
 
   </template> -->
 
-  <div >
 
+  <div>
 
+    <Opening @done="onOpeningDone" />
 
     <Logo :id="currentSceneId" />
 
     <Logo :id="currentSceneId" />
 
     <RightMenu @toggle-menu="handleNavi" @change-scene="handleChangeScene" />
 
     <RightMenu @toggle-menu="handleNavi" @change-scene="handleChangeScene" />
 
     <Container :url="currentScene"></Container>
 
     <Container :url="currentScene"></Container>
 
@@ -15,12 +16,14 @@ import Logo from './components/Logo.vue';
 
 import RightMenu from './components/RightMenu.vue';
 
 import RightMenu from './components/RightMenu.vue';
 
 import Container from './components/Container.vue';
 
 import Container from './components/Container.vue';
 
 import NavigationBar from './components/NavigationBar.vue';
 
 import NavigationBar from './components/NavigationBar.vue';
 
+import Opening from './components/Opening.vue';
 
 // import NoMobile from './components/Nomobile.vue';
 
 // import NoMobile from './components/Nomobile.vue';
 
 import MobileDetect from 'mobile-detect';
 
 import MobileDetect from 'mobile-detect';
 
 
 
 import config from './config.json'
 
 import config from './config.json'
 
 const data = ref([])
 
 const data = ref([])
 
 const isMo = ref(false)
 
 const isMo = ref(false)
 
+const isOpening = ref(false)
 
 const md = new MobileDetect(window.navigator.userAgent);
 
 const md = new MobileDetect(window.navigator.userAgent);
 
 data.value = config
 
 data.value = config
 
 provide('data', data)
 
 provide('data', data)
 
@@ -33,12 +36,16 @@ const handleNavi = () => {
 
   navi.value = !navi.value
 
   navi.value = !navi.value
 
   console.log('navi', navi.value)
 
   console.log('navi', navi.value)
 
 }
 
 }
 
+const onOpeningDone = () => {
 
+  isOpening.value = true
 
+
 
+}
 
 
 
 onMounted(() => {
 
 onMounted(() => {
 
   if (md.mobile()) {
 
   if (md.mobile()) {
 
-    console.log('isMo')
 
+    // console.log('isMo')
 
     isMo.value = true
 
     isMo.value = true
 
-   document.body.classList.add('isMo')
 
+    document.body.classList.add('isMo')
 
     // return
 
     // return
 
   }
 
   }

+ 1 - 1
src/components/NavigationBar.vue
查看文件 

@@ -68,7 +68,7 @@ const slidePreview = ref(5);
 
 // //   hideOnClick: true,

 // //   hideOnClick: true,

 // });

 // });

 const handleWindowResize = () => {

 const handleWindowResize = () => {

-  console.log('isMo', isMo)

+  // console.log('isMo', isMo)

   if (!unref(isMo)) {

   if (!unref(isMo)) {

     const innerWidth = window.innerWidth;

     const innerWidth = window.innerWidth;

     const pre = Math.ceil(innerWidth / 280);

     const pre = Math.ceil(innerWidth / 280);

+ 105 - 0
src/components/Opening.vue
查看文件 

@@ -0,0 +1,105 @@
 
+<template>

+    <Teleport to="body">

+        <view class="video-viewer" v-if="isShowVideo">

+            <video :playsinline="isMo"

+                :src="isMo ? 'https://eurs3.4dkankan.com/showcase/hklongxiang/video/opening-new.mp4' : 'https://eurs3.4dkankan.com/showcase/hklongxiang/video/opening-new.mp4'"

+                muted autoplay @play="onVideoPlaying" @end="onVideoEnd">

+            </video>

+            <div v-if="showStepper" class="step-in" @click="closeVideo"> 跳過</div>

+            <div class="mo_b"></div>

+        </view>

+    </Teleport>

+</template>

+<script setup>

+import { ref, onMounted, inject } from 'vue';

+const isShowVideo = ref(true);

+const showStepper = ref(false);

+const isMo = inject("isMo");

+var showTimer;

+const emits = defineEmits(['done']);

+

+const closeVideo = () => {

+    isShowVideo.value = false

+    emits('done')

+}

+onMounted(() => {

+

+})

+const onVideoPlaying = () => {

+

+    showTimer && clearTimeout(showTimer);

+    showTimer = setTimeout(() => {

+        showStepper.value = true

+    }, 3000);

+

+}

+const onVideoEnd = () => {

+    emits('done')

+}

+</script>

+<style lang="scss">

+.video-viewer {

+    position: fixed;

+    top: 0;

+    left: 0;

+    z-index: 1000;

+    width: 100%;

+    height: 100%;

+

+    .step-in {

+        background: rgba(0, 0, 0, 0.6);

+        position: absolute;

+        right: 30px;

+        top: 30px;

+        padding: 10px 30px;

+        border-radius: 20px;

+        cursor: pointer;

+        z-index: 1000;

+    }

+

+    video {

+        width: 100%;

+        height: 100%;

+        top: 0;

+        left: 0;

+        object-fit: fill;

+    }

+}

+

+.isMo {

+    .video-viewer {

+        .mo_b {

+            background: rgba(0, 0, 0, 0.8);

+            filter: blur(2px);

+            position: absolute;

+            width: 100%;

+            height: 100%;

+            z-index: 1;

+            display: block;

+            top: 0;

+            left: 0;

+        }

+

+        video {

+            object-fit: scale-down;

+            z-index: 1001;

+            position: absolute;

+        }

+    }

+

+    .step-in {

+        bottom: 80px;

+        top: initial;

+        color: white;

+        background: rgba(0, 0, 0, 1);

+        transform: translateX(-50%);

+        left: 50%;

+        display: inline-block;

+        text-align: center;

+        position: fixed;

+        padding: 10px;

+        width: 60px;

+        z-index: 10000;

+    }

+}

+</style>

+ 8 - 0
src/config.json
查看文件 

@@ -21,6 +21,14 @@
 
         "url": "https://www.4dmodel.com/UICcode/code/?from=timeline&isappinstalled=0#/"

         "url": "https://www.4dmodel.com/UICcode/code/?from=timeline&isappinstalled=0#/"

     },

     },

     {

     {

+        "id": "Ground Floor",

+        "type": "scene",

+        "cover": "under.png",

+        "zhName": "地下",

+        "enName": "Ground Floor",

+        "url": "https://eurs3.4dkankan.com/showcase/hklongxiang/spg.html?m=SG-eur-ayAiaf8bd3"

+    },

+    {

         "id": "School History Center",

         "id": "School History Center",

         "type": "scene",

         "type": "scene",

         "cover": "School_History_Museum.png",

         "cover": "School_History_Museum.png",