<template>
	<view class="home_con_content_order" @click="click">
		<image class="width_100 hs-height-160" src="@/static/images/home/1@2x.png" mode=""></image>
		<view class="order_tit">
			<view class="u-flex justify-between u-font-32">
				<span class="color_DDA973 u-line-1">{{ item.name }}</span>
				<span><u-icon size="24" color="#fff" name="arrow-right"></u-icon></span>
			</view>
			<view class="u-font-24 u-m-t-20 color_6F6F72">
				<span class="u-m-r-10">{{ item.mdmMaterialCategory }}</span>
				|
				<span class="u-m-l-10 u-m-r-10">{{ item.mdmMaterialClothWidth }} cm</span>
				|
				<span class="u-m-l-10">{{ item.mdmMaterialComponent }}</span>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'hs-material-thumbnail',
	props: {
		item: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {};
	},
	methods: {
		click() {
			this.$emit('click');
		}
	}
};
</script>

<style scoped lang="scss">
.home_con_content_order {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 160rpx;
	border-radius: 8rpx;
	overflow: hidden;
	width: 100%;
	.order_tit {
		position: absolute;
		width: 75%;
		right: 0;
		flex-direction: column;
		display: flex;
		justify-content: center;
		padding: 20rpx;
		flex: 1;
		height: 100%;
		background: rgba(17, 21, 30, 0.5);
	}
}
.width_30 {
	width: 30%;
}

.color_DDA973 {
	color: #dda973;
}

.color_6F6F72 {
	color: #6f6f72;
}

.bd_dashed {
	position: relative;
}

.bd_dashed:after {
	border-width: 1px;
}

.bd_dashed-bottom:after,
.bd_dashed-left:after,
.bd_dashed-right:after,
.bd_dashed-top-bottom:after,
.bd_dashed-top:after,
.bd_dashed:after {
	content: ' ';
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	box-sizing: border-box;
	transform-origin: 0 0;
	width: 199.8%;
	height: 199.7%;
	transform: scale(0.5, 0.5);
	border: 1px dashed #e4e7ed;
	z-index: 2;
}

.ov_hiden {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
