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

<template>
	<view>
		<block v-if="mode=='cover'">
			<cover-view class="es-fix-top">
				<cover-view class="top-img"></cover-view>
			    <cover-view class="top-close flex x-ac" >
					<cover-image @tap="close" class="es-w-18 es-h-31"  src="/static/images/other/ret-white.png" ></cover-image>
					<cover-view @tap="close"  class="es-fw-500 es-c-white es-fs-30 ">返回</cover-view>
				</cover-view>
				<cover-view  class="es-h-88"></cover-view>
				<es-top></es-top>
			</cover-view>
		</block>
		<block v-else-if="mode=='fav'">
			<cover-view class="es-fix-top">
				<!-- <cover-image class="top-img" src="/static/image/home/home_top_bg.png"></cover-image> -->
				<cover-view class="top-img"></cover-view>
				<cover-view class="top-close flex x-ac" >
					<cover-image @tap="close" class="es-w-18 es-h-31"  src="/static/images/other/ret-white.png" ></cover-image>
					<cover-view @tap="close"  class="es-fw-500 es-c-white es-fs-30 ">返回</cover-view>
				</cover-view>
				<cover-view  class="es-h-88" ></cover-view>
				<es-top></es-top>
			</cover-view>
		</block>
		
		<block v-else>
			<view class="es-fix-top">
				<cover-view class="top-img1" ></cover-view>
				<es-top></es-top>
				<es-nav-title-base :title="title" :left="left"></es-nav-title-base>
			</view>
		</block>
		
		<block v-if="bg!='none'">
			<es-top></es-top>
			<view class="es-h-88"></view>
		</block>
		

	</view>
</template>

<script>
	export default {
		name: "es-nav-title",
		data() {
			return {
				top_color: 'rgba(0,0,0,0)',
				h:44,
			};
		},
		props: [
			'title', 'bg', 'left', 'mode'
		],
		created: function() {

		},
		methods: {
			close: function() {
				const pages = getCurrentPages();
				const currentPageIndex = pages.length - 1; // 当前页面的索引
				const targetPageIndex = 1; // 假设要返回到首页（页面 A）
				// 计算需要返回的层数
				const delta = currentPageIndex - targetPageIndex;
				console.log("qxj dalta:"+delta);
				uni.navigateBack({
					delta: delta,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			scrollBody:function(e){
				let top = e.scrollTop / this.h;
				this.top_color = 'rgba(255,92,3, ' + top + ')';
			}
		}
	
	
	}
</script>


<style>
	.es-fix-top {
		font-weight: 620;
		font-family: PingFang SC;
		color: white;
		
		z-index: 1000;
		position: fixed;
		
		/* background-size: 100% auto;
		background-repeat: no-repeat; */
	}
	.es-h-88 {
		height: 44px;
	}

	.top-img {
		width: 100%;
		height: 500rpx;
		position: absolute;
		background: #FF5C03;
	}
	
	.top-img1 {
	    width:100%;
		height: var(--status-bar-height); 
		position: absolute;
		overflow: hidden;
		background: #fff;
	}

	.top-close {
		left: 30rpx;
		position: absolute;
		bottom: 0rpx;
		width: 100rpx;
		height: 80rpx;
	}
	
	.title-box{
		left: 0rpx;
		position: absolute;
		top: 0rpx;
		right: 130rpx;
		height: 80rpx;
	}
	
	
	.navTitle{
		left: calc(50% - 80rpx);
		top:10rpx;
		position: absolute;
		width: 80rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: 500;
	}
</style>