slidev-theme-gtlabo 1.0.6 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/layouts/end.vue +86 -0
- package/package.json +1 -1
package/layouts/end.vue
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="slidev-layout thank-you relative overflow-hidden bg-gradient-to-tr from-sky-100 via-white to-sky-200">
|
|
3
|
+
<!-- 中央の大きな円形要素 -->
|
|
4
|
+
<div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-sky-200/50 rounded-full" />
|
|
5
|
+
<div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-sky-300/60 rounded-full" />
|
|
6
|
+
|
|
7
|
+
<!-- 左上の波形要素 -->
|
|
8
|
+
<div class="absolute left-0 top-0 w-96 h-96 overflow-hidden">
|
|
9
|
+
<div class="absolute -left-24 -top-24 w-80 h-80 bg-sky-400/40 rounded-full" />
|
|
10
|
+
<div class="absolute left-8 top-8 w-48 h-48 bg-sky-500/30 rounded-full" />
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<!-- 右下の幾何学的要素 -->
|
|
14
|
+
<div class="absolute right-0 bottom-0 w-80 h-80 overflow-hidden">
|
|
15
|
+
<div class="absolute right-16 bottom-16 w-32 h-32 bg-sky-400/50 transform rotate-45" />
|
|
16
|
+
<div class="absolute right-32 bottom-32 w-24 h-24 bg-sky-500/40 transform rotate-45" />
|
|
17
|
+
<div class="absolute right-8 bottom-8 w-16 h-16 bg-sky-600/50 transform rotate-45" />
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<!-- 左下のドット要素 -->
|
|
21
|
+
<div class="absolute left-8 bottom-8 grid grid-cols-4 gap-4 opacity-50">
|
|
22
|
+
<div class="w-4 h-4 bg-sky-500 rounded-full" />
|
|
23
|
+
<div class="w-4 h-4 bg-sky-600 rounded-full" />
|
|
24
|
+
<div class="w-4 h-4 bg-sky-500 rounded-full" />
|
|
25
|
+
<div class="w-4 h-4 bg-sky-600 rounded-full" />
|
|
26
|
+
<div class="w-4 h-4 bg-sky-600 rounded-full" />
|
|
27
|
+
<div class="w-4 h-4 bg-sky-500 rounded-full" />
|
|
28
|
+
<div class="w-4 h-4 bg-sky-600 rounded-full" />
|
|
29
|
+
<div class="w-4 h-4 bg-sky-500 rounded-full" />
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<!-- 右上の線形要素 -->
|
|
33
|
+
<div class="absolute right-8 top-8 transform rotate-12 space-y-3 opacity-60">
|
|
34
|
+
<div class="w-32 h-2 rounded-full bg-sky-500/70" />
|
|
35
|
+
<div class="w-24 h-2 rounded-full bg-sky-600/70" />
|
|
36
|
+
<div class="w-40 h-2 rounded-full bg-sky-500/70" />
|
|
37
|
+
<div class="w-28 h-2 rounded-full bg-sky-600/70" />
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<!-- メインコンテンツ -->
|
|
41
|
+
<div class="relative z-10 flex flex-col justify-center items-center h-full px-8">
|
|
42
|
+
<div class="text-center space-y-8">
|
|
43
|
+
<!-- メインメッセージ -->
|
|
44
|
+
<div class="text-5xl font-bold text-slate-800 leading-tight tracking-wide">
|
|
45
|
+
ご清聴ありがとうございました
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<!-- サブメッセージ（オプション） -->
|
|
49
|
+
<div class="mt-12 text-2xl font-medium text-slate-600">
|
|
50
|
+
{{ $slidev.configs.thankYouMessage || 'Thank you for your attention' }}
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<!-- 連絡先情報（オプション） -->
|
|
54
|
+
<div class="mt-8 text-lg text-slate-600 space-y-2" v-if="$slidev.configs.contact">
|
|
55
|
+
<div v-if="$slidev.configs.contact.email">
|
|
56
|
+
<lucide-mail class="inline-block w-5 h-5 mr-1" />
|
|
57
|
+
{{ $slidev.configs.contact.email }}
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<!-- 右下の著者情報 -->
|
|
64
|
+
<div class="absolute bottom-6 right-8 text-right text-slate-700">
|
|
65
|
+
<div class="text-lg font-semibold">
|
|
66
|
+
{{ $slidev.configs.author.name }}
|
|
67
|
+
</div>
|
|
68
|
+
<div class="text-base font-medium">
|
|
69
|
+
{{ $slidev.configs.author.affiliation }}
|
|
70
|
+
</div>
|
|
71
|
+
<div class="text-sm">
|
|
72
|
+
{{ $slidev.configs.date }}
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</template>
|
|
77
|
+
|
|
78
|
+
<script setup>
|
|
79
|
+
// 必要に応じてロジックを追加
|
|
80
|
+
</script>
|
|
81
|
+
|
|
82
|
+
<style scoped>
|
|
83
|
+
.thank-you {
|
|
84
|
+
font-family: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
|
|
85
|
+
}
|
|
86
|
+
</style>
|