minnan-website/components/parts/LeftRightBox.vue

<template>
  <div class="main-box main-left-right-box row">
    <div class="col col-12 col-lg-6 col-md-6">
      <template v-if="left">
        <Carousel v-if="rightItems && rightItems.length > 0" v-bind="carousel2Config" class="carousel-light h-100">
          <Slide 
            v-for="(item, index) in rightItems"
            :key="index"
            @click="() => item.link ? undefined : emit('rightItemDefaultClick', item)"
          >
            <NuxtLink v-if="item.link" :to="item.link" class="w-100 h-100">
              <ImageTitleBlock fit
                :image="item.image"
                :title="item.title"
                :desc="item.desc"
              />
            </NuxtLink>
            <ImageTitleBlock v-else fit
              :image="item.image"
              :title="item.title"
              :desc="item.desc"
            />
          </Slide>
          <template #addons>
            <Navigation />
            <Pagination />
          </template>
        </Carousel>
        <img v-else :src="image" alt="image" class="h-100" @click="emit('moreClick')" />
      </template>
      <TitleDescBlock 
        v-else 
        :title="title"
        :desc="desc" 
        :descLines="descLines"
        :showExpand="showExpand"
        :more="showMore"
        :moreLink="moreLink"
        @moreClick="emit('moreClick')"
      />
    </div>
    <div class="col col-12 col-lg-6 col-md-6">
      <TitleDescBlock 
        v-if="left"
        :title="title"
        :desc="desc"
        :descLines="descLines"
        :showExpand="showExpand"
        :more="showMore"
        :moreLink="moreLink"
        @moreClick="emit('moreClick')"
      />
      <template v-else>
        <Carousel v-if="rightItems && rightItems.length > 0" v-bind="carousel2Config" class="carousel-light h-100">
          <Slide 
            v-for="(item, index) in rightItems"
            :key="index"
            @click="() => item.link ? undefined : emit('rightItemDefaultClick', item)"
          >
            <NuxtLink v-if="item.link" :to="item.link" class="w-100 h-100">
              <ImageTitleBlock fit
                :image="item.image"
                :title="item.title"
                :desc="item.desc"
              />
            </NuxtLink>
            <ImageTitleBlock v-else fit
              :image="item.image"
              :title="item.title"
              :desc="item.desc"
            />
          </Slide>
          <template #addons>
            <Navigation />
            <Pagination />
          </template> 
        </Carousel>
        <NuxtLink v-else-if="moreLink" :to="moreLink">
          <img :src="image" alt="image" class="h-100" />
        </NuxtLink>
        <img v-else :src="image" alt="image" class="h-100" @click="emit('moreClick')" />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import TitleDescBlock from './TitleDescBlock.vue';
import ImageTitleBlock from '@/components/parts/ImageTitleBlock.vue';

const carousel2Config = {
  itemsToShow: 1,
  mouseWheel: true,
  wrapAround: true
}

defineProps({	
  title : {
    type: String,
    default: '',
  },
  desc: {
    type: String,
    default: '',
  },
  image: {
    type: String,
    default: '',
  },
  rightItems: {
    type: Object as PropType<Array<{ 
      title: string, 
      desc: string, 
      image: string ,
      link?: string,
    }>|null>,
    default: null,
  },
  descLines: {
    type: Number,
    default: 3,
  },
  left: {
    type: Boolean,
    default: false,
  },	
  showExpand: {
    type: Boolean,
    default: true,
  },
  showMore: {
    type: Boolean,
    default: true,
  },
  moreLink: {
    type: String,
    default: '',
  },
})

const emit = defineEmits([	
  "moreClick"	, 'rightItemDefaultClick'
])
</script>

<style lang="scss">
.main-left-right-box {
  .col {
    position: relative;
    padding: 0!important;
  }
  img {
    max-width: 100%;
    object-fit: cover;
  }
  .TitleDescBlock {
    padding: 25px;
  }
  .ImageTitleBlock {
    height: 100%;
    min-height: 250px;
  }
}
</style>