AzuTear
33 lines
2.1 KiB
Vue
33 lines
2.1 KiB
Vue
<template>
|
|
<section style="border-top:1px solid var(--line,rgba(255,255,255,.12));border-bottom:1px solid var(--line,rgba(255,255,255,.12));background:var(--bg2,#1f0f33);">
|
|
<div style="max-width:1100px;margin:0 auto;padding:34px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;" data-stats>
|
|
<div>
|
|
<div style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:38px;line-height:1;background:linear-gradient(135deg,var(--accent,#ff5fa2),var(--accent2,#a06bff));-webkit-background-clip:text;background-clip:text;color:transparent;">{{ statOneValue }}</div>
|
|
<div style="font-size:14px;color:var(--muted,#c9b8da);margin-top:6px;">{{ statOneLabel }}</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:38px;line-height:1;background:linear-gradient(135deg,var(--accent,#ff5fa2),var(--accent2,#a06bff));-webkit-background-clip:text;background-clip:text;color:transparent;">{{ statTwoValue }}</div>
|
|
<div style="font-size:14px;color:var(--muted,#c9b8da);margin-top:6px;">Kategorien</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:38px;line-height:1;background:linear-gradient(135deg,var(--accent,#ff5fa2),var(--accent2,#a06bff));-webkit-background-clip:text;background-clip:text;color:transparent;">{{ statThreeValue }}</div>
|
|
<div style="font-size:14px;color:var(--muted,#c9b8da);margin-top:6px;">{{ statThreeLabel }}</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:38px;line-height:1;background:linear-gradient(135deg,var(--accent,#ff5fa2),var(--accent2,#a06bff));-webkit-background-clip:text;background-clip:text;color:transparent;">∞</div>
|
|
<div style="font-size:14px;color:var(--muted,#c9b8da);margin-top:6px;">Chaos & Glitzer</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
statOneValue: string
|
|
statOneLabel: string
|
|
statTwoValue: string
|
|
statThreeValue: string
|
|
statThreeLabel: string
|
|
}>()
|
|
</script>
|