feat(SummerCampCard): 添加轮播功能并更新数据传递方式

为 SummerCampCard 组件添加 Swiper 轮播功能，支持多张图片切换。同时，将静态数据改为通过 props 传递，提高组件的灵活性和复用性。

feat(SummerCampCard): 添加轮播功能并更新数据传递方式
为 SummerCampCard 组件添加 Swiper 轮播功能，支持多张图片切换。同时，将静态数据改为通过 props 传递，提高组件的灵活性和复用性。
hookehuyr
Commit 0636af95ff510d90746741596af86b334027aa2c 0636af95 1 parent d445153f
Showing 4 changed files with 145 additions and 60 deletions
package-lock.json
package.json
src/components/ui/SummerCampCard.vue
src/views/HomePage.vue
--- a/package-lock.json
View file @0636af9
+++ b/package-lock.json
View file @0636af9
@@ -10,6 +10,7 @@
       "dependencies": {
         "@vant/use": "^1.6.0",
         "dayjs": "^1.11.13",
+        "swiper": "^11.2.6",
         "vant": "^4.9.18",
         "vconsole": "^3.15.1",
         "vue": "^3.5.13",
@@ -3342,6 +3343,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.6.tgz",
+      "integrity": "sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
--- a/package.json
View file @0636af9
+++ b/package.json
View file @0636af9
@@ -11,6 +11,7 @@
   "dependencies": {
     "@vant/use": "^1.6.0",
     "dayjs": "^1.11.13",
+    "swiper": "^11.2.6",
     "vant": "^4.9.18",
     "vconsole": "^3.15.1",
     "vue": "^3.5.13",
--- a/src/components/ui/SummerCampCard.vue
View file @0636af9
+++ b/src/components/ui/SummerCampCard.vue
View file @0636af9
 <template>
   <div class="relative overflow-hidden rounded-b-3xl shadow-lg">
-    <!-- Background image with overlay -->
+    <div class="swiper-container relative" ref="swiperRef">
-    <div
+      <div class="swiper-wrapper">
-      class="absolute inset-0 z-0 bg-cover bg-center"
+        <div v-for="(item, index) in items" :key="index" class="swiper-slide">
-      :style="{
+          <!-- Background image with overlay -->
-        backgroundImage: `url('https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg')`,
+          <div
-        filter: 'brightness(0.4)'
+            class="absolute inset-0 z-0 bg-cover bg-center"
-      }"
+            :style="{
-    ></div>
+              backgroundImage: `url(${item.imageUrl || 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg'})`,
+              filter: 'brightness(0.4)'
+            }"
+          ></div>
-    <!-- Gradient overlay -->
+          <!-- Gradient overlay -->
-    <div class="absolute inset-0 z-1 bg-gradient-to-b from-red-500/70 to-red-600/90"></div>
+          <div class="absolute inset-0 z-1 bg-gradient-to-b from-red-500/70 to-red-600/90"></div>
-    <!-- Content -->
+          <!-- Content -->
-    <div class="relative z-10 p-4">
+          <div class="relative z-10 p-4">
-      <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3 mb-3 inline-block">
+            <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3 mb-3 inline-block">
-        <div class="text-white font-semibold">{{ badge }}</div>
+              <div class="text-white font-semibold">{{ item.badge }}</div>
-      </div>
+            </div>
-      <h1 class="text-2xl text-white font-bold mb-1">{{ title }}</h1>
+            <h1 class="text-2xl text-white font-bold mb-1">{{ item.title }}</h1>
-      <h2 class="text-lg text-white/90">{{ subtitle }}</h2>
+            <h2 class="text-lg text-white/90">{{ item.subtitle }}</h2>
-      <div class="mt-4 flex justify-between items-center">
+            <div class="mt-4 flex justify-between items-center">
-        <div class="text-orange-300 font-bold text-2xl">{{ price }}</div>
+              <div class="text-orange-300 font-bold text-2xl">{{ item.price }}</div>
-        <div class="bg-orange-500/30 text-orange-100 text-xs px-3 py-1 rounded-full">{{ discount }}</div>
+              <div class="bg-orange-500/30 text-orange-100 text-xs px-3 py-1 rounded-full">{{ item.discount }}</div>
-      </div>
+            </div>
-      <div class="flex justify-between text-xs text-white/80 mt-3">
+            <div class="flex justify-between text-xs text-white/80 mt-3">
-        <div>已更新{{ episodes }}期</div>
+              <div>已更新{{ item.episodes }}期</div>
-        <div>{{ subscribers }}人订阅</div>
+              <div>{{ item.subscribers }}人订阅</div>
+            </div>
+          </div>
+        </div>
       </div>
+      <!-- Pagination -->
+      <div class="swiper-pagination"></div>
     </div>
   </div>
 </template>
 <script setup>
-import { defineProps } from 'vue'
+import { defineProps, onMounted, ref } from 'vue'
+import Swiper from 'swiper'
+import { Pagination } from 'swiper/modules'
+import 'swiper/css'
+import 'swiper/css/pagination'
-defineProps({
+const props = defineProps({
-  title: {
+  items: {
-    type: String,
+    type: Array,
-    default: '大国少年-世界正东方'
+    default: () => [{
-  },
+      title: '大国少年-世界正东方',
-  subtitle: {
+      subtitle: '亲子夏令营',
-    type: String,
+      badge: '亲子夏令营',
-    default: '亲子夏令营'
+      price: '¥1280',
-  },
+      discount: '限时优惠',
-  badge: {
+      episodes: 16,
-    type: String,
+      subscribers: 1140,
-    default: '亲子夏令营'
+      imageUrl: 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg'
-  },
+    }]
-  price: {
-    type: String,
-    default: '¥1280'
-  },
-  discount: {
-    type: String,
-    default: '限时优惠'
-  },
-  episodes: {
-    type: Number,
-    default: 16
-  },
-  subscribers: {
-    type: Number,
-    default: 1140
   }
 })
+
+const swiperRef = ref(null)
+
+onMounted(() => {
+  new Swiper(swiperRef.value, {
+    modules: [Pagination],
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true
+    },
+    loop: true
+  })
+})
 </script>
+
+<style scoped>
+.swiper-container {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide {
+  height: auto;
+}
+
+.swiper-pagination {
+  bottom: 10px !important;
+}
+
+.swiper-pagination-bullet {
+  background: white !important;
+  opacity: 0.5;
+}
+
+.swiper-pagination-bullet-active {
+  opacity: 1;
+}
+</style>
--- a/src/views/HomePage.vue
View file @0636af9
+++ b/src/views/HomePage.vue
View file @0636af9
 <!--
  * @Date: 2025-03-20 19:55:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-20 23:13:20
+ * @LastEditTime: 2025-03-21 09:35:57
  * @FilePath: /mlaj/src/views/HomePage.vue
  * @Description: 文件描述
 -->
@@ -25,13 +25,13 @@
                 <p class="text-sm text-gray-500">{{ formatToday() }}</p>
               </div>
             </div>
-            <div class="flex items-center text-sm">
+            <!-- <div class="flex items-center text-sm">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
               </svg>
               <span class="ml-1 font-medium">23°C</span>
               <span class="ml-1 text-gray-500">晴朗</span>
-            </div>
+            </div> -->
           </div>
           <!-- User Stats -->
@@ -40,14 +40,14 @@
               <div class="text-lg font-bold">3</div>
               <div class="text-xs text-gray-500">连续打卡</div>
             </div>
-            <div class="border-r border-gray-200 flex-1">
+            <div class="border-gray-200 flex-1">
               <div class="text-lg font-bold">12</div>
               <div class="text-xs text-gray-500">已学课程</div>
             </div>
-            <div class="flex-1">
+            <!-- <div class="flex-1">
               <div class="text-lg font-bold">25</div>
               <div class="text-xs text-gray-500">积分</div>
-            </div>
+            </div> -->
           </div>
         </FrostedGlass>
@@ -127,7 +127,38 @@
       <!-- Summer Camp Promotion -->
       <div class="px-4 mb-6">
-        <SummerCampCard />
+        <SummerCampCard :items="[
+          {
+            title: '大国少年-世界正东方',
+            subtitle: '亲子夏令营',
+            badge: '亲子夏令营',
+            price: '¥1280',
+            discount: '限时优惠',
+            episodes: 16,
+            subscribers: 1140,
+            imageUrl: 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg'
+          },
+          {
+            title: '暑期特训营',
+            subtitle: '提升学习能力',
+            badge: '特训营',
+            price: '¥1580',
+            discount: '早鸟优惠',
+            episodes: 20,
+            subscribers: 980,
+            imageUrl: 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp-2.jpg'
+          },
+          {
+            title: '艺术创想营',
+            subtitle: '激发创造力',
+            badge: '艺术营',
+            price: '¥1380',
+            discount: '新课优惠',
+            episodes: 12,
+            subscribers: 760,
+            imageUrl: 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp-3.jpg'
+          }
+        ]" />
       </div>
       <!-- Featured Courses Carousel -->