pendulum/web/src/components/ProductCard/index.vue

<script setup lang="ts">
import ArrowRight from '@/assets/icons/arrow-right.svg'

defineProps({
  title: {
    type: String,
    required: true
  },
  image: {
    type: String,
    required: true
  },
  details: {
    type: Array as () => string[],
    default: () => []
  },
  link: {
    type: String,
    default: '#'
  }
})
</script>

<template>
  <div class="product-card">
    <img :src="image" :alt="title">
    <div class="product-info">
      <h4>{{ title }}</h4>
      <div class="product-details">
        <div v-for="(detail, index) in details" :key="index">{{ detail }}</div>
      </div>
      <a v-if="link" :href="link" class="learn-more">
        了解更多
        <img :src="ArrowRight" alt="arrow right" class="arrow-icon">
      </a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.product-card {
  background: white;
  padding: 20px;
  border-radius: 4px;
  display: flex;
  gap: 20px;

  img {
    width: 64px;
    height: 64px;
    object-fit: contain;
  }

  .product-info {
    flex: 1;

    h4 {
      margin-bottom: 12px;
      font-size: 18px;
    }

    .product-details {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(0, 0, 0, 0.65);
    }

    .learn-more {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #0070D5;
      text-decoration: none;
      margin-top: 12px;
      font-size: 14px;

      .arrow-icon {
        width: 5px;
        height: 10px;
      }

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>