minnan-website/components/parts/ImageTitleBlock.vue

<template>
  <div 
    :class="[
      'ImageTitleBlock',
      title ? 'has-title' : '',
      fit? 'fit' : ''
    ]" 
    :style="{ backgroundImage: `url('${image || (title ? ImageFailed : '')}')` }"
    @click="$emit('click')"
  >
    <img 
      v-if="image"
      :src="image"
      alt=""
      class="image"
    >
    <div class="desc">
      <h5>{{ title }}</h5>
      <p>{{ desc }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import ImageFailed from '@/assets/images/ImageFailed.png';
defineProps({	
  title: {
    type: String,
    default: '' 
  },
  desc: {
    type: String,
    default: '' ,
  },
  image: {
    type: String,
    default: '' 
  },
  fit: {
    type: Boolean,
    default: false
  },
})
defineEmits([
  'click',
])
</script>

<style lang="scss">
@use '@/assets/scss/colors.scss' as *;

.ImageTitleBlock  {
  position: relative;
  padding: 24px;
  background-size: cover;
  background-position: top center;
  width: 400px;
  height: 270px;
  margin-right: 24px;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    z-index: 1;
  }

  &.fit {
    width: 100%;
    margin-right: 0;
  }
  &.has-title {
    &::before {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      left: 0;
      bottom: 0;
      height: 120px;
      z-index: 20;
      background: linear-gradient(
        180deg,
        rgba(#000, 0) 0%,
        rgba(#000, 0.7) 100%
      )
    }
  }

  .desc {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 24px;
    color: #fff;
    z-index: 20;

    h5 {
      font-family: SourceHanSerifCNBold;
      font-size: 1.1rem;
      margin-bottom: 5px;
    }
    p {
      font-size: 0.8rem;
      margin: 0;
    }
  }
}
</style>