104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import {FlightClass} from "@/Types/types";
|
|
|
|
defineProps<{
|
|
flightClass: FlightClass | null
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
class="class-badge"
|
|
:class="{
|
|
'class-first': flightClass?.name?.toLowerCase().includes('first'),
|
|
'class-business': flightClass?.name?.toLowerCase().includes('business'),
|
|
'class-premium': flightClass?.name?.toLowerCase().includes('premium'),
|
|
'class-economy': flightClass?.name?.toLowerCase().includes('economy') && !flightClass?.name?.toLowerCase().includes('premium'),
|
|
'class-private': flightClass?.name?.toLowerCase().includes('private'),
|
|
'class-unspecified': flightClass?.name?.toLowerCase().includes('unspecified'),
|
|
}"
|
|
>
|
|
{{ flightClass?.name ?? '—' }}
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.class-badge {
|
|
display: inline-block;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.1em;
|
|
padding: 0.18rem 0.55rem;
|
|
border-radius: 2px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.class-first {
|
|
background: rgba(255, 193, 7, 0.15);
|
|
color: #ffc107;
|
|
border: 1px solid rgba(255, 193, 7, 0.3);
|
|
}
|
|
|
|
.class-business {
|
|
background: rgba(100, 180, 255, 0.1);
|
|
color: #64b4ff;
|
|
border: 1px solid rgba(100, 180, 255, 0.25);
|
|
}
|
|
|
|
.class-premium {
|
|
background: rgb(75, 32, 137, 0.1);
|
|
color: #c49dff;
|
|
border: 1px solid rgba(180, 130, 255, 0.25);
|
|
}
|
|
|
|
.class-economy {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: #778;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.class-unspecified {
|
|
display: none;
|
|
background: transparent;
|
|
color: #778;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.class-private {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 160, 0, 0.2) 0%,
|
|
rgba(255, 220, 80, 0.3) 45%,
|
|
rgba(255, 160, 0, 0.15) 100%
|
|
);
|
|
color: #ffc107;
|
|
border: 1px solid rgba(255, 193, 7, 0.4);
|
|
text-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.class-private::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
105deg,
|
|
transparent 40%,
|
|
rgba(255, 220, 100, 0.45) 50%,
|
|
transparent 60%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 2.8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: 200% center;
|
|
}
|
|
100% {
|
|
background-position: -200% center;
|
|
}
|
|
}
|
|
</style>
|