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-[30px] 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("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("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,
  },
  data() {
    return {
      focusExhibitionlist1: [{
        name: '工業科技及機械',
        image: require('/assets/img/thems/pti01.png'),
        exhibitions: [
            {
              id: '1',
              name: 'VISA',
              logo: require('/assets/img/thems/Frame33.png'),
              startdate: '2023-03-01',
              enddate: '2023-03-30',
              region:{
                name: 'Vietnam'
              },
              country:{
                name: 'Vietnam'
              },
              city:{
                name: 'Vietnam'
              }
            },
            {
              id: '1',
              name: 'VISA',
              logo: require('/assets/img/thems/Frame33.png'),
              startdate: '2023-03-01',
              enddate: '2023-03-30',
              region:{
                name: 'Vietnam'
              },
              country:{
                name: 'Vietnam'
              },
              city:{
                name: 'Vietnam'
              }
            },{
              id: '1',
              name: 'VISA',
              logo: require('/assets/img/thems/Frame33.png'),
              startdate: '2023-03-01',
              enddate: '2023-03-30',
              region:{
                name: 'Vietnam'
              },
              country:{
                name: 'Vietnam'
              },
              city:{
                name: 'Vietnam'
              }
            }
        ],
      }
      ,{
        name: '食品及飯店',
        image: require('/assets/img/thems/pti02.png'),
        exhibitions: []
      },{
        name: '食品及飯店',
        image: require('/assets/img/thems/pti02.png'),
        exhibitions: []
      },{
        name: '食品及飯店',
        image: require('/assets/img/thems/pti02.png'),
        exhibitions: []
      }
    ],
    focusExhibitionlist2: [{
        name: '工業科技及機械',
        image: require('/assets/img/thems/pti01.png'),
        exhibitions: [
            {
              id: '1',
              name: 'VISA',
              logo: require('/assets/img/thems/Frame33.png'),
              startdate: '2023-03-01',
              enddate: '2023-03-30',
              region:{
                name: 'Vietnam'
              },
              country:{
                name: 'Vietnam'
              },
              city:{
                name: 'Vietnam'
              }
            },
            {
              id: '1',
              name: 'VISA',
              logo: require('/assets/img/thems/Frame33.png'),
              startdate: '2023-03-01',
              enddate: '2023-03-30',
              region:{
                name: 'Vietnam'
              },
              country:{
                name: 'Vietnam'
              },
              city:{
                name: 'Vietnam'
              }
            },{
              id: '1',
              name: 'VISA',
              logo: require('/assets/img/thems/Frame33.png'),
              startdate: '2023-03-01',
              enddate: '2023-03-30',
              region:{
                name: 'Vietnam'
              },
              country:{
                name: 'Vietnam'
              },
              city:{
                name: 'Vietnam'
              }
            }
        ],
      }
      ,{
        name: '食品及飯店',
        image: require('/assets/img/thems/pti02.png'),
        exhibitions: []
      },{
        name: '食品及飯店',
        image: require('/assets/img/thems/pti02.png'),
        exhibitions: []
      },{
        name: '食品及飯店',
        image: require('/assets/img/thems/pti02.png'),
        exhibitions: []
      }
    ],
    };
  },
  created() {
  },
  mounted() {

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

</style>