mirror of
https://gitlab.com/little-lines/frontend.git
synced 2024-11-22 05:16:53 +00:00
DestinationInfoCard & change size pin on favorite page
This commit is contained in:
T-angmo
parent
c43f64994d
commit
c414686dfb
2 changed files with 117 additions and 50 deletions
|
|
@ -1,75 +1,139 @@
|
|||
<template>
|
||||
<v-img
|
||||
src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
|
||||
height="250px"
|
||||
cover
|
||||
<v-img
|
||||
src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
|
||||
height="100%"
|
||||
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
|
||||
class="stick-bottom card-height"
|
||||
width="100%"
|
||||
style="padding-top: 15px; font-weight:bold;"
|
||||
:title="destination.title"
|
||||
:subtitle="destination.subTitle"
|
||||
>
|
||||
|
||||
<v-card-text>
|
||||
Enim voluptate ad deserunt amet culpa ad irure eu reprehenderit dolor consequat non.
|
||||
</v-card-text>
|
||||
<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-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-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-btn variant="tonal" icon="mdi-close"
|
||||
|
||||
style="position: absolute; top: 15px; right: 15px;"
|
||||
/>
|
||||
|
||||
|
||||
</v-card>
|
||||
<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-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>
|
||||
|
||||
<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>
|
||||
|
||||
|
|
@ -39,10 +39,13 @@
|
|||
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-img
|
||||
:width="32"
|
||||
src= "./icons/Adwaita/pin.svg"
|
||||
></v-img>
|
||||
<v-avatar>
|
||||
<v-img
|
||||
:height="30"
|
||||
src= "./icons/Adwaita/pin.svg"
|
||||
></v-img>
|
||||
</v-avatar>
|
||||
|
||||
</template>
|
||||
|
||||
<v-list-item-title v-text="item.title"></v-list-item-title>
|
||||
|
|
|
|||
Loading…
Reference in a new issue