ShowEasyFrontEnd/FrontEnd/components/home/FocusExhibition.vue

<template>
  <section :class="['xl:tw-max-w-[1246px] xl:tw-mx-auto']">
    <div class="tw-relative">
        <div class="tw-absolute tw-top-0 tw-right-0 tw-left-0 tw-bottom-0 md:tw-block xl:tw-block">
          <div class="tw-grid tw-grid-rows-7 xl:tw-grid-rows-7 tw-h-full">
            <div class="tw-row-span-3 tw-bg-[#f1f1f1]"></div>
            <div class="tw-row-span-4 tw-bg-[#3f3d56]">
            </div>
          </div>
        </div>
        <div class="tw-relative tw-py-16 tw-px-[10px] xl:tw-px-[30px]">
          <section class="xl:tw-mx-auto" v-if="focusExhibitionlist1.length > 0">
            <h2 class="t18 tw-font-medium tw-mb-[28px] md:tw-float-left md:t24 xl:t28">
              * {{ $t("Taiwan") }} {{ $t("Focus Exhibitions") }}
            </h2>
            <FocusExhibition1 :focusExhibitionlist1="focusExhibitionlist1"></FocusExhibition1>
          </section>
          <section class="xl:tw-mx-auto" v-if="focusExhibitionlist2.length > 0" >
            <h2 class="t18 tw-font-medium tw-mb-[28px] md:tw-float-left md:t28 xl:t30 tw-text-white">
              * {{$t("Abroad")}} {{ $t("Focus Exhibitions") }}
            </h2>
            <FocusExhibition2 :focusExhibitionlist2="focusExhibitionlist2"></FocusExhibition2>
          </section>
        </div>
    </div>
  </section>
</template>
<script>
import FocusExhibition1 from "@/components/home/FocusExhibition1";
import FocusExhibition2 from "@/components/home/FocusExhibition2";
export default {
  components: {
    FocusExhibition1,
    FocusExhibition2,
  },
  props: {
    focusExhibitionlist1: {
      type: Array,
    },
    focusExhibitionlist2: {
      type: Array,
    },
  },
  data() {
    return {
    };
  },
  created() {
  },
  mounted() {

  }
};
</script>
<style lang="scss" scoped>

</style>