core

pnpm-lock.yaml

@@ -22,12 +22,15 @@ devDependencies:
   autoprefixer:
     specifier: ^10.4.19
     version: 10.4.19(postcss@8.4.38)
+  less:
+    specifier: ^4.2.0
+    version: 4.2.0
   sass:
     specifier: ^1.75.0
     version: 1.75.0
   vite:
     specifier: ^5.2.0
-    version: 5.2.10(sass@1.75.0)
+    version: 5.2.10(less@4.2.0)(sass@1.75.0)
 
 packages:
 
@@ -403,7 +406,7 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.2.10(sass@1.75.0)
+      vite: 5.2.10(less@4.2.0)(sass@1.75.0)
       vue: 3.4.23
     dev: true
 
@@ -537,6 +540,12 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /copy-anything@2.0.6:
+    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+    dependencies:
+      is-what: 3.14.1
+    dev: true
+
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -548,6 +557,15 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  /errno@0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      prr: 1.0.1
+    dev: true
+    optional: true
+
   /esbuild@0.20.2:
     resolution: {integrity: sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==}
     engines: {node: '>=12'}
@@ -613,6 +631,29 @@ packages:
       is-glob: 4.0.3
     dev: true
 
+  /graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+    requiresBuild: true
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: true
+    optional: true
+
+  /image-size@0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /immutable@4.3.5:
     resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
     dev: true
@@ -641,11 +682,51 @@ packages:
     engines: {node: '>=0.12.0'}
     dev: true
 
+  /is-what@3.14.1:
+    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+    dev: true
+
+  /less@4.2.0:
+    resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      copy-anything: 2.0.6
+      parse-node-version: 1.0.1
+      tslib: 2.6.2
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.11
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      needle: 3.3.1
+      source-map: 0.6.1
+    dev: true
+
   /magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /make-dir@2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.2
+    dev: true
+    optional: true
+
+  /mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /mobile-detect@1.4.5:
     resolution: {integrity: sha512-yc0LhH6tItlvfLBugVUEtgawwFU2sIe+cSdmRJJCTMZ5GEJyLxNyC/NIOAOGk67Fa8GNpOttO3Xz/1bHpXFD/g==}
     dev: false
@@ -655,6 +736,17 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /needle@3.3.1:
+    resolution: {integrity: sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      iconv-lite: 0.6.3
+      sax: 1.3.0
+    dev: true
+    optional: true
+
   /node-releases@2.0.14:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
     dev: true
@@ -669,6 +761,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /parse-node-version@1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -677,6 +774,13 @@ packages:
     engines: {node: '>=8.6'}
     dev: true
 
+  /pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
@@ -689,6 +793,12 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.2.0
 
+  /prr@1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -722,6 +832,12 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /sass@1.75.0:
     resolution: {integrity: sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==}
     engines: {node: '>=14.0.0'}
@@ -732,10 +848,30 @@ packages:
       source-map-js: 1.2.0
     dev: true
 
+  /sax@1.3.0:
+    resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
 
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /swiper@11.1.1:
     resolution: {integrity: sha512-jGmEA/fNz1lACIcY4/40ggm1Gcyv+EUivmgV/Jd2WFPsEJhbWXnRAwzZR8OPjkBLtDxmzcoYG/iiAMWfRs0YKQ==}
     engines: {node: '>= 4.7.0'}
@@ -752,6 +888,10 @@ packages:
       is-number: 7.0.0
     dev: true
 
+  /tslib@2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+    dev: true
+
   /update-browserslist-db@1.0.13(browserslist@4.23.0):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
@@ -763,7 +903,7 @@ packages:
       picocolors: 1.0.0
     dev: true
 
-  /vite@5.2.10(sass@1.75.0):
+  /vite@5.2.10(less@4.2.0)(sass@1.75.0):
     resolution: {integrity: sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -792,6 +932,7 @@ packages:
         optional: true
     dependencies:
       esbuild: 0.20.2
+      less: 4.2.0
       postcss: 8.4.38
       rollup: 4.16.1
       sass: 1.75.0

src/App.vue

@@ -1,8 +1,8 @@
 <template>
-  <template v-if="isMo">
+  <!-- <template v-if="isMo">
     <NoMobile />
-  </template>
-  <div v-else>
+  </template> -->
+  <div >
     <Logo :id="currentSceneId" />
     <RightMenu @toggle-menu="handleNavi" @change-scene="handleChangeScene" />
     <Container :url="currentScene"></Container>
@@ -15,7 +15,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 NoMobile from './components/Nomobile.vue';
+// import NoMobile from './components/Nomobile.vue';
 import MobileDetect from 'mobile-detect';
 
 import config from './config.json'
@@ -24,7 +24,7 @@ const isMo = ref(false)
 const md = new MobileDetect(window.navigator.userAgent);
 data.value = config
 provide('data', data)
-
+provide('isMo', isMo)
 const navi = ref(false)
 const currentScene = ref('')
 const currentSceneId = ref('home')
@@ -39,7 +39,7 @@ onMounted(() => {
     console.log('isMo')
     isMo.value = true
    document.body.classList.add('isMo')
-    return
+    // return
   }
 
   const scenes = Array.from(data.value).find(item => item.id === 'home');

src/components/NavigationBar.vue

@@ -1,14 +1,18 @@
 <template>
-  <div class="bar" :class="{ show }">
+  <div class="bar" :class="{ show,isMo }">
     <img class="close" :src="closeICON" @click="toggleMenu" />
-    <Swiper
+
+    <!-- <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"
-      :pagination="{ el: '.pagination', type: 'bullets' }"
       :grabCursor="true"
       :space-between="0"
       :freeMode="true"
@@ -35,21 +39,24 @@
       class="swiper-button swiper-button-prev"
     >
     </div>
+    <!-- </template> -->
+    
   </div>
 </template>
 
 
 <script setup>
-import { ref, inject, computed } from "vue";
+import { ref, inject, computed, unref, watch } from "vue";
 import { Swiper, SwiperSlide, useSwiper } from "swiper/vue";
 import { Navigation } from 'swiper/modules';
 import closeICON from '../assets/cloes.png'
 import 'swiper/less/navigation';
-import 'swiper/less/pagination';
+
 import "swiper/css";
 import { onMounted, onUnmounted } from "vue";
 
 const data = inject("data");
+const isMo = inject("isMo");
 const emits = defineEmits(["changeScene","toggleMenu"]);
 const swiper = ref(null);
 console.log("useSwiper", swiper, useSwiper);
@@ -67,16 +74,27 @@ const lists = computed(() =>
 );
 const modules = [Navigation]
 const slidePreview = ref(5);
+
 const navigation = ref({
   nextEl: ".swiper-button-next",
   prevEl: ".swiper-button-prev ",
 //   hideOnClick: true,
 });
 const handleWindowResize = () => {
-  const innerWidth = window.innerWidth;
-  const pre = Math.ceil(innerWidth / 280);
-  console.log("slidePreview", pre);
-  slidePreview.value = pre;
+  console.log('isMo',isMo)
+  if(!unref(isMo)){
+    const innerWidth = window.innerWidth;
+    const pre = Math.ceil(innerWidth / 280);
+    console.log("slidePreview", pre);
+    slidePreview.value = pre;
+  } else {
+    const innerHeight = window.innerHeight;
+    const pre = Math.ceil(innerHeight / 270);
+    console.log("slidePreview", pre);
+    slidePreview.value = pre;
+
+  }
+
 };
 const handleClick = (item) => {
   emits("changeScene", item);
@@ -87,7 +105,13 @@ const toggleMenu = () => {
 onMounted(() => {
   window.addEventListener("resize", handleWindowResize, false);
   handleWindowResize();
+  
 });
+watch(isMo,(val)=>{
+  if(val){
+    handleWindowResize();
+  }
+})
 onUnmounted(() => {
   window.removeEventListener("resize", handleWindowResize, false);
 });
@@ -118,7 +142,7 @@ const onSlideChange = () => {
 //     top: 60px;
 //     cursor: pointer;
 //   }
-  &.show {
+  &.show:not(.isMo) {
     bottom: 0;
   }
   .close{
@@ -192,5 +216,44 @@ const onSlideChange = () => {
       }
     }
   }
+  &.isMo {
+    bottom: 0;
+    right:-100%;
+    height:100%;
+    width:203px;
+    left:initial;
+    transition: right 0.2s ease-in-out;
+    &.show{
+      right:0;
+    }
+    background: rgba(1, 144, 64, 0.9);
+    &::before, &::after{
+      background: none;
+    }
+    .swiper-button{
+      display:none;
+    }
+    .swiper {
+      height:100%;
+
+    }
+   
+    .swiper-slide{
+      .cover,.desc{
+        width:100%;
+        color:white;
+        }
+        .cover{
+          min-height:125px;
+        }
+        span.sub {
+        font-size: 12px;
+        line-height:24px;
+        text-wrap: nowrap;
+        font-weight: normal;
+      }
+    }
+
+  }
 }
 </style>

src/components/RightMenu.vue

@@ -49,13 +49,14 @@ const changeScene = (item) => {
     position: fixed;
     top: 55%;
     display: flex;
-    width: 100px;
+    width: 75px;
     flex-direction: column;
     text-decoration: none;
     padding: 0;
     margin: 0;
     list-style: none;
 
+
     .item {
         width: 75px;
         height: 75px;
@@ -63,6 +64,7 @@ const changeScene = (item) => {
         background-image: url('/src/assets/icon_bg.png');
         background-position: center center;
         background-repeat: no-repeat;
+        background-size: 110% 110%;
         color: white;
         margin: 10px 0;
         cursor: pointer;
@@ -83,7 +85,7 @@ const changeScene = (item) => {
         }
 
         img {
-            width: 32px;
+            width: 24px;
             margin-top: -4px;
         }
 
@@ -92,9 +94,20 @@ const changeScene = (item) => {
         }
 
         span.sub {
-            font-size: 10px;
+            font-size: 9px;
             line-height: 0.8;
         }
     }
 }
+.isMo{
+    .right-menu {
+        top:45%;
+        .item {
+            span.cap {
+            font-size: 13px;
+        }
+        }
+      
+    }
+}
 </style>