DestinationInfoCard & change size pin on favorite page

src/components/DestinationInfoCard.vue

@@ -1,75 +1,139 @@
 <template>
   <v-img 
     src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" 
-        height="250px"
+    height="100%" 
     cover
     ></v-img>
 
   <v-card 
   class="stick-bottom card-height" 
   width="100%" 
-    style="padding-top: 15px;"
+  style="padding-top: 15px; font-weight:bold;"
+  :title="destination.title" 
+  :subtitle="destination.subTitle"
   >
-        <v-card-title>
-        Destination.Title
-        </v-card-title>
 
-        <v-card-subtitle>
-        Destination.SubTitle
-        </v-card-subtitle>
+    <v-list lines="one">
+      <v-list-item>
+        <template v-slot:prepend>
+          <v-avatar>
+            <img :src="detial[0].icon" 
+            class="iconCheck"
+            />
+          </v-avatar>
+        </template>
+        <v-list-item-title class="textCheck">{{detial[0].title}}</v-list-item-title>
+        <v-list-item-subtitle >{{detial[0].subtitle}}</v-list-item-subtitle>
+      </v-list-item>
 
-        <v-card-text>
-        Enim voluptate ad deserunt amet culpa ad irure eu reprehenderit dolor consequat non.
-        </v-card-text>
+      <v-list-item>
+        <template v-slot:prepend>
+          <v-avatar>
+            <img :src="detial[1].icon" 
+            class="icon"
+            />
+          </v-avatar>
+        </template>
+        <v-list-item-title class="text-decoration-underline">{{detial[1].title}}</v-list-item-title>
+        <v-list-item-subtitle>{{detial[1].subtitle}}</v-list-item-subtitle>
+      </v-list-item>
+
+      <v-list-item>
+        <template v-slot:prepend>
+          <v-avatar>
+            <img :src="detial[2].icon" 
+            class="icon"
+            />
+          </v-avatar>
+        </template>
+        <v-list-item-title>{{detial[2].title}}</v-list-item-title>
+        <v-list-item-subtitle>{{detial[2].subtitle}}</v-list-item-subtitle>
+      </v-list-item>
 
 
-          <v-card-actions class = "stick-bottom btnlist-height justify-sa">
-              <v-btn rounded="xl" variant="tonal"
-              width="45vw" height = "44px"
-              >
+    </v-list>
+
+    <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 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-btn variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
 
 
   </v-card>
-
 </template>
   
 <script setup>
-
+import findLocation from '../../icons/Material/find-location.svg';
+import clock from '../../icons/Material/clock.svg';
+import check from '../../icons/Material/check-round.svg';
+const destination = {
+  title: "อนุสาวรีย์ชัยสมรภูมิ",
+  subTitle: "ราชเทวี , กรุงเทพมหานคร"
+}
+const detial = [
+  {
+    color: '',
+    icon: check,
+    subtitle: 'เรียนรู้เพิ่มเติม',
+    title: 'Unrestricted Wheelchair access',
+  },
+  {
+    color: '',
+    icon: findLocation,
+    subtitle: '',
+    title: '13.76493, 100.53828',
+  },
+  {
+    color: '',
+    icon: clock,
+    subtitle: '',
+    title: 'Mo-Su 11:30-22:00',
+  },
+]
 </script>
 
 <style>
-.stick-bottom{
-  position:fixed;
-  bottom:0;
+.stick-bottom {
+  position: fixed;
+  bottom: 0;
 }
-.card-height{
+
+.card-height {
   height: 75%;
 }
-.btnlist-height{
+
+.btnlist-height {
   height: 25%;
   width: 100%;
 }
+
 .v-card-actions.justify-sa {
   display: flex;
   justify-content: space-around;
 }
-.btn-width{
+
+.btn-width {
   width: 35vw;
 }
-.text-white{
+
+.text-white {
   color: white;
 }
+
+.icon, .iconCheck {
+  width: 30px;
+  height: 30px;
+}
+.iconCheck, .textCheck {
+  filter: invert(55%) sepia(39%) saturate(601%) hue-rotate(73deg) brightness(97%) contrast(98%);
+}
+
+v-list:disabled {
+  color: purple;
+}
 </style>
   

src/views/Favorite.vue

@@ -39,10 +39,13 @@
             
             >
             <template v-slot:prepend>
+                <v-avatar>
                     <v-img
-                :width="32"
+                    :height="30"
                     src= "./icons/Adwaita/pin.svg"
                     ></v-img>
+                </v-avatar>
+                
             </template>
 
             <v-list-item-title v-text="item.title"></v-list-item-title>