<el-card>带图片、内容、操作按钮的卡片。循环的时候，一行固定五个，设置好相隔宽度，自动适应屏幕，先用死数据

好的，以下是使用死数据实现的示例代码：

<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in list" :key="item.id">
      <el-card>
        <div class="card-image">
          <img :src="item.imageUrl" alt="">
        </div>
        <div class="card-content">
          <p>{{ item.title }}</p>
          <p>{{ item.description }}</p>
        </div>
        <div class="card-actions">
          <el-button>{{ item.actionText }}</el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          imageUrl: 'https://picsum.photos/400/300/?image=100',
          title: 'Card 1',
          description: 'This is a card with a description.',
          actionText: 'Action 1'
        },
        {
          id: 2,
          imageUrl: 'https://picsum.photos/400/300/?image=200',
          title: 'Card 2',
          description: 'This is a card with a description.',
          actionText: 'Action 2'
        },
        {
          id: 3,
          imageUrl: 'https://picsum.photos/400/300/?image=300',
          title: 'Card 3',
          description: 'This is a card with a description.',
          actionText: 'Action 3'
        },
        {
          id: 4,
          imageUrl: 'https://picsum.photos/400/300/?image=400',
          title: 'Card 4',
          description: 'This is a card with a description.',
          actionText: 'Action 4'
        },
        {
          id: 5,
          imageUrl: 'https://picsum.photos/400/300/?image=500',
          title: 'Card 5',
          description: 'This is a card with a description.',
          actionText: 'Action 5'
        },
        {
          id: 6,
          imageUrl: 'https://picsum.photos/400/300/?image=600',
          title: 'Card 6',
          description: 'This is a card with a description.',
          actionText: 'Action 6'
        },
        {
          id: 7,
          imageUrl: 'https://picsum.photos/400/300/?image=700',
          title: 'Card 7',
          description: 'This is a card with a description.',
          actionText: 'Action 7'
        },
        {
          id: 8,
          imageUrl: 'https://picsum.photos/400/300/?image=800',
          title: 'Card 8',
          description: 'This is a card with a description.',
          actionText: 'Action 8'
        },
        {
          id: 9,
          imageUrl: 'https://picsum.photos/400/300/?image=900',
          title: 'Card 9',
          description: 'This is a card with a description.',
          actionText: 'Action 9'
        },
        {
          id: 10,
          imageUrl: 'https://picsum.photos/400/300/?image=1000',
          title: 'Card 10',
          description: 'This is a card with a description.',
          actionText: 'Action 10'
        }
      ]
    };
  }
};
</script>

<style>
  .card-image {
    height: 150px;
    overflow: hidden;
  }
  .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .card-content {
    padding: 20px;
    text-align: center;
  }
  .card-actions {
    padding: 0 20px 20px;
    text-align: center;
  }
</style>

请注意，这里使用了`picsum.photos`作为图片占位符，因此每次刷新页面时图片会变化。如果您需要使用真实的图片，请替换`imageUrl`的值为您自己的图片地址。