health.admin/src/components/Swiper.vue

<script setup lang="ts">
// 引入swiper组件
import { Swiper, SwiperSlide } from 'swiper/vue';
// 引入swiper样式（按需导入）
import 'swiper/css';
import 'swiper/css/pagination'; // 轮播图底面的小圆点
import 'swiper/css/navigation'; // 轮播图两边的左右箭头
import 'swiper/css/scrollbar'; // 轮播图的滚动条
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper';

type ImageItem = { image: string; date?: string };

const modules = [Autoplay, Pagination, Navigation, Scrollbar];
const props = defineProps<{ images: ImageItem[] }>();
const slidesPerView = computed(() => {
  const count = Array.isArray(props.images) ? props.images.length : 0;
  return Math.min(count || 1, 3);
});

</script>
<template>
  <div class="home">
    <swiper
      :modules="modules"
      :loop="true"
      :slides-per-view="slidesPerView"
      :autoplay="{ delay: 4000, disableOnInteraction: false }"
      navigation
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
    >
      <!-- loop可循环轮播，autoplay可自动播放 -->
      <swiper-slide v-for="img in props.images" :key="img.date || img.image">
        <div>
          <span>{{ img?.date }}</span>
          <div>
            <a-image :src="img?.image" style="width: 200px; height: 290px" />
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<style scoped lang="scss">
.home {
  .swiper-slide {
    //background-color: #bfc;
    height: 200px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    transform: translateY(-50%);
  }
}

.pc-banner {
  position: relative;

  .swiper-container {
    width: 90%;
  }

  .button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;

    .swiper-button-next {
      color: black;
    }
  }
}

@media only screen and (min-width: 1200px) {
  .main {
    //background: springgreen;
  }
}

/*最大的宽度是1200px，小于1200px都适用于这里*/
@media only screen and (max-width: 960px) {
  .main {
    width: 100%;
  }
}

/*
       大于min-width的宽度，小于max-width宽度
       * */
@media only screen and (min-width: 960px) and (max-width: 1200px) {
  .main {
    width: 100%;
  }
}

.swiper-slide {
  -webkit-transition: transform 1s;
  -moz-transition: transform 1s;
  -ms-transition: transform 1s;
  -o-transition: transform 1s;
  // -webkit-transform: scale(0.7);
  // transform: scale(0.7);
}

.swiper-slide-active {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.none-effect {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
}

.swiper-slide {
  img {
    width: 100%;
    display: block;
  }
}

.button {
  width: 100%;
  margin: auto;
  position: relative;
  top: 25%;
}

@media screen and (max-width: 750px) {
  .button {
    width: 100%;
  }
}

.swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
    #c9c9ca center 50%/50% 50% no-repeat;
}

.swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
    #c9c9ca center 50%/50% 50% no-repeat;
}

@media screen and (max-width: 750px) {
  .button div {
    width: 28px;
    height: 28px;
  }
}
</style>