ShowEasyFrontEnd/FrontEnd/components/exhibition/ExhibitionVenue.vue

<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>&nbsp;<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>