61 lines
1.8 KiB
Vue
61 lines
1.8 KiB
Vue
<template>
|
|
<AirportToolTip :airport="airport">
|
|
<div class="airport-marker arrival">
|
|
<div class="airport-marker__dot" />
|
|
<div class="airport-marker__ring" />
|
|
</div>
|
|
</AirportToolTip>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type {Airport} from "@/Types/types";
|
|
import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
|
|
|
|
defineProps<{
|
|
airport: Airport
|
|
}>()
|
|
</script>
|
|
|
|
<style>
|
|
.airport-marker {
|
|
position: relative;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* ── arrival ────────────────────────────────────────────────────────────────── */
|
|
.airport-marker.arrival .airport-marker__dot {
|
|
position: absolute;
|
|
inset: 4px;
|
|
background: #4da6ff;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 6px rgba(77, 166, 255, 0.8);
|
|
}
|
|
.airport-marker.arrival .airport-marker__ring {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 1px solid rgba(77, 166, 255, 0.5);
|
|
border-radius: 50%;
|
|
animation: pm-pulse 2.2s ease-out infinite;
|
|
}
|
|
|
|
/* ── departure ──────────────────────────────────────────────────────────────── */
|
|
.airport-marker.departure {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
.airport-marker.departure .airport-marker__dot {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: #ff9f4a;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(255, 159, 74, 0.4);
|
|
box-shadow: 0 0 8px rgba(255, 159, 74, 0.6);
|
|
}
|
|
|
|
@keyframes pm-pulse {
|
|
0% { transform: scale(1); opacity: 0.7; }
|
|
100% { transform: scale(2.5); opacity: 0; }
|
|
}
|
|
</style>
|