nav.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <template>
  2. <view class="" >
  3. <!-- 自定义导航 -->
  4. <view class="zdyNavBox" v-if="bgColor" :style="{background: bgColor}">
  5. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  6. <view class="zdyNav">
  7. <view class="zdyNavLeft">
  8. <image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback"></image>
  9. <view class="navsx"></view>
  10. <image src="../../static/img/nav_icon_home.png" mode="" class="homeImg" @click="gohome"></image>
  11. </view>
  12. <view class="zdyNavTitle">{{title}}</view>
  13. <view style="width: 250rpx;"></view>
  14. </view>
  15. </view>
  16. <view class="zdyNavBox" v-else>
  17. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  18. <view class="zdyNav">
  19. <view class="zdyNavLeft">
  20. <image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback"></image>
  21. <view class="navsx"></view>
  22. <image src="../../static/img/nav_icon_home.png" mode="" class="homeImg" @click="gohome"></image>
  23. </view>
  24. <view class="zdyNavTitle">{{title}}</view>
  25. <view style="width: 250rpx;"></view>
  26. </view>
  27. </view>
  28. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  29. <view style="height: 44px;"></view>
  30. </view>
  31. </template>
  32. <script>
  33. export default {
  34. props:['title','iStatusBarHeight','cj','bgColor'],
  35. data() {
  36. return {
  37. }
  38. },
  39. onLoad(opt) {
  40. //this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  41. },
  42. onShow() {
  43. },
  44. methods: {
  45. goback() {
  46. uni.navigateBack({
  47. delta: 1
  48. })
  49. },
  50. gohome(){
  51. console.log(23+this.cj)
  52. if(this.cj==3){
  53. //console.log(123)
  54. uni.switchTab({
  55. url:'../../index/index'
  56. })
  57. }else if(this.cj==4){
  58. uni.switchTab({
  59. url:'/pages/index/index'
  60. })
  61. }else{
  62. uni.switchTab({
  63. url:'../index/index'
  64. })
  65. }
  66. },
  67. }
  68. }
  69. </script>
  70. <style scoped>
  71. .zdyNavBox{
  72. width: 100vw;
  73. background: #FFFFFF;
  74. position: fixed;
  75. top: 0;
  76. left: 0;
  77. z-index: 9999999;
  78. }
  79. .zdyNav{
  80. height: 44px;
  81. display: flex;
  82. justify-content: space-between;
  83. align-items: center;
  84. }
  85. .backImg{
  86. width: 44rpx;
  87. height: 44rpx;
  88. /* margin-left: 10rpx; */
  89. /* margin-right: 20rpx; */
  90. }
  91. .navsx{
  92. width: 2rpx;
  93. height: 44rpx;
  94. background: #e1e1e1;
  95. margin: 0 26rpx 0rpx 18rpx;
  96. }
  97. .homeImg{
  98. width: 44rpx;
  99. height: 44rpx;
  100. }
  101. .zdyNavLeft{
  102. display: flex;
  103. align-items: center;
  104. border: 1px solid #e1e1e1;
  105. margin-left: 15rpx;
  106. border-radius: 35rpx;
  107. padding: 10rpx 23rpx 8rpx 13rpx;
  108. }
  109. .zdyNavTitle{
  110. width: 100vw;
  111. height: 44px;
  112. /* background: #FFFFFF; */
  113. text-align: center;
  114. font-size: 34rpx;
  115. line-height: 44px;
  116. }
  117. </style>