top-title.vue 925 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <view class="title-box" :class="[pageScroll > 140 ? 'scroll-style' : '', btnTop > 35 ? '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: '爱企通',
  14. },
  15. pageScroll:{
  16. type:Number,
  17. default:0
  18. },
  19. btnTop:{
  20. type:Number,
  21. default:0
  22. },
  23. },
  24. data() {
  25. return {};
  26. },
  27. mounted() {
  28. },
  29. methods: {
  30. },
  31. };
  32. </script>
  33. <style>
  34. .title-box {
  35. width: 100%;
  36. background: transparent;
  37. position: fixed;
  38. top: 0px;
  39. z-index: 9999;
  40. text-align: center;
  41. }
  42. .iosHeight{
  43. height: 145rpx;
  44. }
  45. .androidHeight{
  46. height: 200rpx;
  47. }
  48. .scroll-style {
  49. background: #4AA5E4;
  50. }
  51. .title-font {
  52. position: absolute;
  53. left: 41%;
  54. font-weight: bold;
  55. color: #fff;
  56. letter-spacing: 6rpx;
  57. }
  58. </style>