在vue2中，使用elementui写一个页面，分为上中下三个部分，上面高20%，中间高40%，下面高40%，都是宽100%，上面有五个等分的card,中间和下面有两个

可以通过以下代码实现：

<template>
  <div class="page-container">
    <div class="top-section">
      <el-row>
        <el-col :span="5">
          <el-card>Card 1</el-card>
        </el-col>
        <el-col :span="5">
          <el-card>Card 2</el-card>
        </el-col>
        <el-col :span="5">
          <el-card>Card 3</el-card>
        </el-col>
        <el-col :span="5">
          <el-card>Card 4</el-card>
        </el-col>
        <el-col :span="4">
          <el-card>Card 5</el-card>
        </el-col>
      </el-row>
    </div>
    <div class="middle-section">
      <el-row>
        <el-col :span="24">
          <el-card>Center</el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom-section">
      <el-row>
        <el-col :span="24">
          <el-card>Bottom</el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style>
.page-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.top-section {
  height: 20%;
}
.middle-section {
  height: 40%;
}
.bottom-section {
  height: 40%;
}
</style>

此代码使用了 ElementUI 的 `<el-row>` 和 `<el-col>` 组件进行布局，并设置了每个 `<el-col>` 的宽度比例。同时，使用了 CSS 的 flex 布局实现了三个部分的高度占比，并在每个部分中放置了一个 `<el-card>` 组件。