feat(UI): actualización de colores de ruta a amarillo y fix navegación transporte

2026-02-27 10:57:42 -05:00
parent a8eaad7f35
commit b90eb83acb
12 changed files with 1624 additions and 332 deletions
--- a/frontend/src/views/TransporteLayout.vue
+++ b/frontend/src/views/TransporteLayout.vue
@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+const { t } = useI18n()
+const route = useRoute()
+</script>
+
+<template>
+  <div class="taxi-view">
+    <header class="header-main">
+      <h1 class="brand-title">{{ t('taxi.title') }}</h1>
+      <div class="hub-tabs">
+        <div class="tabs-background">
+          <router-link to="/transporte/taxis" class="hub-tab" active-class="active" exact-active-class="active">
+            <span class="material-icons">local_taxi</span>
+            {{ t('taxi.tabLocal') }}
+          </router-link>
+          <router-link to="/transporte/viajes-turisticos" class="hub-tab" active-class="active" :class="{ 'active': route.path.includes('viajes-turisticos') }">
+            <span class="material-icons">directions_bus</span>
+            {{ t('taxi.tabIntercity') }}
+          </router-link>
+          <div class="tab-slider" :style="{ left: route.path.includes('taxis') ? '4px' : 'calc(50% + 2px)' }"></div>
+        </div>
+      </div>
+    </header>
+    
+    <router-view v-slot="{ Component }">
+      <transition name="fade" mode="out-in">
+        <keep-alive>
+          <component :is="Component" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </div>
+</template>
+
+<style scoped>
+.taxi-view {
+  min-height: 100vh;
+  position: relative;
+  padding: 0 0 150px;
+}
+
+.header-main {
+    padding: 24px 16px;
+    text-align: center;
+}
+
+.brand-title {
+    color: var(--header-text);
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin: 0;
+}
+
+/* Transport Hub Tabs */
+.hub-tabs {
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+}
+
+.tabs-background {
+  background: var(--bg-secondary);
+  padding: 4px;
+  border-radius: 16px;
+  display: flex;
+  position: relative;
+  border: 1px solid var(--border-color);
+  width: 100%;
+  max-width: 400px;
+}
+
+.hub-tab {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-weight: 700;
+  font-size: 0.9rem;
+  cursor: pointer;
+  z-index: 2;
+  transition: color 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-decoration: none;
+}
+
+.hub-tab.active {
+  color: #101820 !important;
+}
+
+.hub-tab .material-icons {
+  font-size: 18px;
+}
+
+.tab-slider {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  width: calc(50% - 6px);
+  background: #FEE715;
+  border-radius: 12px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+  box-shadow: 0 4px 15px rgba(254, 231, 21, 0.4);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>