basic.vue 532 B

12345678910111213141516171819202122232425262728293031
  1. <template>
  2. <el-card class="box-card">
  3. <template #header>
  4. <div class="card-header">
  5. <span>Card name</span>
  6. <el-button class="button" text>Operation button</el-button>
  7. </div>
  8. </template>
  9. <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
  10. </el-card>
  11. </template>
  12. <style>
  13. .card-header {
  14. display: flex;
  15. justify-content: space-between;
  16. align-items: center;
  17. }
  18. .text {
  19. font-size: 14px;
  20. }
  21. .item {
  22. margin-bottom: 18px;
  23. }
  24. .box-card {
  25. width: 480px;
  26. }
  27. </style>