realty/virgo.wzfrontend/yui_wx/components/house/houseItem.vue

<template>
	<view class="house-item" @click="$navigateTo('/pages/house/house?houseId=' + house.id)">
		<view class="house-image">
			<image class="image" :src="imageUrl(house.showPicture)" mode="aspectFill">
			</image>
		</view>
		<view class="house-level">9.1</view>
		<view class="house-content">
			<view class="title">{{house.name}}</view>
			<view class="space">
				{{house.projectName}}/{{house.projectItemName}}/{{house.projectItemTargetName}}/{{house.roomNumber}}
			</view>
			<view class="tag">
				<text style="margin-right: 6rpx;">{{house.area}}m²</text>
				<text v-for="(tag,index) in  house.tagList" :key="index"> | {{tag.name || '-'}}</text>
			</view>
			<view class="pirce">
				<text class="number">{{house.price}}</text>
				<text class="label">/月</text>
			</view>
			<view class="location">{{house.distance || '-'}}km</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			house: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {}
		},
		methods: {
			imageUrl(data) {
				if (!data) return 'https://assets.api.uizard.io/api/cdn/stream/c05650d2-192b-4a56-ae97-05638f53804c.png';
				return JSON.parse(data)[0].url;
			}
		},
	}
</script>

<style lang="scss">
	.house-item {
		width: 100%;
		padding: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		box-sizing: border-box;
		position: relative;
		box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
		margin-bottom: 30rpx;

		.house-level {
			position: absolute;
			top: 50rpx;
			right: 50rpx;
			color: $uni-warning;
			font-weight: bold;
			background: rgba(255, 255, 255, 0.7);
			width: 80rpx;
			text-align: center;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 40rpx;
		}

		.house-image {
			height: 400rpx;
			width: 100%;
			overflow: hidden;
			border-radius: 8px;
		}

		.title {
			font-size: 20px;
			font-weight: 600;
			padding: 20rpx 0 10rpx 0;
		}

		.space {
			font-weight: 300;
			color: $uni-secondary-color;
		}

		.tag {
			font-size: 24rpx;
			font-weight: 300;
			color: $uni-secondary-color;
			padding: 12rpx 0;
		}

		.pirce {
			color: $uni-primary;

			.number {
				font-weight: 600;
				font-size: 48rpx;
			}

			.label {
				font-size: 24rpx;
			}
		}

		.location {
			font-size: 24rpx;
			color: $uni-secondary-color;
			position: absolute;
			bottom: 40rpx;
			right: 40rpx;
		}
	}
</style>