<template>
	<!-- 搜索界面 -->
	<view class="">
		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="">
			<view class="slot-wrap">
				<view class="search-wrap"><u-search bg-color="#fff" border-color="#d5aa7a" placeholder="请输入面料名称" :show-action="false" v-model="value"></u-search></view>
			</view>
		</u-navbar>
		<!-- 列表 -->
		<view class="home_con_order">
			<!-- <fabricTitle :tableData="[1]"></fabricTitle> -->
			<view class="home_con_content_order u-m-t-30" v-for="item in 12">
				<image style="width: 160rpx;height: 160rpx;" src="../../static/images/home/2.png" mode=""></image>
				<view class="order_tit">
					<view class="u-font-32">加厚荷兰绒绒布布料备份</view>
					<view class="u-font-24 u-m-t-20 color_6F6F72">
						<span class="u-m-r-10">针织</span>
						|
						<span class="u-m-l-10 u-m-r-10">180cm</span>
						|
						<span class="u-m-l-10">100%面备份面备份面备份面备份面备份面备份面备份面备份</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import fabricTitle from './components/fabricTitle.vue';
export default {
	components: {
		fabricTitle
	},
	data() {
		return {
			value: ''
		};
	},
	methods: {
		outCli() {
			this.$router.push('/pages/home/index');
		}
	}
};
</script>
<style lang="scss" scoped>
.slot-wrap {
	display: flex;
	align-items: center;
	flex: 1;
}
.search-wrap {
	margin: 0 20rpx;
	flex: 1;
}
.home_con_order {
	padding: 0 30rpx;
}
.home_con_content_order {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 160rpx;
	border-radius: 8rpx;
	overflow: hidden;
	.order_tit {
		flex-direction: column;
		display: flex;
		justify-content: center;
		padding: 20rpx;
		flex: 1;
		height: 100%;
		background: rgba(172, 166, 166, 0.5);
	}
}
</style>
