card-wrap.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <div class="card-wrap">
  3. <div class="header">
  4. <div class="h-c-wrap">
  5. <slot name="title"></slot>
  6. </div>
  7. </div>
  8. <div class="content">
  9. <slot name="content" class="slot"></slot>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. name: 'CardWrap',
  16. data() {
  17. return {}
  18. },
  19. watch: {},
  20. created() {
  21. },
  22. methods: {}
  23. }
  24. </script>
  25. <style scoped lang="scss">
  26. .card-wrap {
  27. width: 100%;
  28. height: 100%;
  29. display: flex;
  30. flex-direction: column;
  31. border: 1px solid teal;
  32. .header {
  33. height: 48px;
  34. width: 80%;
  35. flex-shrink: 0;
  36. background-image: url("/static/images/biaoti_short@2x.png");
  37. background-repeat: no-repeat;
  38. background-size: auto 34px;
  39. background-position: left bottom;
  40. font-size: 24px;
  41. color: white;
  42. padding-left: 15%;
  43. text-overflow: ellipsis;
  44. white-space: nowrap;
  45. overflow: hidden;
  46. display: flex;
  47. align-items: center;
  48. justify-content: center;
  49. & > .h-c-wrap {
  50. line-height: 1;
  51. }
  52. }
  53. .content {
  54. flex-grow: 1;
  55. width: 100%;
  56. & > div {
  57. height: 100%;
  58. }
  59. }
  60. }
  61. </style>