sklineHeader.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <view class="scrollPage-header">
  3. <view :style="{height:statusBarHeight+'px'}"></view>
  4. <view class="header-title">
  5. <view class="header-left" @click="goBack">
  6. <image style="width: 16px; height: 16px;margin-right:3px;" mode="aspectFit" src="/static/arrow-left.png"></image>
  7. <text>返回</text>
  8. </view>
  9. <view class="header-title"><text class="ellipsis-one" overflow="ellipsis">{{title}}</text></view>
  10. <view class="header-right">
  11. </view>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. name: "sklineHeader",
  18. props: {
  19. title: {
  20. type: String,
  21. default: '标题'
  22. },
  23. },
  24. data() {
  25. return {
  26. statusBarHeight: 0,
  27. };
  28. },
  29. created() {
  30. this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  31. },
  32. methods: {
  33. goBack() {
  34. uni.navigateBack();
  35. },
  36. }
  37. }
  38. </script>
  39. <style lang="less">
  40. .scrollPage-header{
  41. z-index: 1;
  42. .header-title{
  43. display: flex;
  44. align-items: center;
  45. justify-content: space-between;
  46. padding: 0 10px;
  47. height: 44px;
  48. background-color: #FFFFFF;
  49. box-shadow: 0px 1px 0px 0px #E6E6E6;
  50. .header-title{
  51. font-size: 16px;
  52. color: #333333;
  53. max-width: 70%;
  54. }
  55. .header-left{
  56. display: flex;
  57. align-items: center;
  58. text{
  59. font-size: 14px;
  60. color: #333333;
  61. margin-left: 5px;
  62. }
  63. }
  64. .header-right{
  65. width: 50px;
  66. }
  67. }
  68. }
  69. </style>