title.vue 618 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <div class="title_diy">
  3. <h3>{{ heads }}</h3>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. head: ''
  11. }
  12. },
  13. props: {
  14. //第二种方式
  15. heads: {
  16. type: String,
  17. default: function() {
  18. return ''
  19. }
  20. }
  21. },
  22. created() {
  23. },
  24. watch: {}
  25. }
  26. </script>
  27. <style>
  28. .title_diy {
  29. width: 100%;
  30. height: 6rem;
  31. line-height: 6rem;
  32. position: relative;
  33. }
  34. .title_diy::after {
  35. position: absolute;
  36. height: 1px;
  37. background-color: #f0f0f0;
  38. left: 0;
  39. right: 0;
  40. bottom: 0;
  41. margin-left: -1.5rem;
  42. margin-right: -1.5rem;
  43. }
  44. </style>