feat: update

src/App.vue

@@ -3,7 +3,8 @@
     <NoMobile />
   </template> -->
   <div>
-    <Opening @done="onOpeningDone" />
+    <Opening @done="onOpeningDone" @show-step="isHomePage = true" />
+    <Homepage :show="isHomePage" @close="handleCloseAndGoHomePage" />
     <Logo :id="currentSceneId" />
     <RightMenu @toggle-menu="handleNavi" @change-scene="handleChangeScene" />
     <Container :url="currentScene"></Container>
@@ -16,6 +17,7 @@ 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 Homepage from './components/Home.vue';
 import Opening from './components/Opening.vue';
 // import NoMobile from './components/Nomobile.vue';
 import MobileDetect from 'mobile-detect';
@@ -24,6 +26,9 @@ import config from './config.json'
 const data = ref([])
 const isMo = ref(false)
 const isOpening = ref(false)
+const isHomePage = ref(true)
+
+
 const md = new MobileDetect(window.navigator.userAgent);
 data.value = config
 provide('data', data)
@@ -46,6 +51,7 @@ onMounted(() => {
     // console.log('isMo')
     isMo.value = true
     document.body.classList.add('isMo')
+  
     // return
   }
 
@@ -54,11 +60,24 @@ onMounted(() => {
 
 });
 
-const handleChangeScene = (item) => {
-  console.log('handleChangeScene', item)
+const handleChangeScene = (item, isHome) => {
+  if (!isHome) {
+    isHomePage.value = false
+  } else {
+    isHomePage.value = true
+  }
+
+  console.log('handleChangeScene', item, isHome)
   currentScene.value = item.url
   currentSceneId.value = item.id
 }
+const handleCloseAndGoHomePage = () => {
+  console.log('handleCloseAndGoHomePage')
+  const first = config[0];
+  isHomePage.value = false
+  currentScene.value = first.url
+  currentSceneId.value = first.id
+}
 
 
 </script>

src/components/Home.vue

@@ -0,0 +1,57 @@
+<template>
+
+    <div class="homepage" v-if="show">
+        <div class="clickable" @click="emits('close')"></div>
+    </div>
+
+
+</template>
+<script setup>
+defineProps({
+    show: {
+        type: Boolean,
+        default: () => true
+    }
+})
+
+const emits = defineEmits(['close'])
+
+</script>
+<style style="scss">
+.homepage {
+    width: 100%;
+    height: 100%;
+    background-image: url('/src/assets/shouye.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: absolute;
+    overflow: hidden;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+
+    .clickable {
+        width: 52vw;
+        height: 65vh;
+        margin-top: 12vh;
+        margin-right: 2vw;
+        margin-right: 4vw;
+        cursor: pointer;
+        /* background: rgba(0, 0, 0, 0.5); */
+        transform: skew(-5deg, -5deg);
+    }
+
+}
+
+.isMo {
+    .homepage {
+        object-fit: scale-down;
+        
+    }
+}
+</style>

src/components/NavigationBar.vue

@@ -1,34 +1,36 @@
 <template>
-  <div class="bar" :class="{ show, isMo }">
-    <img class="close" :src="closeICON" @click="toggleMenu" />
-
-    <!-- <template v-if="!isMo"> -->
-
-    <Swiper :slides-per-view="slidePreview" :direction="isMo ? 'vertical' : 'horizontal'" :autoHeight="true"
-      :navigation="{
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-      }" :modules="modules" :grabCursor="true" :space-between="0" :freeMode="true" @swiper="onSwiper"
-      @slideChange="onSlideChange">
-      <template v-for="item in lists">
-        <SwiperSlide @click="handleClick(item)">
-          <div class="cover">
-            <img :src="`${imagePath}${item.cover}`" />
-          </div>
-          <div class="desc">
-            <span class="cap">{{ item.zhName }}</span>
-            <span class="sub">{{ item.enName }}</span>
-          </div>
-        </SwiperSlide>
-      </template>
-    </Swiper>
-    <div class="swiper-button swiper-button-next">
-    </div>
-    <div class="swiper-button swiper-button-prev">
+
+    <div class="bar" :class="{ show, isMo }">
+      <img class="close" :src="closeICON" @click="toggleMenu" />
+
+      <!-- <template v-if="!isMo"> -->
+
+      <Swiper :slides-per-view="slidePreview" :direction="isMo ? 'vertical' : 'horizontal'" :autoHeight="true"
+        :navigation="{
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        }" :modules="modules" :grabCursor="true" :space-between="0" :freeMode="true" @swiper="onSwiper"
+        @slideChange="onSlideChange">
+        <template v-for="item in lists">
+          <SwiperSlide @click="handleClick(item)">
+            <div class="cover">
+              <img :src="`${imagePath}${item.cover}`" />
+            </div>
+            <div class="desc">
+              <span class="cap">{{ item.zhName }}</span>
+              <span class="sub">{{ item.enName }}</span>
+            </div>
+          </SwiperSlide>
+        </template>
+      </Swiper>
+      <div class="swiper-button swiper-button-next">
+      </div>
+      <div class="swiper-button swiper-button-prev">
+      </div>
+      <!-- </template> -->
+
     </div>
-    <!-- </template> -->
 
-  </div>
 </template>
 
 
@@ -84,7 +86,7 @@ const handleWindowResize = () => {
 
 };
 const handleClick = (item) => {
-  emits("changeScene", item);
+  emits("changeScene", item, false);
 };
 const toggleMenu = () => {
   emits('toggleMenu')
@@ -114,7 +116,7 @@ const onSlideChange = () => {
 <style scoped lang="scss">
 .bar {
   position: fixed;
-  z-index: 10;
+  z-index: 1000000;
   bottom: -100%;
   left: 0;
   width: calc(100% - 30px);
@@ -164,7 +166,7 @@ const onSlideChange = () => {
 
   .swiper-button {
     color: rgba(255, 255, 255, 1);
-    top:40%;
+    top: 40%;
   }
 
   .swiper-slide {

src/components/Opening.vue

@@ -3,7 +3,7 @@
         <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">
+                muted autoplay @play="onVideoPlaying" @ended="onVideoEnd">
             </video>
             <div v-if="showStepper" class="step-in" @click="closeVideo"> 跳過</div>
             <div class="mo_b"></div>
@@ -16,25 +16,35 @@ const isShowVideo = ref(true);
 const showStepper = ref(false);
 const isMo = inject("isMo");
 var showTimer;
-const emits = defineEmits(['done']);
+const emits = defineEmits(['done', 'show-step']);
+
+const isWeixinBrowser = () => {
+    var ua = navigator.userAgent.toLowerCase();
+    return (/micromessenger/.test(ua)) ? true : false;
+}
+
 
 const closeVideo = () => {
     isShowVideo.value = false
     emits('done')
 }
 onMounted(() => {
+    if (isWeixinBrowser()) {
+        closeVideo();
+    }
 
 })
 const onVideoPlaying = () => {
-
     showTimer && clearTimeout(showTimer);
     showTimer = setTimeout(() => {
         showStepper.value = true
+        emits('show-step')
     }, 3000);
 
 }
 const onVideoEnd = () => {
     emits('done')
+    closeVideo()
 }
 </script>
 <style lang="scss">
@@ -42,7 +52,7 @@ const onVideoEnd = () => {
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 1000;
+    z-index: 1000000;
     width: 100%;
     height: 100%;
 
@@ -54,7 +64,8 @@ const onVideoEnd = () => {
         padding: 10px 30px;
         border-radius: 20px;
         cursor: pointer;
-        z-index: 1000;
+        z-index: 1000000;
+        color: white;
     }
 
     video {

src/components/RightMenu.vue

@@ -39,7 +39,7 @@ const toggleMenu = () => {
     emits('toggleMenu')
 }
 const changeScene = (item) => {
-    emits('changeScene', item)
+    emits('changeScene', item, true)
 }
 </script>
 <style lang="scss" scoped>
@@ -55,7 +55,7 @@ const changeScene = (item) => {
     padding: 0;
     margin: 0;
     list-style: none;
-
+    z-index: 100000;
 
     .item {
         width: 75px;
@@ -73,6 +73,7 @@ const changeScene = (item) => {
         align-items: center;
         justify-content: center;
         opacity: 0.9;
+
         a {
             display: flex;
             width: 100%;
@@ -99,15 +100,17 @@ const changeScene = (item) => {
         }
     }
 }
+
 .isMo {
     .right-menu {
-        top:48%;
+        top: 48%;
+
         .item {
             span.cap {
-            font-size: 13px;
-        }
+                font-size: 13px;
+            }
         }
-      
+
     }
 }
 </style>

src/style.css

@@ -21,13 +21,19 @@ a {
 a:hover {
   color: #535bf2;
 }
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+}
+
 
 body {
   margin: 0;
   display: flex;
   place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  overflow: hidden;
 }
 
 h1 {