add destination-card

This commit is contained in:
SRP-mango 2023-08-12 18:16:08 +07:00
parent 12804ca773
commit 84dee0de88
4 changed files with 92 additions and 1 deletions

View file

@ -0,0 +1,75 @@
<template>
<v-img
src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
height="250px"
cover
></v-img>
<v-card
class="stick-bottom card-height"
width="100%"
style="padding-top: 15px;"
>
<v-card-title>
Destination.Title
</v-card-title>
<v-card-subtitle>
Destination.SubTitle
</v-card-subtitle>
<v-card-text>
Enim voluptate ad deserunt amet culpa ad irure eu reprehenderit dolor consequat non.
</v-card-text>
<v-card-actions class = "stick-bottom btnlist-height justify-sa">
<v-btn rounded="xl" variant="tonal"
width="45vw" height = "44px"
>
เพมลงในสถานทโปรด</v-btn>
<v-btn rounded="xl" variant="flat"
class="text-white"
width="45vw" height = "44px"
color="#f16322">
เสนทาง</v-btn>
</v-card-actions>
<v-btn variant="tonal" icon="mdi-close"
style="position: absolute; top: 15px; right: 15px;"
/>
</v-card>
</template>
<script setup>
</script>
<style>
.stick-bottom{
position:fixed;
bottom:0;
}
.card-height{
height: 75%;
}
.btnlist-height{
height: 25%;
width: 100%;
}
.v-card-actions.justify-sa {
display: flex;
justify-content: space-around;
}
.btn-width{
width: 35vw;
}
.text-white{
color: white;
}
</style>

View file

@ -5,6 +5,7 @@ const routes = [
{path: '/about', name: 'about', component: () => import('@/views/About.vue')},
{path: '/favorite', name: 'favorite', component: () => import('@/views/Favorite.vue')},
{path: '/setting', name: 'setting', component: () => import('@/views/Setting.vue')},
{path: '/destination-info', name: 'destination-info', component: () => import('@/views/DestinationInfo.vue')},
]
const router = createRouter({
routes,

View file

@ -0,0 +1,12 @@
<template>
<DestinationInfoCard/>
</template>
<script setup>
import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
</script>
<style>
</style>

View file

@ -33,8 +33,10 @@
>
<v-list-item
v-for="(item, i) in items"
:to="{name: 'destination-info'}"
:key="i"
:value="item"
>
<template v-slot:prepend>
<v-img
@ -45,7 +47,6 @@
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.desc"></v-list-item-subtitle>
<v-divider></v-divider>
</v-list-item>
</v-list>
@ -55,6 +56,8 @@
</template>
<script setup>
import {RouterLink} from 'vue-router';
const pin_svg = "./icons/Adwaita/pin.svg"
const items = [
{