ContentBlock.vue 880 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <div class="block-content">
  3. <div class="container-title">
  4. {{ title }}
  5. </div>
  6. <slot name="content"></slot>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. name: 'ContentBlock',
  12. props: {
  13. title: {
  14. type: String,
  15. default: '',
  16. },
  17. },
  18. computed: {},
  19. watch: {},
  20. };
  21. </script>
  22. <style lang="scss" scoped>
  23. .block-content {
  24. padding: 10px 15px;
  25. box-sizing: border-box;
  26. background: rgba(1, 11, 33, 0.91);
  27. border-radius: 6px;
  28. > :not(:first-child) {
  29. margin-top: 20px;
  30. }
  31. .container-title {
  32. display: flex;
  33. justify-content: left;
  34. align-items: center;
  35. color: #fefefe;
  36. font-family: AlimamaShuHeiTi-Bold;
  37. width: 100%;
  38. height: 30px;
  39. font-size: 14px;
  40. background: url("./img/block-header-bg.png") 100% 100% no-repeat;
  41. background-size: 100% 100%;
  42. letter-spacing: 1px;
  43. }
  44. }
  45. </style>