导航栏退出登录

zhouwenxuan

2023-09-06 0b2357a173a2bc52f3532bfcf93ff31daf226231

 pages/tabBar/count/count.vue

@@ -1,15 +1,20 @@
<template>
   <view>
   <view class="box">
      <!-- 自定义导航栏 -->
      <view class="navBarBox fix">
         <!-- 状态栏占位 -->
         <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
         <!-- 真正的导航栏内容 -->
         <view class="navBar">
            <view class="barText"></view>
         <view style="display: flex; flex-direction: column;">
            <view class="navBar">
               <u-icon style=" margin-left: -25px;" name="arrow-left" color="black" size="17" @click="goBack" />
               <view class="barText">统计</view>
            </view>
         </view>
      </view>
      <text>信息统计模块待呈现</text>
      <view class="content">
         <u-empty text="数据累积中，统计分析模块待呈现……" mode="data"></u-empty>
      </view>
      <tabBar :currentPagePath="page"></tabBar>
   </view>
</template>
@@ -31,19 +36,25 @@
         //获取手机状态栏高度
         this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
         uni.hideTabBar();
      },
      methods: {
         goBack() {
            console.log("1111")
            uni.switchTab({
                url:'/pages/tabBar/firstPage/firstPage'
            });
         },
      }
   }

</script>

<style>
.navBarBox .navBar {
   background-color:lightgrey;
   height: 15px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
<style lang='scss' scoped>
.box {
   display: flex; 
   flex-direction: column; 
   width: 100%; 
   height: 100%;
}
.fix{
   position: sticky;
@@ -53,7 +64,26 @@
   width: 100%;
   z-index: 1;
}
.navBarBox .navBar {
   background-color:#fff;
     height: 50px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.barText{
   text-align: center;
   width: 85%;
   font-size: 16px;
   /* text-align: center; */
   font-weight: 600;
}
.statusBar{
   background-color:lightgrey;
}
.content{
   margin-top: 50%;
}
</style>