elementui卡片式布局

ElementUI 提供了卡片式布局组件 `el-card`，可以用于创建漂亮的卡片式界面布局。下面是一个示例代码，展示如何使用 ElementUI 的卡片布局：

<template>
  <div>
    <el-card>
      <img src="card-image.jpg" class="card-image">
      <div class="card-content">
        <span class="card-title">Card Title</span>
        <p>This is the content of the card.</p>
      </div>
      <div class="card-footer">
        <el-button type="primary">Action 1</el-button>
        <el-button type="text">Action 2</el-button>
      </div>
    </el-card>
  </div>
</template>

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

.card-content {
  padding: 20px;
}

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

.card-footer {
  padding: 10px;
  text-align: right;
}
</style>

在上面的示例中，`<el-card>` 标签用于创建一个卡片容器。你可以在卡片中放置图像、内容和页脚等元素。通过添加自定义的 CSS 类，你可以对卡片的样式进行调整以满足你的需求。

请注意，上述示例代码中引用了一个 `card-image.jpg` 的图片文件，你需要替换为你自己的图片路径。

希望这个示例对你有帮助！如果有任何其他问题，请随时提问。