uniDataCenter/components/page-head.vue

<template name="page-head">
	<view class="topBar" :class="bg_jb?'bg_jb':''" :style="'padding-top:'+buttonTop+'px;height:'+statusNavBarHeight+'px;color:'+color">
		<slot v-if="slotFlag"></slot>
		<template v-else>
		  <view class="back" :style="'height:'+buttonHeight+'px'" v-if="isBack" @click="back">
		  </view>
		  <text class="topBar_title" :style="'top:'+buttonTop+'px;line-height:'+buttonHeight+'px'">{{title}}</text>
		</template>
	</view>
</template>

<script>
	export default {
		name:"page-head",
		props: {
			title: {
				type: String,
				default: "问星数据 - 抖音版"
			},
			background:{
				type:String,
				default:"#f2f2f2"
			},
			color:{
				type:String,
				default:"#666666"
			},
			isBack:{
				type:Boolean,
				default:false
			},
			slotFlag:{
				type:Boolean,
				default:false
			},
			bg_jb:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				buttonTop:this.$store.state.systemInfo.safeAreaInsets.top,
				statusNavBarHeight:this.$store.state.systemInfo.safeAreaTop,
				buttonHeight:this.$store.state.systemInfo.statusBarHeight,
			};
		},
		methods:{
			back(){
			  let pages = getCurrentPages(); //页面对象
			  let prevpage = pages[pages.length - 2]; 
			  if(prevpage) {
				  uni.navigateBack()
			  }else {
				  uni.redirectTo({
					url:'../pages/index/index?page=homePage'
				  })
			  }
			}
		}
	}
</script>

<style>
.topBar{
  position: fixed;
  left: 0;
  top: 0rpx;
  width: 100%;
  height: var(--status-bar-height);;
  color: #FFFFFF;
  z-index: 999;
  box-sizing: border-box;
  background: #333947;
}
.bg_jb{
	background: linear-gradient(180deg, #27282F 0%, #585C6D 100%);
}
.topBar_title{
  font-size: 32rpx;
  line-height: 44rpx;
  position: absolute;
  width: 50%;
  left: 0;
  right: 0;
  margin:auto;
  text-align: center;
}
.back {
  width: 80rpx;
  height: 40rpx;
  margin-left: 10rpx;
  position: relative;
}
.back_image{
  width: 34rpx;
  height: 34rpx;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>