ShowEasyFrontEnd/FrontEnd/components/exhibition/ExhibitionRelatedServices.vue

<template>
  <v-row class="mb-6" style="position: relative">
    <v-col
      cols="12"
      style="
        position: absolute;
        border-radius: 15px;
        width: 100%;
        height: 100%;
        background: rgba(248, 248, 248, 0.69);
      "
    ></v-col>
    <v-col cols="12" style="position: absolute; top: 35%; left: 35%">
      <img src="~/assets/img/travelPic.png" />
      <div>
        <h2><b>Coming soon ...</b></h2>
      </div>
    </v-col>

    <v-col cols="12">
      <v-select
        style="width: 170px; color: #ee9546"
        v-model="filterName"
        :items="filter"
        dense
        outlined
      ></v-select>
    </v-col>
    <div class="col-md-12">
      <v-btn
        v-for="item in relatedServicesBtn"
        :key="item.id"
        outlined
        class="
          warning--text
          recommend-tag
          no-text-transform
          text-space-1
          rounded-lg
          ml-2
          mt-2
        "
      >
        {{ item.name }}
      </v-btn>
    </div>
    <v-col cols="12" style="background: #f8f8f8; border-radius: 15px">
      <div v-for="item in serviceContent" :key="item.id">
        <v-row>
          <v-col cols="3">
            <v-img :src="item.logo" style="border-radius: 15px"></v-img>
          </v-col>
          <v-col cols="9">
            <div class="relatedServicesContainer relatedServicesNone">
              <div class="relatedServicesText">
                <div style="color: #9c9c9c">{{ item.type }}</div>
                <div>
                  <b>{{ item.title }}</b>
                </div>
                <div class="relatedServicesNone">{{ item.detail }}</div>
              </div>
              <div class="relatedServicesGo">
                <div v-if="item.heart" class="relatedServicesNone">
                  <v-icon color="warning">mdi-heart</v-icon>
                </div>
                <div v-else class="relatedServicesNone">
                  <v-icon color="warning">mdi-heart-outline</v-icon>
                </div>
                <div class="relatedServicesNone">{{ item.price }}</div>
                <div class="relatedServicesNone">
                  <v-btn
                    color="warning"
                    class="
                      recommend-tag
                      no-text-transform
                      text-space-1
                      rounded-lg
                    "
                  >
                    Recommend
                  </v-btn>
                </div>
              </div>
            </div>
            <div class="relatedServicesFlatNone">
              <div style="color: #9c9c9c">{{ item.type }}</div>
              <div>
                <b>{{ item.title }}</b>
              </div>
              <div class="relatedServicesFlat">
                <div class="relatedServicesPrice">{{ item.price }}</div>
                <div class="relatedServicesGoBtn">
                  <v-btn
                    color="warning"
                    class="
                      recommend-tag
                      no-text-transform
                      text-space-1
                      rounded-lg
                    "
                  >
                    Recommend
                  </v-btn>
                </div>
              </div>
            </div>
          </v-col>
        </v-row>
      </div>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: "ExhibitionRelatedServices",
  props: {
    exhibition: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      filterName: "For Everyone",
      filter: ["For Everyone", "For Exhibitor", "For Visitor"],
      relatedServicesBtn: [
        {
          id: "1",
          name: "all",
        },
        {
          id: "2",
          name: "Airport transportation",
        },
        {
          id: "3",
          name: "Rental cars",
        },
        {
          id: "4",
          name: "Exhibit transportation",
        },
        {
          id: "5",
          name: "Flowers",
        },
        {
          id: "6",
          name: "Exhibit transportation",
        },
      ],
      serviceContent: [
        {
          id: "1",
          logo: "https://d3kpqi6h465b7i.cloudfront.net/exhibitions/100/logos/medical-japan.png",
          type: "Airport transportation",
          title: "Taoyuan International Airport Transfers",
          detail:
            "Get a headstart on your next travel expedition with Taoyuan International Airport transfers. Enjoy guaranteed convenience ...",
          heart: false,
          price: "$45 USD up",
        },
        {
          id: "2",
          logo: "https://d3kpqi6h465b7i.cloudfront.net/exhibitions/100/logos/medical-japan.png",
          type: "Rental cars",
          title:
            "Taipei Popular Sightseeing Private Car Charter: Jiufen, Pingxi, and North Coast (Chinese/English/Korean)",
          detail:
            "Looking for a way to explore Taipei without having to bear with the constraints of being part of a big tour group? Then book this ...",
          heart: false,
          price: "$10,800 NTD up",
        },
        {
          id: "3",
          logo: "https://d3kpqi6h465b7i.cloudfront.net/exhibitions/100/logos/medical-japan.png",
          type: "Airport transportation",
          title: "Taoyuan International Airport Transfers",
          detail:
            "Get a headstart on your next travel expedition with Taoyuan International Airport transfers. Enjoy guaranteed convenience ...",
          heart: true,
          price: "$45 USD up",
        },
      ],
    };
  },
};
</script>

<style>
.relatedServicesText {
  grid-area: relatedServicesText;
}
.relatedServicesGo {
  grid-area: relatedServicesGo;
}
.relatedServicesContainer {
  display: grid;
  grid-template-columns: auto 2fr;
  grid-template-areas: "relatedServicesText relatedServicesGo";
}
.relatedServicesFlatNone {
  display: none;
}
.relatedServicesFlat {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 900px) {
  .relatedServicesContainer {
    display: grid;
    grid-template-areas:
      "relatedServicesText"
      "relatedServicesGo";
  }
  .relatedServicesPrice {
    grid-area: relatedServicesPrice;
    text-align: left;
  }
  .relatedServicesNone {
    display: none;
  }
  .relatedServicesGoBtn {
    grid-area: relatedServicesGoBtn;
    text-align: right;
  }
  .relatedServicesFlat {
    display: initial;
    display: grid;
    grid-template-areas: "relatedServicesPrice relatedServicesGoBtn";
  }
  .relatedServicesFlatNone {
    display: initial;
  }
}
</style>