save

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar"]
+  "recommendations": []
 }

src/components/NavigationBar.vue

@@ -1,24 +1,15 @@
 <template>
-  <div class="bar" :class="{ show,isMo }">
+  <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"
+    <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"
-    >
+      }" :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">
@@ -31,16 +22,12 @@
         </SwiperSlide>
       </template>
     </Swiper>
-    <div
-      class="swiper-button swiper-button-next"
-    >
+    <div class="swiper-button swiper-button-next">
     </div>
-    <div
-      class="swiper-button swiper-button-prev"
-    >
+    <div class="swiper-button swiper-button-prev">
     </div>
     <!-- </template> -->
-    
+
   </div>
 </template>
 
@@ -57,9 +44,9 @@ import { onMounted, onUnmounted } from "vue";
 
 const data = inject("data");
 const isMo = inject("isMo");
-const emits = defineEmits(["changeScene","toggleMenu"]);
+const emits = defineEmits(["changeScene", "toggleMenu"]);
 const swiper = ref(null);
-console.log("useSwiper", swiper, useSwiper);
+// console.log("useSwiper", swiper, useSwiper);
 const imagePath = ref(import.meta.env.VITE_COVER_DIR);
 
 defineProps({
@@ -75,14 +62,14 @@ const lists = computed(() =>
 const modules = [Navigation]
 const slidePreview = ref(5);
 
-const navigation = ref({
-  nextEl: ".swiper-button-next",
-  prevEl: ".swiper-button-prev ",
-//   hideOnClick: true,
-});
+// const navigation = ref({
+//   nextEl: ".swiper-button-next",
+//   prevEl: ".swiper-button-prev ",
+// //   hideOnClick: true,
+// });
 const handleWindowResize = () => {
-  console.log('isMo',isMo)
-  if(!unref(isMo)){
+  console.log('isMo', isMo)
+  if (!unref(isMo)) {
     const innerWidth = window.innerWidth;
     const pre = Math.ceil(innerWidth / 280);
     console.log("slidePreview", pre);
@@ -100,15 +87,15 @@ const handleClick = (item) => {
   emits("changeScene", item);
 };
 const toggleMenu = () => {
-    emits('toggleMenu')
+  emits('toggleMenu')
 }
 onMounted(() => {
   window.addEventListener("resize", handleWindowResize, false);
   handleWindowResize();
-  
+
 });
-watch(isMo,(val)=>{
-  if(val){
+watch(isMo, (val) => {
+  if (val) {
     handleWindowResize();
   }
 })
@@ -116,9 +103,8 @@ onUnmounted(() => {
   window.removeEventListener("resize", handleWindowResize, false);
 });
 
-const onSwiper = (swiper) => {
-  console.log('onSwiper',swiper);
-  swiper.value = swiper;
+const onSwiper = (swiperObj) => {
+  swiper.value = swiperObj;
 };
 const onSlideChange = () => {
   console.log("slide change");
@@ -137,15 +123,17 @@ const onSlideChange = () => {
   padding-left: 15px;
   box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
   transition: bottom 0.2s ease-in-out;
-//   .swiper-button {
-//     position: absolute;
-//     top: 60px;
-//     cursor: pointer;
-//   }
+
+  //   .swiper-button {
+  //     position: absolute;
+  //     top: 60px;
+  //     cursor: pointer;
+  //   }
   &.show:not(.isMo) {
     bottom: 0;
   }
-  .close{
+
+  .close {
     position: absolute;
     right: 5px;
     top: 4px;
@@ -174,6 +162,10 @@ const onSlideChange = () => {
     background: rgba(255, 255, 255, 0.9);
   }
 
+  .swiper-button {
+    color: rgba(255, 255, 255, 1);
+  }
+
   .swiper-slide {
     display: flex;
     flex-direction: column;
@@ -216,39 +208,50 @@ const onSlideChange = () => {
       }
     }
   }
+
   &.isMo {
     bottom: 0;
-    right:-100%;
-    height:100%;
-    width:203px;
-    left:initial;
+    right: -100%;
+    height: 100%;
+    width: 203px;
+    left: initial;
     transition: right 0.2s ease-in-out;
-    &.show{
-      right:0;
+
+    &.show {
+      right: 0;
     }
+
     background: rgba(1, 144, 64, 0.9);
-    &::before, &::after{
+
+    &::before,
+    &::after {
       background: none;
     }
-    .swiper-button{
-      display:none;
+
+    .swiper-button {
+      display: none;
     }
+
     .swiper {
-      height:100%;
+      height: 100%;
 
     }
-   
-    .swiper-slide{
-      .cover,.desc{
-        width:100%;
-        color:white;
-        }
-        .cover{
-          min-height:125px;
-        }
-        span.sub {
+
+    .swiper-slide {
+
+      .cover,
+      .desc {
+        width: 100%;
+        color: white;
+      }
+
+      .cover {
+        min-height: 125px;
+      }
+
+      span.sub {
         font-size: 12px;
-        line-height:clear
+        line-height: 24px;
         text-wrap: nowrap;
         font-weight: normal;
       }

src/components/RightMenu.vue.bk

@@ -0,0 +1,133 @@
+<template>
+    <Teleport to="body">
+        <ul class="right-menu">
+            <li class="item" @click="changeScene(homeLink)">
+                <img :src="homeICON" />
+                <span class="cap">{{ homeLink.zhName }}</span>
+                <span class="sub">{{ homeLink.enName }}</span>
+
+            </li>
+            <li class="item" @click="toggleMenu">
+                <img :src="selectionICON" />
+                <span class="cap">場景選擇</span>
+                <span class="sub">Scene selection</span>
+            </li>
+            <li class="item">
+                <a :href="official.url">
+                    <img :src="officialICON" />
+                    <span class="cap">{{ official.zhName }}</span>
+                    <span class="sub">{{ official.enName }}</span>
+                </a>
+            </li>
+        </ul>
+
+        <div class="mobile_close_cover" :class={isMo} @click="handleClose"></div>
+    </Teleport>
+
+
+</template>
+<script setup>
+import { Teleport, onMounted, inject, computed,ref } from 'vue';
+import homeICON from '../assets/home.png'
+import selectionICON from '../assets/scene_selection_n.png'
+import officialICON from '../assets/official_website.png'
+const data = inject('data');
+const open= ref(false);
+const isMo = inject("isMo");
+const emits = defineEmits(['toggleMenu', 'changeScene'])
+const homeLink = computed(() => Array.from(data.value).find(item => item.id === 'home'));
+const official = computed(() => Array.from(data.value).find(item => item.id === 'official_website'));
+
+const toggleMenu = () => {
+    open.value =!open.value
+    emits('toggleMenu',open.value)
+}
+const changeScene = (item) => {
+    emits('changeScene', item)
+}
+const handleClose=()=>{
+    open.value =false;
+    emits('toggleMenu',false)
+}
+</script>
+<style lang="scss" scoped>
+.mobile_close_cover{
+    display:none;
+}
+.right-menu {
+    right: 20px;
+    transform: translateY(-50%);
+    position: fixed;
+    top: 55%;
+    display: flex;
+    width: 75px;
+    flex-direction: column;
+    text-decoration: none;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+
+    .item {
+        width: 75px;
+        height: 75px;
+        text-decoration: none;
+        background-image: url('/src/assets/icon_bg.png');
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: 115% 115%;
+        color: white;
+        margin: 10px 0;
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.9;
+        a {
+            display: flex;
+            width: 100%;
+            height: 100%;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-decoration: none;
+            color: white;
+        }
+
+        img {
+            width: 24px;
+            margin-top: -4px;
+        }
+
+        span.cap {
+            font-size: 14px;
+        }
+
+        span.sub {
+            font-size: 9px;
+            line-height: 0.8;
+        }
+    }
+}
+.isMo {
+    .right-menu {
+        top:48%;
+        .item {
+            span.cap {
+            font-size: 13px;
+            }
+        }
+      
+    }
+    .mobile_close_cover {
+        width:100%;
+        height:100%;
+        position:fixed;
+        z-index:0;
+        display:block;
+    
+    }
+}
+
+</style>