banner

package.json

@@ -21,6 +21,7 @@
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
     "rollup-plugin-css-only": "^4.3.0",
+    "swiper": "^9.2.4",
     "unplugin-vue-components": "^0.24.1",
     "vite-plugin-windicss": "^1.8.10",
     "vue": "^3.2.47",

src/styles/main.css

@@ -3,6 +3,7 @@
 #app {
   width: 100%;
   height: 100%;
+  background-color: #f5f5f5;
 }
 
 .global-w {

src/views/home/components/Banner.tsx

@@ -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);
+        }
+      }
+    }
+  }
+`;

src/views/home/index.tsx

@@ -1,9 +1,15 @@
 import { css } from "@linaria/core";
 import { defineComponent } from "vue";
+import Banner from "./components/Banner";
 
 export default defineComponent(() => {
-  return () => <div class={page}>1111111</div>;
+  return () => (
+    <div class={page}>
+      <Banner />
+    </div>
+  );
 });
 const page = css`
   height: 100%;
+
 `;

yarn.lock

@@ -2500,6 +2500,11 @@ sourcemap-codec@^1.4.8:
   resolved "http://124.70.149.18:4873/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
+ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "http://124.70.149.18:4873/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 stylis@^3.5.4:
   version "3.5.4"
   resolved "http://124.70.149.18:4873/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
@@ -2522,6 +2527,13 @@ svg-tags@^1.0.0:
   resolved "http://124.70.149.18:4873/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
+swiper@^9.2.4:
+  version "9.2.4"
+  resolved "http://124.70.149.18:4873/swiper/-/swiper-9.2.4.tgz#2fa3cf58cef586366f674a10fa56fe6eec2026fe"
+  integrity sha512-L7y3K/iiMXNYQ94FbfcJn7jex4QPnS4+voXGupTdC+UHW4XrR40QDdm4c9hXJ+Br0Il7PP0vP1W3goM9/Ly6Sg==
+  dependencies:
+    ssr-window "^4.0.2"
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "http://124.70.149.18:4873/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"