fixing bottom nav

This commit is contained in:
SRP-mango 2023-08-02 01:34:46 +07:00
parent 11f7e06bde
commit 65d4f3d12a
4 changed files with 32 additions and 23 deletions

View file

@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/icons/LittleLines.Devel.svg" />
// <link rel="icon" type="image/svg+xml" href="/icons/LittleLines.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

View file

@ -1,30 +1,31 @@
<template>
<v-layout class="overflow-visible" style="height: 56px">
<v-bottom-navigation
class = "overflow"
v-model="value"
grow
>
<router-link :to="{name: 'home'}">
<v-btn :to="{name: 'home'}">
<v-bottom-navigation>
<v-btn :to="{name: 'home'}"
block rounded="lg"
min-width="20px"
max-width="120px">
<v-icon>mdi-map</v-icon>
แผนท
</v-btn>
</router-link>
<router-link :to="{name: 'favorite'}">
<v-btn :to="{name: 'favorite'}">
<v-btn :to="{name: 'favorite'}"
block rounded="lg"
min-width="20px"
max-width="120px">
<v-icon>mdi-heart</v-icon>
สถานทโปรด
</v-btn>
</router-link>
<router-link :to="{name: 'setting'}">
<v-btn :to="{name: 'setting'}">
<v-btn :to="{name: 'setting'}"
block rounded="lg"
min-width="20px"
max-width="120px">
<v-icon>mdi-cog</v-icon>
การตงค
</v-btn>
</router-link>
</v-bottom-navigation>
</v-layout>
</template>
@ -36,3 +37,9 @@ import {RouterLink} from 'vue-router';
}
</script>
<style>
.v-btn {
min-width: 50px;
}
</style>

View file

@ -3,7 +3,6 @@
<v-app-bar scroll-threshold="0"
class="mx-auto px-auto"
>
<v-text-field
density="compact"
variant="solo"

View file

@ -6,12 +6,10 @@
:loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true"
style=
"
height: 100%;
"height: 89%;
width: 100%;
position: fixed;
"
"
>
<ol-view
ref="view"
@ -40,3 +38,9 @@ const projection = ref("EPSG:4326");
const zoom = ref(19);
const rotation = ref(0);
</script>
<style>
.ol-zoom{
top: 40px;
}
</style>