guosen-ldt-shop/components/my-bar.vue

<template>
	<view>
		<view class="bg" style="position: relative;" >
			<slot  name="content"></slot>
		</view>
		<view class="navbar-top" :style="{ 'background': 'rgba(42, 91, 164,'+transparent+')'}">
			<view class="content">
				<view class="back" @click="$back()">
					<text class="cuIcon-back text-white" style="font-size: 40rpx;"></text>
				</view>
				<view class="title">{{title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-bar",
		props:{
			title:String,
			transparent:{
				type:Number,
				default:0
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		height: 440rpx;
		background-image: linear-gradient(#2a5ba4, #35668c, #7a5f79);
		border-radius: 0 0 200rpx -200rpx;
	}

	.navbar-top {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 99999;
		padding-top: var(--status-bar-height);
		transition: top .25s;


		.content {
			display: flex;
			justify-content: center;
			position: relative;

			.back {
				position: absolute;
				left: 0;
				padding: 26rpx;
			}

			.title {
				padding: 26rpx 0;
				text-align: center;
				font-size: 34rpx;
				color: #FFFFFF;
			}
		}
	}
</style>