DestinationInfoCard & change size pin on favorite page

This commit is contained in:
T-angmo 2023-09-08 03:32:15 +07:00
parent c43f64994d
commit c414686dfb
2 changed files with 117 additions and 50 deletions

View file

@ -1,75 +1,139 @@
<template> <template>
<v-img <v-img
src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
height="250px" height="100%"
cover cover
></v-img> ></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> <v-card
Destination.SubTitle class="stick-bottom card-height"
</v-card-subtitle> width="100%"
style="padding-top: 15px; font-weight:bold;"
:title="destination.title"
:subtitle="destination.subTitle"
>
<v-card-text> <v-list lines="one">
Enim voluptate ad deserunt amet culpa ad irure eu reprehenderit dolor consequat non. <v-list-item>
</v-card-text> <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-list-item>
<v-card-actions class = "stick-bottom btnlist-height justify-sa"> <template v-slot:prepend>
<v-btn rounded="xl" variant="tonal" <v-avatar>
width="45vw" height = "44px" <img :src="detial[1].icon"
> class="icon"
เพมลงในสถานทโปรด</v-btn> />
<v-btn rounded="xl" variant="flat" </v-avatar>
class="text-white" </template>
width="45vw" height = "44px" <v-list-item-title class="text-decoration-underline">{{detial[1].title}}</v-list-item-title>
color="#f16322"> <v-list-item-subtitle>{{detial[1].subtitle}}</v-list-item-subtitle>
เสนทาง</v-btn> </v-list-item>
</v-card-actions>
<v-btn variant="tonal" icon="mdi-close" <v-list-item>
<template v-slot:prepend>
style="position: absolute; top: 15px; right: 15px;" <v-avatar>
/> <img :src="detial[2].icon"
class="icon"
/>
</v-card> </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-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>
</v-card-actions>
<v-btn variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
</v-card>
</template> </template>
<script setup> <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> </script>
<style> <style>
.stick-bottom{ .stick-bottom {
position:fixed; position: fixed;
bottom:0; bottom: 0;
} }
.card-height{
.card-height {
height: 75%; height: 75%;
} }
.btnlist-height{
.btnlist-height {
height: 25%; height: 25%;
width: 100%; width: 100%;
} }
.v-card-actions.justify-sa { .v-card-actions.justify-sa {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
.btn-width{
.btn-width {
width: 35vw; width: 35vw;
} }
.text-white{
.text-white {
color: 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> </style>

View file

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