15848b5e96
- Add top bar with breadcrumb (left) and user name + logout button (right) - Move station labels below dots (centered) to prevent line overlap - Move line labels further above stations - Increase vertical spacing between metro lines (160px) for label clearance - Align station x-coordinates for cleaner map layout Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
43 lines
928 B
Vue
43 lines
928 B
Vue
<script setup>
|
|
defineProps({
|
|
path: { type: Array, default: () => [] },
|
|
})
|
|
|
|
const emit = defineEmits(['navigate'])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="breadcrumb">
|
|
<span
|
|
v-for="(item, index) in path"
|
|
:key="index"
|
|
class="breadcrumb-item"
|
|
:class="{ active: index === path.length - 1 }"
|
|
@click="index < path.length - 1 && emit('navigate', item, index)"
|
|
>
|
|
<span v-if="index > 0" class="separator"> > </span>
|
|
<span :class="{ 'cursor-pointer hover:text-[#00d2ff]': index < path.length - 1 }">
|
|
{{ item.label }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.breadcrumb {
|
|
font-family: 'VT323', monospace;
|
|
font-size: 16px;
|
|
color: #8892b0;
|
|
}
|
|
|
|
.breadcrumb-item.active {
|
|
color: #00d2ff;
|
|
}
|
|
|
|
.separator {
|
|
color: #8892b0;
|
|
opacity: 0.5;
|
|
margin: 0 2px;
|
|
}
|
|
</style>
|