tuanwei-uniapp/components/common-hero/common-hero.vue

<template>
	<view class="hero-section" :style="heroStyle">
<!--		<view class="hero-bg hero-bg-left"></view>-->
<!--		<view class="hero-bg hero-bg-right"></view>-->

		<view class="navbar" :style="navbarStyle">
			<view class="navbar-inner">
				<view class="navbar-left" v-if="showBack">
					<view class="nav-back-btn" @tap="handleBack">
						<uv-icon name="arrow-left" color="#101214" size="22"></uv-icon>
					</view>
				</view>

				<view class="navbar-title">{{ title }}</view>
				<view class="navbar-right-placeholder"></view>
			</view>
		</view>
		<view class="navbar-spacer" :style="{ height: navbarHeight + 'px' }"></view>

		<slot></slot>
	</view>
</template>

<script>
	const TAB_BAR_PATHS = ['/pages/index/index', '/pages/assistant/index', '/pages/mine/index']

	export default {
		name: 'CommonHero',
		props: {
			title: {
				type: String,
				default: ''
			},
			useImageBg: {
				type: Boolean,
				default: false
			},
			backgroundImage: {
				type: String,
				default: '/static/indexBg.jpg'
			},
      reduceTop: {
        type: Number,
        default: 0
      }
		},
		data() {
			return {
				statusBarHeight: 0,
				currentRoute: ''
			}
		},
		computed: {
			showBack() {
				return TAB_BAR_PATHS.indexOf(this.currentRoute) === -1
			},
			navbarHeight() {
				return this.statusBarHeight + uni.upx2px(88) - uni.upx2px(this.reduceTop)
			},
			navbarStyle() {
				return {
					paddingTop: `${this.statusBarHeight}px`
				}
			},
			heroStyle() {
				if (this.useImageBg) {
					return {
						backgroundImage: `url('${this.backgroundImage}')`,
						backgroundSize: 'cover',
						backgroundPosition: 'center top',
						backgroundRepeat: 'no-repeat'
					}
				}
				return {
					background: 'linear-gradient(180deg, #f7fbff 0%, #d9f0ff 44%, #f4fbff 100%)'
				}
			}
		},
		mounted() {
			const { statusBarHeight = 0 } = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]
			const route = currentPage && currentPage.route ? currentPage.route : ''
			this.currentRoute = route ? `/${route}` : ''
		},
		methods: {
			handleBack() {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: 1
					})
					return
				}
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hero-section {
		position: relative;
		//padding: 0 0 30rpx;
		overflow: hidden;
    backgroud: url('@/static/indexBg.jpg');
	}

	.hero-bg {
		position: absolute;
		border-radius: 50%;
		filter: blur(8rpx);
		opacity: 0.9;
    backgroud: url('@/static/indexBg.jpg');
	}

	.hero-bg-left {
		top: 84rpx;
		left: -30rpx;
		width: 300rpx;
		height: 200rpx;
		background: radial-gradient(circle, rgba(197, 237, 255, 0.95) 0%, rgba(197, 237, 255, 0) 72%);
	}

	.hero-bg-right {
		top: 46rpx;
		right: -40rpx;
		width: 360rpx;
		height: 260rpx;
		background: radial-gradient(circle, rgba(184, 231, 255, 0.92) 0%, rgba(184, 231, 255, 0) 72%);
	}

	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		padding-left: 28rpx;
		padding-right: 20rpx;
		background: rgba(255, 255, 255, 0.72);
		backdrop-filter: blur(18rpx);
		-webkit-backdrop-filter: blur(18rpx);
		box-shadow: 0 10rpx 28rpx rgba(65, 105, 135, 0.08);
	}

	.navbar-inner {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.navbar-left {
		width: 72rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-back-btn {
		width: 72rpx;
		height: 72rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 0.72);
		box-shadow: 0 8rpx 18rpx rgba(115, 164, 196, 0.14);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.navbar-title {
		flex: 1;
		font-size: 28rpx;
		font-weight: 700;
		color: #101214;
		letter-spacing: 2rpx;
		text-align: center;
	}

	.navbar-spacer {
		width: 100%;
	}

	.navbar-right-placeholder {
		width: 72rpx;
		height: 72rpx;
		flex-shrink: 0;
		opacity: 0;
	}
</style>