minnan-website/src/components/parts/ImageTitleBlock.vue

<template>
  <div class="ImageTitleBlock" :style="{ backgroundImage: `url('${image}')` }">
    <div class="desc">
      <h5>{{ title }}</h5>
      <p>{{ desc }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({	
  title: {
    type: String,
    default: '' 
  },
  desc: {
    type: String,
    default: '' ,
  },
  image: {
    type: String,
    default: '' 
  },
})
</script>

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

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

  &::before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 120px;
    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;

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