hk-school/src/components/NavigationBar.vue

<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>
    <!-- </template> -->

  </div>
</template>


<script setup>
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/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);
const imagePath = ref(import.meta.env.VITE_COVER_DIR);

defineProps({
  show: {
    type: Boolean,
    default: () => false,
  },
});

const lists = computed(() =>
  Array.from(data.value).filter((item) => item.type === "scene")
);
const modules = [Navigation]
const slidePreview = ref(5);

// const navigation = ref({
//   nextEl: ".swiper-button-next",
//   prevEl: ".swiper-button-prev ",
// //   hideOnClick: true,
// });
const handleWindowResize = () => {
  // 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);
};
const toggleMenu = () => {
  emits('toggleMenu')
}
onMounted(() => {
  window.addEventListener("resize", handleWindowResize, false);
  handleWindowResize();

});
watch(isMo, (val) => {
  if (val) {
    handleWindowResize();
  }
})
onUnmounted(() => {
  window.removeEventListener("resize", handleWindowResize, false);
});

const onSwiper = (swiperObj) => {
  swiper.value = swiperObj;
};
const onSlideChange = () => {
  console.log("slide change");
};
</script>

<style scoped lang="scss">
.bar {
  position: fixed;
  z-index: 10;
  bottom: -100%;
  left: 0;
  width: calc(100% - 30px);
  height: 206px;
  padding-right: 15px;
  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;
  //   }
  &.show:not(.isMo) {
    bottom: 0;
  }

  .close {
    position: absolute;
    right: 5px;
    top: 4px;
    width: 18px;
    cursor: pointer;
    z-index: 10;
  }

  &::before {
    content: " ";
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 146px;
    background: rgba(1, 144, 64, 0.9);
  }

  &::after {
    content: " ";
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
    background: rgba(255, 255, 255, 1);
  }

  .swiper-button {
    color: rgba(255, 255, 255, 1);
    top:40%;
  }

  .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;

    .cover {
      width: 230px;
      height: 117px;
      margin-top: 20px;
      margin-bottom: 10px;
      overflow: hidden;
      border-radius: 5px;

      img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }
    }

    .desc {
      width: 230px;
      height: 60px;
      color: black;
      text-align: left;
      display: flex;
      flex-direction: column;

      span.cap {
        font-size: 16px;
        font-weight: bold;
        margin-top: 5px;
      }

      span.sub {
        font-size: 13px;
        text-wrap: nowrap;
        font-weight: normal;
      }
    }
  }

  &.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>