Vue 卡片组件示例：优雅展示内容

<template>
  <div>
    <div class='card'>
      <img :src='image' alt='Card Image' class='card-image' />
      <div class='card-content'>
        <h3 class='card-title'>{{ title }}</h3>
        <p class='card-description'>{{ description }}</p>
        <a :href='link' class='card-link'>Read More</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Card',
  props: {
    image: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    },
    link: {
      type: String,
      required: true
    }
  }
}
</script>
<style scoped>
.card {
  width: 300px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 16px;
}

.card-title {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.card-description {
  margin: 8px 0;
  font-size: 16px;
  color: #666;
}

.card-link {
  display: inline-block;
  padding: 8px 16px;
  background-color: #2c3e50;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.card-link:hover {
  background-color: #34495e;
}
</style>
<p>这是一个基本的卡片组件，您可以使用它来显示您的内容。在使用此组件时，您可以传递 'image'、'title'、'description' 和 'link' 属性，分别代表卡片的图片、标题、描述和链接。根据您的需求，可以自定义组件的样式和内容。</p>
<p>请注意，这只是一个简单的示例，您可以根据自己的需求进行修改和扩展。希望这可以帮到您！如果您还有其他问题，请随时提问。</p>