assess-app/components/en-utils/en-nav/en-nav.vue

<template>
	<view class="top-nav-bg" :style="{'background-image':`url(${bgList[genre].bg_path})`}">
		<view class="header" style="z-index: 3;" :style="[{color},{height},{paddingTop},{justifyContent:justify}]">
			<view class="left" :style="[{color},{paddingTop}]" v-if="back" @click="onBack">
				<image class="back" src="/static/img/tabBar/nav-back.png"></image>
			</view>
			<view class="title" :style="[{marginLeft:justify == 'left'?'30rpx':0},{fontSize}]">
				<uni-icons class="m-r10" type="calendar" size="22" color="#fff" v-if="is_icons"></uni-icons>
				<text>{{title}}</text>
			</view>
		</view>
		<view :style="[{height:is_fixed? `${$tools.topHeight()+bgHeight}px`:`${$tools.topHeight()+fixedHeight}px`}]">
		</view>
		<!-- 带背景插槽 start-->
		<slot></slot>
		<!-- 带背景插槽 end-->
		<image class="header" style="width: 100%;z-index: 2;"
			:style="[{height:is_fixed?`${$tools.topHeight()+navsHeight}px` :`${$tools.topHeight()+fixedHeight}px`},{opacity:is_fixed?navOpacity:1},]"
			:src="bgList[genre].nav_path" mode="">
		</image>
		<!-- :src="genre == 0?'/static/img/index/top-nav.png':'/static/img/enNav/tab.png'" mode=""> -->
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif

	export default {
		data() {
			return {
				height: 0,
				paddingTop: 0,
				navOpacity: 0,
				navHeight: 0,
				bgList: [{
					bg_path: 'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/index/index-bg.png?imageMogr2/quality/20',
					nav_path: '/static/img/index/top-nav.png '
				}, {
					bg_path: 'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-nav-bg.png',
					nav_path: '/static/img/enNav/tab.png'
				}, {
					bg_path: '',
					nav_path: ''
				}, {
					bg_path: '',
					nav_path: ''
				}],
			}
		},
		props: {
			genre: {
				type: Number,
				default: 0
			},
			type: {
				type: Number,
				default: 0
			},
			fontSize: {
				type: String,
				default: '32rpx'
			},
			title: {
				type: String,
				default: ''
			},
			justify: {
				type: String,
				default: 'center'
			},
			color: {
				type: String,
				default: '#333'
			},
			opacity: {
				type: Number,
				default: 0
			},
			back: {
				type: Boolean,
				default: true
			},
			is_fixed: {
				type: Boolean,
				default: false
			},
			is_filter: {
				type: Boolean,
				default: false
			},
			is_icons: {
				type: Boolean,
				default: false
			},
			fixedHeight: {
				type: Number,
				default: 0
			},
			bgHeight: {
				type: Number,
				default: 0
			},
			navsHeight: {
				type: Number,
				default: 0
			},
		},

		created() {
			const navTop = uni.getMenuButtonBoundingClientRect()
			this.height = navTop.height + 'px'
			this.paddingTop = navTop.top + 'px'
			this.navHeight = `${navTop.height+navTop.top}px`
		},
		watch: {
			opacity(newValue, oldValue) {
				this.navOpacity = newValue;
			}
		},

		methods: {
			// 左侧返回按钮调用
			onBack() {
				uni.navigateBack()
				this.$emit('onBack')
			},
			getTopBg(type) {
				switch (type) {
					case 0:
						return 'nav-bg1'
					case 0:
						return 'nav-bg1'
					case 0:
						return 'nav-bg1'
					default:
						break;
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.header {
		position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		z-index: 1;
		padding-bottom: 10rpx;
		top: 0;

		.left {
			float: left;
			position: absolute;
			width: 100rpx;
			height: 42rpx;
			top: 0;
			bottom: 0;
			left: 30rpx;
			color: #fff;
			margin: auto;

			.back {
				width: 25rpx;
				height: 35rpx;
			}
		}

		.title {
			font-size: 32rpx;
			font-weight: bold;
			font-family: Source Han Sans CN;
		}
	}

	.top-nav-bg {
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.nav-bg2 {
		background-image: url("https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/index/index-bg.png?imageMogr2/quality/20");
	}
</style>