PageHeader.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <div class="page-header">
  3. <div class="page-header-index-wide">
  4. <s-breadcrumb />
  5. </div>
  6. </div>
  7. </template>
  8. <script>
  9. import Breadcrumb from '@/components/tools/Breadcrumb'
  10. export default {
  11. name: 'PageHeader',
  12. components: {
  13. 's-breadcrumb': Breadcrumb
  14. },
  15. props: {
  16. title: {
  17. type: [String, Boolean],
  18. default: true,
  19. required: false
  20. },
  21. logo: {
  22. type: String,
  23. default: '',
  24. required: false
  25. },
  26. avatar: {
  27. type: String,
  28. default: '',
  29. required: false
  30. }
  31. },
  32. data () {
  33. return {}
  34. }
  35. }
  36. </script>
  37. <style lang="less" scoped>
  38. .page-header {
  39. padding: 0 15px 0;
  40. .breadcrumb {
  41. margin-bottom: 0;
  42. }
  43. }
  44. .mobile .page-header {
  45. .main {
  46. .row {
  47. flex-wrap: wrap;
  48. .avatar {
  49. flex: 0 1 25%;
  50. margin: 0 2% 8px 0;
  51. }
  52. .content,
  53. .headerContent {
  54. flex: 0 1 70%;
  55. .link {
  56. margin-top: 16px;
  57. line-height: 24px;
  58. a {
  59. font-size: 14px;
  60. margin-right: 10px;
  61. }
  62. }
  63. }
  64. .extra {
  65. flex: 1 1 auto;
  66. margin-left: 0;
  67. min-width: 0;
  68. text-align: right;
  69. }
  70. .action {
  71. margin-left: unset;
  72. min-width: 266px;
  73. flex: 0 1 auto;
  74. text-align: left;
  75. margin-bottom: 12px;
  76. &:empty {
  77. display: none;
  78. }
  79. }
  80. }
  81. }
  82. }
  83. </style>