feat(banner): add banner feature

spa/src/components/Banner.vue

@@ -0,0 +1,60 @@
+<template>
+  <div v-if="slides.length > 0" class="app-banner px-4">
+    <Swiper
+        class="select-none"
+        :slides-per-view="1"
+        :space-between="50"
+        pagination
+        :pagination="{ clickable: true }"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+    >
+      <SwiperSlide v-for="slide in slides" :key="slide.id">
+        <img :src="slide.image" :alt="slide.title">
+      </SwiperSlide>
+    </Swiper>
+  </div>
+</template>
+
+<script setup>
+import {Swiper, SwiperSlide} from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import {onMounted, ref} from "vue";
+import {fetchBanner} from "@/utils/ftch.js";
+
+const slides = ref([]);
+
+const onSwiper = (swiper) => {
+  console.log(swiper);
+};
+const onSlideChange = () => {
+  console.log('slide change');
+};
+
+onMounted(async () => {
+  const response = await fetchBanner();
+  slides.value = response.data;
+})
+</script>
+
+<style>
+.app-banner {
+  overflow: hidden;
+}
+
+.app-banner .swiper-horizontal > .swiper-pagination-bullets {
+  position: relative;
+  bottom: 0;
+}
+
+.app-banner .swiper-horizontal .swiper-slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.app-banner .swiper-horizontal .swiper-slide > img {
+  border-radius: var(--radius-box);
+}
+</style>