demo1.vue 540 B

12345678910111213141516171819202122232425262728
  1. <template>
  2. <m-card class="box-card">
  3. <template #header>
  4. <div class="card-header">
  5. <span>卡片名称</span>
  6. <m-button class="button" type="text">操作按钮</m-button>
  7. </div>
  8. </template>
  9. <div v-for="item in 4" :key="item" class="item">
  10. {{ '列表内容 ' + item }}
  11. </div>
  12. </m-card>
  13. </template>
  14. <style>
  15. .box-card {
  16. width: 480px;
  17. }
  18. .card-header {
  19. display: flex;
  20. justify-content: space-between;
  21. align-items: center;
  22. }
  23. .item {
  24. font-size: 14px;
  25. margin-bottom: 18px;
  26. }
  27. </style>