index.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <div class="basic-card">
  3. <div v-if="title" class="basic-card__title">
  4. <span class="divider"></span>
  5. <span class="title">{{ title }}</span>
  6. <div class="actions">
  7. <slot name="actions"></slot>
  8. </div>
  9. </div>
  10. <div class="basic-card__content">
  11. <slot></slot>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. name: "BasicCard",
  18. props: {
  19. title: String,
  20. },
  21. };
  22. </script>
  23. <style lang="scss" scoped>
  24. @import "~@/styles/variables.scss";
  25. .basic-card {
  26. background: #fff;
  27. border-radius: 3px;
  28. padding: 5px 20px 20px;
  29. box-sizing: border-box;
  30. &__title {
  31. padding-bottom: 5px;
  32. line-height: 40px;
  33. .divider {
  34. display: inline-block;
  35. width: 4px;
  36. height: 20px;
  37. background-color: $mainBg;
  38. margin-right: 10px;
  39. vertical-align: middle;
  40. }
  41. .title {
  42. display: inline-block;
  43. color: #333;
  44. font-weight: 600;
  45. vertical-align: middle;
  46. font-size: 16px;
  47. margin-bottom: 2px;
  48. }
  49. .actions {
  50. float: right;
  51. }
  52. }
  53. }
  54. </style>