minnan/src/pages/parts/Box2LineImageRightShadow.vue

<template>
  <view 
    class="d-flex flex-row flex-grow-1 justify-between shadow-s 
    radius-base mb-3 p-2 pt-3 pb-3 overflow-hidden
    border-all-light-light-primary"
    :style="{ 
      height: 'calc(100% - 20rpx)',
      width: 'calc(100% - 10rpx)',
    }"
    @click="$emit('click')"
  >
    <view class="d-flex flex-row w-100">
      <image 
        :class="[
          wideImage ? 'width-250' : 'width-150', 
          'height-150', 
          'radius-base',
          'flex-shrink-0',
        ]"
        :src="image"
        :style="{
          backgroundImage: `url('${image}')`,
          backgroundSize: 'cover',
        }"
        mode="aspectFit"
      />
      <view class="d-flex flex-col ml-3 flex-one width-500">
        <view class="d-flex flex-row">
          <text :class="[
            'color-primary size-base',
            desc || title1 ? 'text-lines-1' : 'text-lines-2',
            titleBox ? 'border-all-text' : '',
          ]">{{ title }}</text>
        </view> 
        <text class="size-s color-second text-lines-2 mt-2">{{ desc }}</text>
        <RoundTags v-if="tags" :tags="tags" small />
      </view>
    </view>
    <text class="color-primary-second-text size-ss">{{ right }}</text>
  </view>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import RoundTags from './RoundTags.vue';

defineProps({
  title: String,
  desc: String,
  right: String,
  image: String,

  titleBox: {
    type: Boolean,
    default: false,
  },
  tags: {
    type: Array as PropType<string[]>,
    default: null
  },
  wideImage: {
    type: Boolean,
    default: false,
  },
  title1: {
    type: Boolean,
    default: false,
  }
})
</script>