App.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <script>
  2. import Vue from 'vue'
  3. // import app from './utils/api.js'
  4. export default {
  5. onLaunch: function() {
  6. uni.getSystemInfo({
  7. success: function (res) {
  8. Vue.prototype.screenHeight=res.screenHeight
  9. Vue.prototype.screenWidth=res.screenWidth
  10. console.log(res);
  11. const tabBarHeight = res.screenHeight - res.windowHeight;
  12. Vue.prototype.tabBarHeight=tabBarHeight
  13. if (uni.getMenuButtonBoundingClientRect()) {
  14. console.log('小程序');
  15. // 小程序状态栏是指显示电量的那一小部分
  16. thisWechat(res.statusBarHeight)
  17. }else{
  18. console.log('app');
  19. thisApp(res.statusBarHeight)
  20. }
  21. }
  22. });
  23. function thisWechat(statusBarHeight){
  24. // 获取胶囊位置
  25. let meunButtonInfo=uni.getMenuButtonBoundingClientRect()
  26. // console.log(meunButtonInfo);
  27. Vue.prototype.meunButtonInfo=meunButtonInfo.height
  28. // 计算出导航栏高度+动态栏
  29. let allHeight = meunButtonInfo.bottom + (meunButtonInfo.top - statusBarHeight )*2;
  30. // console.log(allHeight);
  31. let navheight;
  32. Vue.prototype.navheight=allHeight
  33. // 按钮离顶
  34. let alltop = meunButtonInfo.top
  35. Vue.prototype.navTop=alltop
  36. // 动态栏高度
  37. let statusHeight
  38. Vue.prototype.statusHeight=statusBarHeight
  39. };
  40. function thisApp(statusBarHeight){
  41. // console.log(uni.getSystemInfoSync());
  42. // 导航栏高度
  43. // let appAllHeight;console.log();
  44. // Vue.prototype.appAllHeight=statusBarHeight+44+'px';
  45. // console.log(statusBarHeight);
  46. let customBarHeight;
  47. if (uni.getSystemInfoSync().platform === 'android') {
  48. customBarHeight = statusBarHeight + 50;
  49. } else if (uni.getSystemInfoSync().platform === 'ios') {
  50. // iOS 平台
  51. // 在这里根据 iOS 平台的特性计算自定义状态栏高度
  52. // ...
  53. customBarHeight = statusBarHeight + 45;
  54. } else {
  55. // 其他平台
  56. // ...
  57. customBarHeight = statusBarHeight;
  58. }
  59. // console.log(customBarHeight);
  60. Vue.prototype.customBar = customBarHeight;
  61. }
  62. },
  63. onShow() {
  64. },
  65. onLoad() {
  66. }
  67. }
  68. </script>
  69. <style>
  70. /*每个页面公共css */
  71. body{
  72. background-color: #f0f2f5;
  73. /* font-family: PingFang SC; */
  74. }
  75. view{
  76. box-sizing: border-box;
  77. padding: 0;
  78. }
  79. /* 公共字体大小类 */
  80. .one-font{
  81. font-size: 48rpx;
  82. line-height: 72rpx;
  83. font-weight: 600;
  84. }
  85. .two-font{
  86. font-size: 40rpx;
  87. line-height: 56rpx;
  88. }
  89. .twoZ-font{
  90. font-size: 40rpx;
  91. line-height: 56rpx;
  92. font-weight: 500;
  93. }
  94. .three-font{
  95. font-size: 34rpx;
  96. line-height: 48rpx;
  97. font-weight: 500;
  98. }
  99. .num-font{
  100. font-size: 36rpx;
  101. line-height: 56rpx;
  102. font-weight: 700;
  103. }
  104. .bmTit-font{
  105. font-size: 36rpx;
  106. line-height: 44rpx;
  107. font-weight: 500;
  108. }
  109. .fNum-font{
  110. font-size: 44rpx;
  111. line-height: 56rpx;
  112. font-weight: 700;
  113. }
  114. .zw-font{
  115. font-size: 34rpx;
  116. line-height: 48rpx;
  117. }
  118. .btn-font{
  119. font-size: 28rpx;
  120. line-height: 40rpx;
  121. font-weight: 600;
  122. }
  123. .fwb-font{
  124. font-size: 28rpx;
  125. line-height: 40rpx;
  126. font-size: 400;
  127. }
  128. .sZw-font{
  129. font-size: 26rpx;
  130. line-height: 42rpx;
  131. font-size: 400;
  132. }
  133. .sBtn-font{
  134. font-size: 24rpx;
  135. line-height: 32rpx;
  136. font-weight: 600;
  137. }
  138. .fz-font{
  139. font-size: 24rpx;
  140. line-height: 32rpx;
  141. font-weight: 400;
  142. }
  143. .bq-font{
  144. font-size: 20rpx;
  145. line-height: 24rpx;
  146. }
  147. .bqZ-font{
  148. font-size: 20rpx;
  149. line-height: 24rpx;
  150. font-weight: 600;
  151. }
  152. </style>