xiangyuan-gov-app/src/common/components/parts/Box2LineImageRightShadow.vue

<template>
  <Touchable 
    :style="{ 
      height: 'calc(100% - 20rpx)',
      width: 'calc(100% - 10rpx)',
    }"
    :flexGrow="1" 
    overflow="hidden"
    direction="row"
    justify="space-between"
    :padding="[20,10]"
    @click="$emit('click')"
  >
    <FlexRow width="100%" :gap="20">
      <Image 
        :width="wideImage ? 250 : 150"
        :height="150"
        :radius="10"
        :flexShrink="0"
        :src="image"
        mode="aspectFill"
      />
      <FlexCol :flexGrow="1" :width="500" :gap="10">
        <Text 
          :color="'primary'"
          :fontConfig="desc || title1 ? 'title' : 'subText'"
          :lines="desc || title1 ? 1 : 2"
        >{{ title }}</Text>
        <Text 
          fontConfig="subText"
          color="second"
          :lines="2"
        >{{ desc }}</Text>
        <Tag v-if="badge" :text="badge" scheme="light" type="primary" size="small" />
        <RoundTags v-if="tags" :tags="tags" small />
      </FlexCol>
    </FlexRow>
    <Text color="primary-second-text" fontConfig="caption">{{ right }}</Text>
  </Touchable>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import RoundTags from './RoundTags.vue';
import Tag from '@/components/display/Tag.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import Touchable from '@/components/feedback/Touchable.vue';

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

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