<template>
	<view class="sockQuery flex flex_column">
		<view class="search-box">
			<u-search placeholder="请输入货位号/产品编码/产品名称搜索" v-model="queryWord"></u-search>
		</view>
		<view class="list-box">
			<view class="list-item flex align_center justify_between" v-for="item in 35">
				<view>
					<u-image src="@/static/def_imgs.png" width='120' height="120"></u-image>
				</view>
				<view>
					<view class="flex align_center justify_between">
						<view class="vin-text">
							<text class="hj-no">A01</text>
							<text>JO-21026E</text>
						</view>
						<view class="time-text">
							库存：<text>3个</text>
						</view>
					</view>
					<view>箭牌机油滤清器 10款进口大众途锐 5.0L V10 TDI</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryWord: ""
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
.sockQuery{
	width: 100%;
	height: 100vh;
	background: #f8f8f8;
	.search-box{
		padding: 20rpx 30rpx;
	}
	.list-box{
		flex-grow: 1;
		overflow: auto;
	}
	.list-item{
		margin: 20rpx 30rpx;
		border:2rpx solid #f8f8f8;
		box-shadow: 2rpx 2rpx 6rpx #eee;
		border-radius: 20rpx;
		padding: 20rpx 15rpx;
		background: #ffffff;
		> view{
			padding: 0 10rpx;
			&:last-child{
				>view{
					padding: 10rpx 0;
				}
			}
		}
		.time-text{
			color: #999;
			text{
				color: #333;
			}
		}
		.vin-text{
			.hj-no{
				background: #f1f1f1;
				display: inline-block;
				border-radius: 10rpx;
				padding: 0 10rpx;
				margin-right: 10rpx;
			}
		}
		&:first-child{
			margin-top: 0;
		}
		&:active{
			opacity: 0.6;
			transform:scale(0.9);
		}
	}
}
</style>
