<template>
	<view>
		<view class="searchBox">
			<view class="searchBox_l"><u-search placeholder="请输入产品编码/产品名称" v-model="keyword" bg-color="#fff" :action-style="searchStyle"></u-search></view>
			<view class="searchBox_r" @click="sortShow=true">
				<text>排序</text>
				<uni-icons color="#666666" type="paixu" @click="clear"></uni-icons>
				<!-- <u-icon name="https://cdn.uviewui.com/uview/example/button.png" color="#2979ff" size="28"></u-icon> -->
			</view>
		</view>
		<view class="listBox">
			<view class="listBox_l"><image src="../../static/default/def_img@2x.png" width="100%" height="100%"></image></view>
			<view class="listBox_r">
				<view class="type">ddiididid</view>
				<view class="tit">标题踢踢踢踢i</view>
				<view class="bot u-flex u-row-between">
					<view>
						适配有货
						<text>3</text>
						次
					</view>
					<view>
						适配无货
						<text>3</text>
						次
					</view>
				</view>
			</view>
		</view>
		<!-- 排序弹窗 -->
		<u-popup v-model="sortShow" mode="right">
			<view>出淤泥而不染，濯清涟而不妖</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchStyle: {
				border: '1rpx solid #189Dff',
				marginRight: '10rpx',
				borderRadius: '26rpx',
				color: '#189Dff',
				fontSize: '26rpx',
				padding: '4rpx 10rpx'
			},
			sortShow:false,
			keyword:''
		};
	},
	methods: {}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
	padding: 20rpx;
	display: inherit !important;
	.searchBox {
		width: 100%;
		display: flex;
		align-items: center;
		.searchBox_l {
			width: 80%;
			border: 1rpx solid #e0e0e0;
			border-radius: 36rpx;
			box-sizing: border-box;
		}
		.searchBox_r {
			width: 19%;
			color: #9da8b5;
			text-align: right;
			text {
				margin-right: 10rpx;
			}
		}
	}
	.listBox {
		width: 100%;
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #e0e0e0;
		.listBox_l {
			width: 150rpx;
			height: 150rpx;
			overflow: hidden;
			border-radius: 20rpx;
			margin-right: 20rpx;
			image {
				width: 100%;
				height: 100%;
				background-color: red;
			}
		}
		.listBox_r {
			width: calc(100% - 170rpx);
			.type {
				color: #222;
				font-size: 32rpx;
			}
			.tit {
				margin: 10rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.bot {
				width: 100%;
				view {
					&::first-child {
						color: #999;
						text {
							color: green;
						}
					}
					&::last-child {
						color: #999;
						text {
							color: red;
						}
					}
				}
			}
		}
	}
}
</style>
