SummerCampCard.vue
1.75 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
<template>
<div class="relative overflow-hidden rounded-b-3xl shadow-lg">
<!-- Background image with overlay -->
<div
class="absolute inset-0 z-0 bg-cover bg-center"
:style="{
backgroundImage: `url('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">{{ badge }}</div>
</div>
<h1 class="text-2xl text-white font-bold mb-1">{{ title }}</h1>
<h2 class="text-lg text-white/90">{{ subtitle }}</h2>
<div class="mt-4 flex justify-between items-center">
<div class="text-orange-300 font-bold text-2xl">{{ price }}</div>
<div class="bg-orange-500/30 text-orange-100 text-xs px-3 py-1 rounded-full">{{ discount }}</div>
</div>
<div class="flex justify-between text-xs text-white/80 mt-3">
<div>已更新{{ episodes }}期</div>
<div>{{ subscribers }}人订阅</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps } from 'vue'
defineProps({
title: {
type: String,
default: '大国少年-世界正东方'
},
subtitle: {
type: String,
default: '亲子夏令营'
},
badge: {
type: String,
default: '亲子夏令营'
},
price: {
type: String,
default: '¥1280'
},
discount: {
type: String,
default: '限时优惠'
},
episodes: {
type: Number,
default: 16
},
subscribers: {
type: Number,
default: 1140
}
})
</script>