add destination-card

src/components/DestinationInfoCard.vue

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