MoeNovaClient/components/page-navbar/page-navbar.vue

<template>
	<view class="page-top">
		<image class="bg" src="@/static/home/sy_img_top.png"></image>
		<uv-navbar bgColor="transparent" placeholder>
			<template #left>
				<slot name="navLeft"></slot>
			</template>
			<template #center>
				<slot name="navCenter"></slot>
			</template>
			<template #right>
				<slot name="navRight"></slot>
			</template>
		</uv-navbar>
	</view>
</template>

<script>
	export default {
		name: "page-navbar",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.page-top {
		// position: relative;
		width: 750rpx;
		height: calc(400rpx + var(--status-bar-height));
		margin-bottom: -72rpx;

		.bg {
			width: 750rpx;
			height: calc(400rpx + var(--status-bar-height));
		}

		/deep/.uv-navbar__content {
			height: 310rpx !important;
			box-sizing: border-box;
			padding-left: 24rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: flex-start;
			box-sizing: border-box;
			padding-top: 60rpx;
			padding-bottom: 14rpx;

			.input-box {
				width: 88rpx;
				height: 56rpx;
				background-color: #1f1f1f;
				border-radius: 32rpx;
				margin-right: 5rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.uvicon-arrow-left {
				display: none !important;
			}

			.left-top {
				display: flex;
				justify-content: flex-start;

			}

			.weather {
				font-size: 22rpx;
			}

			.search {
				margin-top: 20rpx;
				width: 490rpx;

				.uv-input {
					height: 70rpx;
					border: 4rpx solid #000;
					box-sizing: border-box;
					padding-left: 4rpx;
					box-sizing: border-box;

					.uni-input-placeholder {
						color: #999 !important;
						font-size: 24rpx;
						padding-left: 4rpx;
					}
				}
			}
		}
	}
</style>