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

View file

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

View file

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

View file

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