little-lines/frontend
1
0
Fork 0
mirror of https://gitlab.com/little-lines/frontend.git synced 2024-11-23 13:36:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

30
src/components/DestinationInfoCard.vue
View file

@ -1,13 +1,14 @@
<template>
<v-img
class="image"
src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
height="100%"
cover
></v-img>
<v-card
class="stick-bottom card-height"
width="100%"
height="60vh"
style="padding-top: 15px; font-weight:bold;"
:title="destination.title"
:subtitle="destination.subTitle"
@ -23,7 +24,7 @@
</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-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>
@ -35,7 +36,6 @@
</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>
@ -47,7 +47,6 @@
</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>
@ -60,7 +59,7 @@
ดูเส้นทาง</v-btn>
</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>
@ -76,19 +75,16 @@ const destination = {
}
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',
@ -102,10 +98,6 @@ const detial = [
bottom: 0;
}
.card-height {
height: 75%;
}
.btnlist-height {
height: 25%;
width: 100%;
@ -116,10 +108,6 @@ const detial = [
justify-content: space-around;
}
.btn-width {
width: 35vw;
}
.text-white {
color: white;
}
@ -128,12 +116,18 @@ const detial = [
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;
.knowMore {
filter: invert(67%) sepia(85%) saturate(5663%) hue-rotate(8deg) brightness(100%) contrast(101%);
}
.image {
width: 100%;
height: 45vh;
}
</style>