|
|
@@ -0,0 +1,153 @@
|
|
|
+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((e, 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%;
|
|
|
+ max-height: 800px;
|
|
|
+ .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.2s ease-in-out;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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.2s ease-in-out;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active {
|
|
|
+ width: 24px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+`;
|
