partnerApp/components/modules/orders/springBox.vue

<template>
	//这里是搜索框的输入框 不需要的可以删掉
	<view>
		<view class="arrivalSearch">
			<view class="arrivalSmallsearch">
				<view class="arrivalSearchInput">
					<input type="text" :placeholder="dateinit">
				</view>
				//这里是输入框旁边的图标（这里的图标是一张图片）
				<image src="../../static/img/nav.png" mode="aspectFill" @click.stop="ShowHidden = !ShowHidden"> </image>
			</view>
		</view>
		//这里是弹出来的下拉筛选框
		<view class="arrivalNavigation">
			<view class="d4"></view>
			<view class="sideNavigation">
				<nav>
					<li>到货查询</li>
					<view class="liBottomBorder"></view>
					<li>门店查询</li>
					<view class="liBottomBorder"></view>
					<li>货号查询</li>
					<view class="liBottomBorder"></view>
					<li>降价查询</li>
				</nav>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ShowHidden: false,
				dateinit: '请输入货号',
			};
		},
		methods: {
			// 点击页面事件 隐藏需要隐藏的区域
			HiddenClick() {
				this.ShowHidden = false
			},
		},
		mounted() {
			// document.addEventListener('click', this.HiddenClick)
		},
	}
</script>

<style lang="less">
	.arrivalSearch {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		box-shadow: 0 0 10rpx #eee;

		.arrivalSmallsearch {
			width: 96%;
			display: flex;

			.arrivalSearchInput {
				height: 70rpx;
				background-color: #F0F1F6;
				border-radius: 40rpx;
				font-size: 25rpx;
				margin-left: 10rpx;
				margin-top: 10rpx;
				width: 608rpx;
			}

			input {
				width: 80%;
				margin-left: 40rpx;
				margin-top: 10rpx;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
				margin-top: 20rpx;
			}
		}

	}

	//从这里开始是弹出框的样式  不需要搜索框的 前面样式都不用加
	.arrivalNavigation {
		width: 250rpx;
		position: absolute;
		right: 20rpx;
		z-index: 99;

		.sideNavigation {
			width: 248rpx;
			background-color: #202020;
			color: #eee;
			border-radius: 10rpx;

			li {
				height: 85rpx;
				text-align: center;
				line-height: 85rpx;
				font-size: 25rpx;
			}

			.liBottomBorder {
				border: 0.1rpx solid #373737;
			}

		}

		.d4 {
			// position: absolute;
			//  	left: 140rpx;
			width: 0;
			height: 0;
			margin-left: 150rpx;
			margin-top: -20rpx;
			border-width: 20rpx;
			border-style: solid;
			border-color: transparent #333 transparent transparent;
			transform: rotate(90deg);
			/*顺时针旋转90°*/

		}
	}
</style>