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

View file

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