jd_logistics/jd_logistics-app/pages/search/search.vue

<template>
	<view class="container">

		<!-- 导航栏 -->
		<view class="nav-bar">
			<text class="title">查快递</text>
		</view>

		<!-- 主体内容 -->
		<view class="main-content">
			<!-- Logo 和公司名称 -->
			<view class="company-section">
				<view class="logo-placeholder">
					<!-- 这里可以使用网络图片或本地图标 -->
					<image class="logo" src="@/static/img/logo.png" mode="aspectFit" />
				</view>
				<!-- <text class="company-name">瑞鲸科技</text>
        <text class="company-en-name">REJOIN</text> -->
			</view>

			<!-- 搜索区域 -->
			<view class="search-section">
				<view class="search-input-wrapper">
					<image class="search-icon" src="@/static/img/search.png" />
					<input class="search-input" placeholder="请输入要查询的运单号" placeholder-class="placeholder-style"
						@focus="onInputFocus" @blur="onInputBlur" v-model="trackingNumber" />
					<view class="search-btn" @click="handleSearch">
						搜索
					</view>
				</view>

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

<script setup>
	import {
		ref
	} from 'vue'

	const trackingNumber = ref('')
	const isInputFocused = ref(false)

	const onInputFocus = () => {
		isInputFocused.value = true
	}

	const onInputBlur = () => {
		isInputFocused.value = false
	}

	const handleSearch = () => {
		if (!trackingNumber.value.trim()) {
			uni.showToast({
				title: '请输入运单号',
				icon: 'none'
			})
			return
		}
		uni.navigateTo({
			url:'/pages/logistics/index?orderNo=' + trackingNumber
		})
		return
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient( 135deg, #CFE9FF 0%, #F5F7FA 50.86%);
		display: flex;
		flex-direction: column;
	}


	/* 导航栏样式 */
	.nav-bar {
		margin-top: 100rpx;
		width: 100%;
		height: 52rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.title {
			height: 52rpx;
			line-height: 52rpx;
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}
	}

	/* 主体内容 */
	.main-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 300rpx;
	}

	/* 公司信息区域 */
	.company-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 72rpx;

		.logo-placeholder {
			width: 244rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.logo {
				width: 100%;
				height: 100%;
			}
		}

		.company-name {
			font-size: 40rpx;
			font-weight: 600;
			color: #000000;
			margin-bottom: 8rpx;
		}

		.company-en-name {
			font-size: 28rpx;
			color: #666666;
			letter-spacing: 2rpx;
		}
	}

	/* 搜索区域 */
	.search-section {
		width: 100%;
		padding: 0 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.search-input-wrapper {
			width: 100%;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 44rpx;
			font-size: 28rpx;
			color: #333;
			border: 4rpx solid #1B64F0;
			padding: 6rpx;
			display: flex;
			justify-content: center;
			justify-items: center;
			align-items: center;
			
			.search-icon{
				width: 40rpx;
				height: 40rpx;
				margin-left: 18rpx;
			}

			.search-input {
				flex: 1;
				margin-left: 8rpx;
				margin-right: 8rpx;
			}

			
			.placeholder-style {
				color: #999999;
			}
			
			.search-btn {
				width: 160rpx;
				height: 76rpx;
				background: #1B64F0;
				border-radius: 38rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 76rpx;
				text-align: center;
				font-style: normal;
			}
				
		}

	}
</style>