demo3.vue 691 B

12345678910111213141516171819202122232425262728293031
  1. <template>
  2. <m-row>
  3. <m-col
  4. v-for="(item, index) in 2"
  5. :key="item"
  6. :span="8"
  7. :offset="index > 0 ? 2 : 0"
  8. >
  9. <m-card :body-style="{ padding: '0px' }">
  10. <h2 style="padding:0 10px">这是一段标题</h2>
  11. <div style="padding: 14px">
  12. <span>卡片名称</span>
  13. <div class="bottom">
  14. <p>什么是快乐星球</p>
  15. <m-button class="button" type="text">操作按钮</m-button>
  16. </div>
  17. </div>
  18. </m-card>
  19. </m-col>
  20. </m-row>
  21. </template>
  22. <style>
  23. .bottom {
  24. margin-top: 13px;
  25. line-height: 12px;
  26. display: flex;
  27. justify-content: space-between;
  28. align-items: center;
  29. }
  30. </style>