mirror of
https://gitlab.com/little-lines/frontend.git
synced 2024-11-22 10:56:52 +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>
|
<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>
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue