75 lines
1.5 KiB
Vue
75 lines
1.5 KiB
Vue
|
<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>
|
||
|
|
|