null/components/navbar-line.vue

<template>
	<view>
		<view class="cu-custom" :style="[{height:CustomBar + 'px'},{position: !hasPlacer ? 'absolute':'relative'}]">
			<view class="cu-bar" :style="{background:bgColor,height: CustomBar + 'px',paddingTop: StatusBar + 'px'}">
				<view class="bar-wrap">
					<slot />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar
			};
		},
		name: 'cu-custom',
		props: {
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			//默认设置relative
			hasPlacer:{
				type: Boolean,
				default: true
			}
		},
		computed:{
			
		},
		methods: {
		}
	}
</script>

<style scoped>
  .cu-custom {
      display: block;
      position: relative;
  }
  .cu-bar {
      display: flex;
	  position: fixed;
      width: 100%;
      top: 0;
	  left: 0;
	  right: 0;
      z-index: 1024;  
	  transition: background 1s linear;
	  /* box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1); */
	 
  }
   .bar-wrap{
	  position: relative;
	  width: 100%;
  }

</style>