<script setup lang="ts">
import { Management } from '@element-plus/icons-vue'
</script>

<template>
  <div class="flex flex-wrap wrap">
    <el-card class="mb-20px ">
      <template #header>
        <el-button class="w-full">向量搜索</el-button>
      </template>
      <el-input rows="10"  type="textarea" />
    </el-card>
    <el-card v-for="index in 5" :key="index" class="mb-20px ">
      <template #header>
        <div class="flex items-center">
            <el-icon class="mr-10px ">
              <Management class="text-18px  color-[var(--el-color-primary)]"/>
            </el-icon>
           <span class="">首席信息</span>
        </div>
      </template>
      <div class="inner"></div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.wrap {
  &>div {
    width: calc((100% - 40px) / 3);
    margin-right: 20px;
    &:nth-child(3n) {
      margin-right: 0px;
    }
  }
}
.inner {
  height: 220px;
}
.el-card:not(:first-child) {
  background-color: mix(grey, #fff, 10%);
}
//div {
//  display: grid;
//  grid-template-columns: repeat(3, 1fr);
//  gap: 20px;
//}
</style>
