TopHeaderfixed.vue 766 B

123456789101112131415161718192021222324252627282930313233343536
  1. <template>
  2. <view class="headerBg">
  3. <view :style="{ height: `${getHeight.barTop}px` }"></view>
  4. <view :style="{ height: `${getHeight.barHeight}px` }"></view>
  5. <view class="inner"></view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. name: "TopHeaderfixed",
  11. data(){
  12. return {
  13. getHeight: this.$util.getWXStatusHeight(),
  14. }
  15. },
  16. }
  17. </script>
  18. <style scoped lang="scss">
  19. .headerBg {
  20. position: absolute;
  21. top: 0;
  22. left: 0;
  23. width: 100%;
  24. background-image: linear-gradient(360deg, #F5F5F5 0%, rgba(245, 245, 245, 0) 100%),
  25. linear-gradient(270deg, #01ABF8 0%, #2A7EFB 100%);
  26. background-position: left bottom, left top;
  27. background-repeat: no-repeat;
  28. background-size: 100% 120rpx, 100% 100%;
  29. .inner {
  30. height: 356rpx;
  31. }
  32. }
  33. </style>