SummerCampCard.vue
3.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<template>
<div class="relative overflow-hidden rounded-b-3xl shadow-lg">
<div class="swiper-container relative" ref="swiperRef">
<div class="swiper-wrapper">
<div v-for="(item, index) in items" :key="index" class="swiper-slide">
<!-- Background image with overlay -->
<div
class="absolute inset-0 z-0 bg-cover bg-center"
:style="{
backgroundImage: `url(${item.imageUrl || 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg'})`,
filter: 'brightness(0.4)'
}"
></div>
<!-- Gradient overlay -->
<div class="absolute inset-0 z-1 bg-gradient-to-b from-red-500/70 to-red-600/90"></div>
<!-- Content -->
<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="text-white font-semibold">{{ item.badge }}</div>
</div>
<h1 class="text-2xl text-white font-bold mb-1">{{ item.title }}</h1>
<h2 class="text-lg text-white/90">{{ item.subtitle }}</h2>
<div class="mt-4 flex justify-between items-center">
<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">{{ item.discount }}</div>
</div>
<div class="flex justify-between text-xs text-white/80 mt-3">
<div>已更新{{ item.episodes }}期</div>
<div>{{ item.subscribers }}人订阅</div>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</template>
<script setup>
import { defineProps, onMounted, ref } from 'vue'
import Swiper from 'swiper'
import { Pagination, EffectCards } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/effect-cards'
const props = defineProps({
items: {
type: Array,
default: () => [{
title: '大国少年-世界正东方',
subtitle: '亲子夏令营',
badge: '亲子夏令营',
price: '¥1280',
discount: '限时优惠',
episodes: 16,
subscribers: 1140,
imageUrl: 'https://cdn.ipadbiz.cn/mlaj/images/summer-camp.jpg'
}]
}
})
const swiperRef = ref(null)
onMounted(() => {
new Swiper(swiperRef.value, {
modules: [Pagination, EffectCards],
effect: 'creative',
creativeEffect: {
prev: {
translate: ['-100%', 0, 0],
opacity: 0
},
next: {
translate: ['100%', 0, 0],
opacity: 0
}
},
speed: 600,
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>