xihuaDesign/src/views/website/home/components/Banner.tsx

import { css } from "@linaria/core";
import { defineComponent, reactive, ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay } from "swiper";
import "swiper/css";
export default defineComponent({
  setup() {
    const state = reactive({
      active: 0,
    });
    const swiperRef = ref();
    const images = [
      {
        url: getImageUrl("banner/banner.png"),
      },
      {
        url: getImageUrl("banner/banner.png"),
      },
    ];
    const initSwiper = (swiper: any) => {
      swiperRef.value = swiper;
    };
    return () => (
      <div class={page}>
        <Swiper
          class={"banner_swiper"}
          modules={[Autoplay]}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
          loop={true}
          onSwiper={initSwiper}
          onSlideChange={(e) => {
            state.active = e.realIndex;
          }}
        >
          {images.map((e) => {
            return (
              <SwiperSlide>
                <img src={e.url} />
              </SwiperSlide>
            );
          })}
        </Swiper>
        <div class={"swiper_prev"}>
          <img
            src={getImageUrl("botton_prev.png")}
            onClick={() => {
              swiperRef.value.slidePrev();
            }}
          />
        </div>
        <div class={"swiper_next"}>
          <img
            src={getImageUrl("botton_next.png")}
            onClick={() => {
              swiperRef.value.slideNext();
            }}
          />
        </div>
        <div class={"swiper_pagination"}>
          {images.length > 0 && (
            <div class={"page_dots_box"}>
              {images.map((_, i) => {
                return (
                  <div
                    class={["page_dot", state.active == i ? "active" : null]}
                    onClick={() => {
                      swiperRef.value.slideTo(i);
                    }}
                  ></div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    );
  },
});
const page = css`
  position: relative;
  width: 100%;
  height: 600px;
  max-height: 600px;
  .banner_swiper {
    height: 100%;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      user-select: none;
    }
  }
  .swiper_prev,
  .swiper_next {
    position: absolute;
    top: 0;
    width: 66px;
    height: 100%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    &:hover {
      img {
        opacity: 1;
      }
    }
    img {
      width: 66px;
      height: 66px;
      object-fit: contain;
      opacity: 0;
      transition: all 0.3s ease-in-out;
      cursor: pointer;
      user-select: none;
    }
  }
  .swiper_prev {
    left: 0;
  }
  .swiper_next {
    right: 0;
  }
  .swiper_pagination {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    z-index: 2;
    text-align: center;
    .page_dots_box {
      display: inline-block;
      padding: 6px 9px;
      border-radius: 30px;
      font-size: 0;
      background-color: rgba(0, 0, 0, 0.56);
      .page_dot {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0 4px;
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0.6);
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        &.active {
          width: 24px;
          background-color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
`;