elementui 实现12个卡片，每行4个，每个卡片的上面放置图片下面放置文字。点击卡片可以用vue-router实现跳转页面

以下是一个简单的示例代码：

<template>
  <div class="card-container">
    <el-card v-for="card in cards" :key="card.id" :header="card.title" @click="goToPage(card.id)">
      <img :src="card.image" class="card-image">
      <p class="card-text">{{ card.description }}</p>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        {
          id: 1,
          title: 'Card 1',
          image: 'path/to/image1.jpg',
          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
          id: 2,
          title: 'Card 2',
          image: 'path/to/image2.jpg',
          description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
        },
        // ... add more cards here
      ]
    }
  },
  methods: {
    goToPage(id) {
      this.$router.push(`/card/${id}`)
    }
  }
}
</script>

<style>
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px;
}

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

.card-text {
  margin-top: 10px;
}
</style>

这个示例使用了 ElementUI 的 `el-card` 组件来实现卡片效果，使用了 `v-for` 指令来渲染数据。每个卡片的点击事件调用了 `goToPage` 方法来实现路由跳转，其中的 `$router` 对象是 Vue Router 提供的路由实例。在实际使用中，需要将路由的配置和组件的导入等工作完成才能正常运行。