You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
2.6 KiB
109 lines
2.6 KiB
<template>
|
|
<v-row class="mb-6">
|
|
<v-col cols="12">
|
|
<div class="exhibitionGoogleMap">
|
|
<iframe
|
|
id="googleMap"
|
|
width="100%"
|
|
height="437px"
|
|
frameborder="0"
|
|
:src= "addressMsg"
|
|
></iframe>
|
|
</div>
|
|
<div class="mt-lg-5" v-for="item in exhibition.venues" :key="item.VenueID">
|
|
<div class="mapAddressContainer" @click="prompt(item.Address)">
|
|
<div class="mapIcon"><unicon name="map-marker" fill="#EE9546" /></div>
|
|
<div class="mapAddressName" style="margin-left: 10px">
|
|
<b v-bind:class="{ upColor: IsIndex === item.Address }">{{ item.VenueName }}</b>
|
|
</div>
|
|
<div class="mapAddress" style="margin-left: 10px">
|
|
{{ item.Address }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p></p>
|
|
<!--div
|
|
class="exhibitionVenueBtnContainer"
|
|
style="padding: 30px; background: #f8f8f8; border-radius: 15px"
|
|
>
|
|
<div class="venueIconText">
|
|
<v-icon color="warning">mdi-cloud-check-outline</v-icon> <b
|
|
>Online event</b
|
|
>
|
|
</div>
|
|
<div style="text-align: right">
|
|
<v-btn
|
|
color="warning"
|
|
class="
|
|
recommend-tag
|
|
no-text-transform
|
|
text-space-1
|
|
rounded-lg
|
|
venueBtn
|
|
"
|
|
>Go to online event
|
|
</v-btn>
|
|
</div>
|
|
</div-->
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ExhibitionVenue",
|
|
props: {
|
|
exhibition: {
|
|
type: Object,
|
|
default: () => ({
|
|
venues:[],
|
|
})
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
IsIndex: this.exhibition.venues[0].Address,
|
|
addressMsg : "https://maps.google.com.tw/maps?f=q&hl=" + this.$i18n.locale + "&geocode=&q=" + this.exhibition.venues[0].Address + "&z=16&output=embed&t=t",
|
|
};
|
|
},
|
|
methods: {
|
|
prompt(address) {
|
|
this.IsIndex = address;
|
|
this.addressMsg = "https://maps.google.com.tw/maps?f=q&hl=" + this.$i18n.locale + "&geocode=&q=" + address + "&z=16&output=embed&t=t";
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.upColor{
|
|
color: #EE9546;
|
|
}
|
|
.mapIcon {
|
|
grid-area: mapIcon;
|
|
}
|
|
.mapAddressName {
|
|
grid-area: mapAddressName;
|
|
}
|
|
.mapAddress {
|
|
grid-area: mapAddress;
|
|
}
|
|
.mapAddressContainer {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-areas:
|
|
"mapIcon mapAddressName"
|
|
"mapIcon mapAddress";
|
|
}
|
|
|
|
.venueIconText {
|
|
grid-area: venueIconText;
|
|
}
|
|
.venueBtn {
|
|
grid-area: venueBtn;
|
|
}
|
|
.exhibitionVenueBtnContainer {
|
|
display: grid;
|
|
grid-template-areas: "venueIconText venueBtn";
|
|
}
|
|
</style>
|