uni-zhihuikuangshan/components/t-i-navbar/t-i-navbar.vue

<template>
	<view>
		<view class="content">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			
			<view class="navbar">
				<view class="left">
					<image src="./icon/ningdongyunying.png" mode=""></image>
					<uni-icons type="arrowdown" color="#fff"></uni-icons>
				</view>
				<view class="search">
					<view class="box">
						<view class="left">
							<view class="icon">
								<image src="./icon/search.png" mode=""></image>
							</view>
							<view class="text">搜索</view>
						</view>
						<view class="scan">
							<image src="./icon/saoma.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="icon">
						<image src="./icon/day.png" mode=""></image>
					</view>
					<view class="num">21℃</view>
				</view>
			</view>
		</view>
		
		<view class="status_bar"></view>
		<view style="height: 88rpx;"></view>
	</view>
</template>

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

			};
		}
	}
</script>

<style lang="scss">
	.content{
		position: fixed;
		top: 0;
		left: 0;
		
		z-index: 999;
		
		
		width: 750rpx;
		
		background-image: url(./icon/bg_img.jpg);
		background-size: 750rpx 334rpx;
		background-repeat: no-repeat;
	}
	
	.navbar{
		box-sizing: border-box;
		padding: 10rpx 25rpx;
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		height: 88rpx;
		.left{
			display: flex;
			align-items: center;
			
			width: 170rpx;
			image{
				width: 165rpx;
				height: 48rpx;
				
				margin-right: 10rpx;
			}
		}
		.search{
			width: 370rpx;
			
			.box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				height: 68rpx;
				
				background-color: rgba(255,255,255,.4);
				border-radius: 50rpx;
				
				box-sizing: border-box;
				padding: 0 20rpx;
				
				.left{
					display: flex;
					
					.icon{
						image{
							width: 21rpx;
							height: 21rpx;
						}
					}
					.text{
						color: #FFFFFF;
						font-size: 24rpx;
					}
					
				}
				.scan{
					image{
						width: 27rpx;
						height: 25rpx;
					}
				}
			}
		}
		.right{
			margin-left: 20rpx;
			border-left: 2rpx solid #FFFFFF;
			box-sizing: border-box;
			padding-left: 20rpx;
			
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40rpx;
			
			.icon{
				margin-right: 10rpx;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.num{
				color: #FFFFFF;
				font-size: 24rpx;
			}
		}
	}
</style>