fny-ugd-palace-uniapp/pages/signs/home/nav-bar/nav-bar.vue

<template>
	<view class="cu-custom" :style="[{ height: 0 + 'px' }]">
		<view class="cu-bar fixed" :style="style" :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
			<view class="action" v-if="isBack">
				<text class="cuIcon-back cu-back text-white" @tap="BackPage" v-if="showBackIcon"></text>
				<slot name="backText"></slot>
			</view>
			<view class="content text-white" style="font-weight: 600;" :style="[{ top: StatusBar + 'px' }]">
				<image src="/static/app/page1/nav_bg.png" mode="aspectFill" style="width: 129rpx;height: 53rpx;"></image>
			</view>
			<view style="margin-left: auto;margin-right: 15rpx;color: #fff;font-size: 14px;font-weight: 500;">
				<slot name="right"></slot>
			</view>
		</view>	
	</view>
</template>

<script>
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar
		};
	},
	name: 'cu-custom',
	computed: {
		style() {
			var StatusBar = this.StatusBar;
			var CustomBar = this.CustomBar;
			var bgImage = this.bgImage;
			var navOpacity = this.navOpacity;
			var style = `height:${CustomBar}px;padding-top:${StatusBar}px;background:rgba(255,255,255, ${navOpacity});`;
			return style;
		},
	},
	props: {
		navOpacity: {
			type: Number,
			default: 0
		},
		bgColor: {
			type: String,
			default: ''
		},
		linear: {
			type: Boolean,
			default: false
		},
		isBack: {
			type: [Boolean, String],
			default: false
		},
		showBackIcon: {
			type: Boolean,
			default: true
		},
		bgImage: {
			type: String,
			default: ''
		}
	},
	methods: {
		BackPage() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss">
	.liner-height{
		height: 20vh;
	}
	.fixed-bg{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 0;
		transform: translateZ(-100px);
		pointer-events: none;
		background-image:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
		mix-blend-mode: color-burn;
	}
	.text-white{
		color: #C5C5C5;
	}
</style>