马宇豪
2023-07-21 fc38d1c92f01a224e8373c4425481bb1d85e2bf3
pages/tabBar/count/count.vue
@@ -1,15 +1,24 @@
<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="数据累积中,统计分析模块待呈现……"
                 icon="http://cdn.uviewui.com/uview/empty/data.png"
         >
         </u-empty>
      </view>
      <tabBar :currentPagePath="page"></tabBar>
   </view>
</template>
@@ -31,19 +40,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;
.box {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
}
.fix{
   position: sticky;
@@ -53,7 +68,25 @@
   width: 100%;
   z-index: 1;
}
.navBarBox .navBar {
      background-color:lightgrey;
      height: 45px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
}
.barText{
   text-align: center;
   width: 85%;
   font-size: 16px;
   /* text-align: center; */
   font-weight: 600;
}
.statusBar{
   background-color:lightgrey;
}
.content{
   margin-top: 50%;
}
</style>