sct/components/PageDesign/components/NavigationBar.vue

<template>
	<div>
		<div class="page-head" :class="[modelData.style === 1 ? 'style-one' : modelData.style === 2 ? 'style-two' : 'style-three']" :style="style">
			<div v-if="modelData.style === 2" :style="{ background: modelData.topBgColor }" class="circular"></div>
		</div>
		<u-navbar :background="{ background: background }" :title-color="modelData.textColor" :border-bottom="false" :is-back="false" :title="modelData.name">
			<div class="address-div ellipsis" @click="openLocation">
				<u-icon name="map-fill" color="#9fa8bd" size="30"></u-icon>
				<span style="margin-left: 10rpx;">{{ location.districtName || '点击定位' }}</span>
			</div>
		</u-navbar>
	</div>
</template>

<script>
export default {
	name: 'NavigationBar',
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		},
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	computed: {
		style() {
			if (this.modelData.style === 3) {
				return `background-color:${this.modelData.topBgColor};color:${this.modelData.textColor}`;
			} else if (this.modelData.style === 1) {
				return `background:linear-gradient(360deg,rgba(255, 255, 255, 0) 0%,${this.modelData.topBgColor} 100%,${this.modelData.topBgColor} 100%);color:${
					this.modelData.textColor
				}`;
			} else {
				return `color:${this.modelData.textColor}`;
			}
		},
		location() {
			return this.$store.state.locationObj;
		},
		background() {
			if (this.modelData.style === 1) {
				return this.$u.colorToRgba(this.$_utils.hexify(this.modelData.topBgColor), this.scrollTop/100)
			} else {
				return this.modelData.topBgColor;
			}
		}
	},
	methods: {
		openLocation() {
			this.$emit('openLocation');
		}
	}
};
</script>

<style scoped lang="scss">
.page-head {
	// height: 226px;
	height: 100vh;
	width: 750rpx;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
.style-two {
	overflow: hidden;
	.circular {
		width: 140%;
		height: 200px;
		position: absolute;
		left: -20%;
		top: 0;
		border-radius: 0 0 50% 50%;
		background: #ec1c24;
	}
}
.address-div {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 10rpx;
	left: 24rpx;
	width: 180rpx;
	height: 66rpx;
	background: #ffffff;
	border-radius: 66rpx;
	line-height: 66rpx;
	text-align: center;
	font-size: 26rpx;
	font-weight: 500;
	border: 1px solid #eeeeee;
	color: #111111;
	-webkit-line-clamp: 1;
}
.style-one {
	background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, #ec1c24 100%);
}
.style-three {
	background: #ec1c24;
}
</style>