el-card 多列表带图片

`el-card`是Element UI库中的一个组件，主要用于创建卡片样式的内容区域，通常用于显示单个或多个内容块。如果你想在`el-card`中展示多列表并包含图片，你可以这样做：

1. 首先，在HTML中，创建一个`el-row`或者`el-col`来组织你的列，每个列可以是一个`el-card`元素：

<el-row>
  <el-col :xs="12" :sm="6" v-for="(item, index) in items" :key="index">
    <el-card>
      <img :src="item.image" alt="图片描述" class="card-image">
      <div class="card-body">
        <h3 class="card-title">{{ item.title }}</h3>
        <p class="card-description">{{ item.description }}</p>
      </div>
    </el-card>
  </el-col>
</el-row>

这里，`items`是一个数组，包含了你要展示的每张图片及其相关的标题和描述。

2. 在Vue.js组件中，你需要设置`items`数据，并绑定到HTML模板上：

export default {
  data() {
    return {
      items: [
        { image: 'image1.jpg', title: '图片1标题', description: '图片1描述' },
        // ... 其他项...
      ]
    };
  }
};

3. CSS部分可以添加样式美化图片和卡片，如调整大小、间距等：

.card-image {
  width: 100%; /* 或者自适应高度 */
  height: auto;
}

.card-body {
  padding: 1rem; /* 根据需要调整 */
}