graceNvueHeader.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <view>
  3. <view class="grace-header" :style="{backgroundImage:background, height:viewHeight+'px', 'padding-top':top+'px'}">
  4. <slot></slot>
  5. </view>
  6. <!-- 占位 view -->
  7. <view :style="{height:viewHeight+'px'}" v-if="isSeize"></view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. props: {
  13. background:{
  14. type : String,
  15. default : "linear-gradient(to right, #3688FF, #3688FF)"
  16. },
  17. height:{
  18. type : Number,
  19. default : 90
  20. },
  21. haveStatusBar:{
  22. type : Boolean,
  23. default : true
  24. },
  25. isSeize: {
  26. type: Boolean,
  27. default: true
  28. }
  29. },
  30. data(){
  31. return{
  32. top : 0,
  33. BoundingWidth :'0px',
  34. viewHeight : 80
  35. }
  36. },
  37. created:function(){
  38. var res = uni.getSystemInfoSync();
  39. this.top = res.statusBarHeight;
  40. this.viewHeight = uni.upx2px(this.height) + this.top;
  41. }
  42. }
  43. </script>
  44. <style scoped>
  45. .grace-header{width:750rpx; position:fixed; left:0; top:0; height:44px; flex-direction:row; flex-wrap:nowrap;}
  46. .grace-header-main{width:750rpx; flex:1;}
  47. </style>