<template>
  <div class="custom-cards">
    <img class="card-img" :src="img" alt="" />
    <div class="card-body">
      <div class="title">{{ title }}</div>
      <div class="content">{{ content }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 首页card
const props = defineProps<{
  img: string;
  title: string;
  content: string;
}>();
</script>

<style lang="less">
@import '@/style/variables.less';
.custom-cards {
  background: #2f2f2f;
  border: 1px solid #302e2f;
  border-radius: 15px;
  display: flex;
  box-sizing: border-box;
  cursor: pointer;
  .card-img {
    width: 160px;
    height: 160px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
  }
  .card-body {
    color: #ffffff;
    padding: 0 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .title {
      font-weight: 700;
      font-size: @font-size-20;
    }
    .content {
      font-weight: 300;
      font-size: @font-size-14;
      //   强制换行
      word-break: break-all;
    }
  }
}
</style>
