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

src/plugins/router.js

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

src/views/DestinationInfo.vue

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

src/views/Favorite.vue

@@ -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 = [
         {