<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>
  