headContent - 副本.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <view class="head" :style="{'padding-top': `${statusBarHeight}px` , 'background-color': bgColor}">
  3. <template v-if="showHead">
  4. <view :class="['head-content' , fixed ? 'content-fixed' : '']" :style="{'background-color': bgColor}">
  5. <view v-if="fixed" :style="{'padding-top': `${statusBarHeight}px`}"></view>
  6. <view class="content-box" :style="{'height':headHeight}">
  7. <view class="left" v-if="showleftRight" :style="{'width': leftRightWidth}">
  8. <slot name="left"></slot>
  9. </view>
  10. <view class="content">
  11. <slot name="content"></slot>
  12. </view>
  13. <view class="right" v-if="showleftRight" :style="{'width': leftRightWidth}">
  14. <slot name="right"></slot>
  15. </view>
  16. </view>
  17. </view>
  18. <!-- 当标题烂定位时,占位 -->
  19. <view v-if="fixed" class="placeholder-view" :style="{'height':headHeight}"></view>
  20. </template>
  21. </view>
  22. </template>
  23. <script>
  24. import {
  25. mapGetters
  26. } from 'vuex'
  27. export default {
  28. name: "headContent",
  29. props: {
  30. bgColor: {
  31. type: String,
  32. default: '#fff'
  33. },
  34. fixed: {
  35. type: Boolean,
  36. default: true
  37. },
  38. showleftRight: {
  39. type: Boolean,
  40. default: true
  41. },
  42. showHead: {
  43. type: Boolean,
  44. default: true
  45. },
  46. leftRightWidth: {
  47. type: String,
  48. default: "30%"
  49. },
  50. },
  51. data() {
  52. return {
  53. };
  54. },
  55. computed: {
  56. ...mapGetters([
  57. 'statusBarHeight',
  58. 'headHeight'
  59. ]),
  60. }
  61. }
  62. </script>
  63. <style scoped lang="scss">
  64. .head {
  65. width: 750rpx;
  66. .head-content {
  67. width: 100%;
  68. .content-box {
  69. width: 100%;
  70. padding: 0 $pages-padding;
  71. display: flex;
  72. justify-content: space-between;
  73. align-items: center;
  74. .left,
  75. .right {
  76. flex-shrink: 0;
  77. }
  78. .left,
  79. .right,
  80. .content {
  81. height: 100%;
  82. display: flex;
  83. align-items: center;
  84. }
  85. .content {
  86. flex: 1;
  87. justify-content: center;
  88. }
  89. ::v-deep .haed-title {
  90. font-size: 36rpx;
  91. font-family: PingFang SC, PingFang SC-Bold;
  92. font-weight: 700;
  93. text-align: center;
  94. color: #1a1a1a;
  95. letter-spacing: -0.72rpx;
  96. }
  97. ::v-deep .head-icon {
  98. width: 42rpx;
  99. height: 40rpx;
  100. image {
  101. width: 100%;
  102. height: 100%;
  103. }
  104. }
  105. .right {
  106. justify-content: flex-end;
  107. ::v-deep .head-icon+.head-icon {
  108. margin-left: 20rpx;
  109. }
  110. }
  111. }
  112. }
  113. .placeholder-view {
  114. width: 100%;
  115. }
  116. .content-fixed {
  117. position: fixed;
  118. left: 0;
  119. top: 0;
  120. z-index: 1;
  121. }
  122. }
  123. </style>