top-title.vue 1022 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <view class="title-box" :class="[pageScroll > 140 ? 'scroll-style' : '', androidFlag ? 'androidHeight' : 'iosHeight']">
  3. <view class="title-font" :style="{top:btnTop + 'px'}">{{titleValue}}</view>
  4. </view>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. name: "title-top",
  10. props: {
  11. titleValue: {
  12. type: String,
  13. default: 'Air企通',
  14. },
  15. pageScroll:{
  16. type:Number,
  17. default:0
  18. },
  19. btnTop:{
  20. type:Number,
  21. default:30
  22. },
  23. androidFlag:{
  24. type:Boolean,
  25. default:false
  26. },
  27. },
  28. data() {
  29. return {};
  30. },
  31. mounted() {
  32. console.log(this.btnTop,this.androidFlag)
  33. },
  34. methods: {
  35. },
  36. };
  37. </script>
  38. <style>
  39. .title-box {
  40. width: 100%;
  41. background: transparent;
  42. position: fixed;
  43. top: 0px;
  44. z-index: 9999;
  45. text-align: center;
  46. }
  47. .iosHeight{
  48. height: 145rpx;
  49. }
  50. .androidHeight{
  51. height: 200rpx;
  52. }
  53. .scroll-style {
  54. background: #4AA5E4;
  55. }
  56. .title-font {
  57. position: absolute;
  58. left: 41%;
  59. font-weight: bold;
  60. color: #fff;
  61. letter-spacing: 6rpx;
  62. }
  63. </style>