minnan-website/src/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">
      <img v-if="left" :src="image" alt="image" />
      <TitleDescBlock 
        v-else 
        :title="title"
        :desc="desc" 
        :descLines="descLines"
        :showExpand="showExpand"
        :more="showMore"
        @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"
        @moreClick="emit('moreClick')"
      />
      <img v-else :src="image" alt="image" />
    </div>
  </div>
</template>

<script setup lang="ts">
import TitleDescBlock from './TitleDescBlock.vue';

defineProps({	
  title : {
    type: String,
    default: '',
  },
  desc: {
    type: String,
    default: '',
  },
  image: {
    type: String,
    default: '',
  },
  descLines: {
    type: Number,
    default: 3,
  },
  left: {
    type: Boolean,
    default: false,
  },	
  showExpand: {
    type: Boolean,
    default: true,
  },
  showMore: {
    type: Boolean,
    default: true,
  },
})

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

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