siyu_app/components/es-nav-bg/es-nav-bg.vue

<template>
	<view>
		<!-- <view class="bg-img" style="position: absolute;top:0;width: 100%;height: 600rpx;background-image: url(/static/image/home/home_top_bg.png)"></view> -->
		<image src="/static/image/home/home_top_bg.png" style="width: 100%;position: absolute;top:0;left:0;z-index: 0;" mode="widthFix"></image>
		<block v-if="title">
			<view class="es-fix-top" :class="css">
				<view class="" :style="top_color?('background:'+top_color):''" id="div-top">
					<es-top></es-top>
					<es-nav-title-base :title="title"></es-nav-title-base>
				</view>
			</view>
			<es-top></es-top>
			<view class="es-h-88"></view>
		</block>
		<block v-else>
			<view class="es-fix-top" :class="css">
				<view class="" :style="top_color?('background:'+top_color):''" id="div-top">
					<es-top></es-top>
					<slot></slot>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: "es-nav-bg",
		data() {
			return {
				top_color: 'rgba(0,0,0,0)',
				h: 64,
			};
		},
		props: [
			'title', 'css'
		],
		created: function() {
			if (!this.title) {
				setTimeout(e => {
					try {
						uni.createSelectorQuery().select('#div-top').boundingClientRect(r2 => {
							if (r2) {
								this.h = r2.height;
							}
						}).exec();
					} catch (e) {
						//TODO handle the exception
					}
				}, 50)
			} else {

			}
		},
		methods: {
			scrollBody: function(e) {
				let top = e.scrollTop / this.h;
				this.top_color = 'rgba(255,92,3, ' + top + ')';
			}
		}
	}
</script>

<style>
	.bg-img {
		/* background-image: url(@/static/image/home/home_top_bg.png); */
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
</style>