ShowEasyFrontEnd/FrontEnd/components/exhibition/ExhibitionIntro.vue

<template>
  <v-row class="mx-0">
    <v-col cols="12" class="px-0 tw-pb-0 tw-mb-0">
      <h1
        :class="
          $vuetify.breakpoint.smAndUp
            ? 'neutrals--text text--darken-5 text-size-25'
            : 'neutrals--text text--darken-5 text-size-18'
        "
      >
        {{ $t("Intro") }}
      </h1>
    </v-col>
    <v-col
      v-if="
        (exhibition.frequency != null) ||
        exhibition.intVisitors ||
        exhibition.visitors ||
        exhibition.exhibitors ||
        exhibition.area
      "
      cols="12"
      class="px-0"
    >
      <hr
        v-if="$vuetify.breakpoint.mdAndUp"
        class="mt-0 tw-mb-[40px]"  
        style="border: 1px solid #e5e5e5"
      />
      <v-row class="mx-0">
        <v-col cols="12" class="px-0">
          <div class="frequency">
            <div
              class="my-1 frequencyName neutrals--text text--darken-5"
              v-if="exhibition.frequency != null"
            >
              {{ $t("Frequency") }} : {{ exhibition.frequency }}
            </div>
            <div
              v-if="exhibition.intVisitors"
              class="my-1 internalExhibitors neutrals--text text--darken-5"
            >
              {{ $t("International Visitor Number :") }}
              {{ numberFormat(exhibition.intVisitors) }}
            </div>
            <div
              v-if="exhibition.visitors"
              class="my-1 frequencyVisitors neutrals--text text--darken-5"
            >
              {{ $t("Visitor Number :") }}
              {{ numberFormat(exhibition.visitors) }}
            </div>
            <div
              v-if="exhibition.exhibitors"
              class="my-1 frequencyExhibitors neutrals--text text--darken-5"
            >
              {{ $t("Exhibitor Number :") }}
              {{ numberFormat(exhibition.exhibitors) }}
            </div>
            <div
              v-if="exhibition.area"
              class="my-1 frequencyArea neutrals--text text--darken-5"
            >
              {{ $t("Event Space :") }} {{ exhibition.area.toFixed(2) }}
            </div>
          </div>
        </v-col>
      </v-row>
      <hr
        v-if="$vuetify.breakpoint.mdAndUp"
        class="tw-mt-[40px]"
        style="border: 1px solid #e5e5e5"
      />
    </v-col>
    <v-col cols="12" class="px-0 tw-mt-[18px]">
      <div
        class="neutrals--text text--darken-5"
        v-html="exhibition.about"
        style="text-align: justify"
      ></div>
      <br />
      <div
        v-if="exhibition.organizers"
        class="organizer neutrals--text text--darken-5"
      >
        <div style="font-weight: bold">{{ $t("Organizer Name :") }}</div>
        <div v-for="item in exhibition.organizers" :key="item.OrganizerID">
          {{ item.OrganizerName }}
        </div>
      </div>
    </v-col>
  </v-row>
</template>

<script>
  export default {
    name: "ExhibitionIntro",
    props: {
      exhibition: {
        type: Object,
        default: () => ({
          frequency: {},
          internalExhibitors: "",
          visitors: "",
          exhibitors: "",
          area: "",
          about: "",
          organizers: [],
        }),
      },
    },
    methods: {
      numberFormat: function (number) {
        return number; //.toLocaleString("en-US");
      },
    },
  };
</script>

<style lang="scss">
  @media screen and (min-width: 900px) {
    .frequency {
      display: grid;
      grid-template-areas:
        "frequencyName internalExhibitors"
        "frequencyVisitors frequencyExhibitors"
        "frequencyArea frequencyArea";
    }
  }
  @media only screen and (min-width: 0px) and (max-width: 899px) {
    .frequency {
      display: grid;
      background: #f8f8f8;
      border-radius: 15px;
      padding: 15px;
      grid-template-areas:
        "frequencyName"
        "internalExhibitors"
        "frequencyVisitors"
        "frequencyExhibitors"
        "frequencyArea";
    }
    .organizer {
      background: #f8f8f8;
      border-radius: 15px;
      padding: 15px;
    }
  }
</style>