little-lines/frontend
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases 2 Activity

Finish DestinationInfoCard

Browse source
This commit is contained in:
T-angmo 2023-09-09 16:45:27 +07:00
parent c414686dfb
commit 4311283422
1 changed files with 18 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/DestinationInfoCard.vue
View file

@ -1,13 +1,14 @@
<template> <template>
<v-img <v-img
src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" class="image"
height="100%" src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
cover cover
></v-img> ></v-img>
<v-card <v-card
class="stick-bottom card-height" class="stick-bottom card-height"
width="100%" width="100%"
height="60vh"
style="padding-top: 15px; font-weight:bold;" style="padding-top: 15px; font-weight:bold;"
:title="destination.title" :title="destination.title"
:subtitle="destination.subTitle" :subtitle="destination.subTitle"
@ -23,7 +24,7 @@
</v-avatar> </v-avatar>
</template> </template>
<v-list-item-title class="textCheck">{{detial[0].title}}</v-list-item-title> <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-subtitle ><a href="https://wiki.openstreetmap.org/wiki/Key:wheelchair" class="knowMore">{{detial[0].subtitle}}</a></v-list-item-subtitle>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item>
@ -35,7 +36,6 @@
</v-avatar> </v-avatar>
</template> </template>
<v-list-item-title class="text-decoration-underline">{{detial[1].title}}</v-list-item-title> <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>
<v-list-item> <v-list-item>
@ -47,7 +47,6 @@
</v-avatar> </v-avatar>
</template> </template>
<v-list-item-title>{{detial[2].title}}</v-list-item-title> <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-item>
@ -60,7 +59,7 @@
ดูเส้นทาง</v-btn> ดูเส้นทาง</v-btn>
</v-card-actions> </v-card-actions>
<v-btn variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" /> <v-btn :to="{name: 'favorite'}" variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
</v-card> </v-card>
@ -76,19 +75,16 @@ const destination = {
} }
const detial = [ const detial = [
{ {
color: '',
icon: check, icon: check,
subtitle: 'เรียนรู้เพิ่มเติม', subtitle: 'เรียนรู้เพิ่มเติม',
title: 'Unrestricted Wheelchair access', title: 'Unrestricted Wheelchair access',
}, },
{ {
color: '',
icon: findLocation, icon: findLocation,
subtitle: '', subtitle: '',
title: '13.76493, 100.53828', title: '13.76493, 100.53828',
}, },
{ {
color: '',
icon: clock, icon: clock,
subtitle: '', subtitle: '',
title: 'Mo-Su 11:30-22:00', title: 'Mo-Su 11:30-22:00',
@ -102,10 +98,6 @@ const detial = [
bottom: 0; bottom: 0;
} }
.card-height {
height: 75%;
}
.btnlist-height { .btnlist-height {
height: 25%; height: 25%;
width: 100%; width: 100%;
@ -116,10 +108,6 @@ const detial = [
justify-content: space-around; justify-content: space-around;
} }
.btn-width {
width: 35vw;
}
.text-white { .text-white {
color: white; color: white;
} }
@ -128,12 +116,18 @@ const detial = [
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.iconCheck, .textCheck { .iconCheck, .textCheck {
filter: invert(55%) sepia(39%) saturate(601%) hue-rotate(73deg) brightness(97%) contrast(98%); filter: invert(55%) sepia(39%) saturate(601%) hue-rotate(73deg) brightness(97%) contrast(98%);
} }
v-list:disabled { .knowMore {
color: purple; filter: invert(67%) sepia(85%) saturate(5663%) hue-rotate(8deg) brightness(100%) contrast(101%);
}
.image {
width: 100%;
height: 45vh;
} }
</style> </style>