universal-wechat-uniapp-241007/pages_order/components/list/renting/rentingItem.vue

<template>
	<view class="item"
	@click="$emit('click', item)">
		<image class="image" :src="images[0]" mode="aspectFill"></image>
		
		<view class="info">
			<view class="title">
				{{ item.title }}
			</view>
			<view class="text">
				{{ item.home }} ｜ {{ item.crm }}m2 | {{ item.face }}
			</view>
			<view class="tags">
				<view class="tag"
				v-if="item.isGood">
					{{ item.isGood }}
				</view>
				
				<view class="tag"
				v-if="item.isMinPrice">
					{{ item.isMinPrice }}
				</view>
			</view>
			<view class="price">
				<text>{{ item.money }}</text>元/月
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props : {
			item : {},
		},
		computed : {
			images(){
				if(!this.item.image){
					return []
				}
				return this.item.image.split(',')
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.item{
	display: flex;
	padding: 20rpx;
	font-size: 24rpx;
	border-radius: 20rpx;
	box-shadow: 0 0 6rpx 6rpx #00000011;
	margin: 24rpx;
	position: relative;
	background-color: #fff;
	image{
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}
	.info{
		gap: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.title{
			font-size: 28rpx;
		}
		.text{
			color: #777;
		}
		.tags{
			display: flex;
			gap: 10rpx;
			.tag{
				background-color: #eee;
				padding: 10rpx;
				border-radius: 10rpx;
				font-size: 22rpx;
				color: #777;
				// &:nth-child(1){
					background-color: rgba($uni-color, 0.1);
					color: $uni-color;
				// }
			}
		}
		.price{
			color: #f40;
			text{
				font-size: 30rpx;
			}
		}
	}
}
</style>