realty/virgo.wzfrontend/workark/src/components/website/productItem.vue

<template>
	<div class="product-item-box">
		<div class="product-item" @click="clickItem">
			<div class="product-item-image" :style="'background-image: url('+imageUrl(item.showPictures)+');'"></div>
			<div class="product-content">
				<div class="product-item-title hui-ellipsis">{{item.name}}</div>
				<div class="space hui-ellipsis">{{item.remark}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Crypto from '@/uitls/crypto'
	export default {
		props: ['item', 'parent'],
		methods: {
			imageUrl(data) {
				let itemData = this.parent.showPictures;
				if (itemData && JSON.parse(itemData)[0]) return JSON.parse(itemData)[0].url;
				if (data && JSON.parse(data)[0]) return JSON.parse(data)[0].url;
				return 'https://assets.api.uizard.io/api/cdn/stream/c05650d2-192b-4a56-ae97-05638f53804c.png';
			},
			clickItem() {
				let id = Crypto.AES.encrypt(String(this.item.id), 'bosshand');
				this.$router.push('/website/serveDetail?type=' + encodeURIComponent(id) + '&sign=' + this.item.sign);
			}
		}
	}
</script>

<style lang="scss">
	.product-item-box {
		width: 25%;
		padding: 10px;
	}

	.product-item {
		width: 100%;
		background: $--color-white;
		border-radius: 8px;
		box-sizing: border-box;
		position: relative;
		cursor: pointer;
		box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.1);
		overflow: hidden;
		padding: 15px;
		box-sizing: border-box;


		.product-item-image {
			width: 100%;
			height: 160px;
			overflow: hidden;
			border-radius: 8px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
		}

		.product-content {
			padding-top: 15px;
		}

		.product-item-title {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 7px;
		}

		.space {
			color: $--color-text-regular;
			font-size: $--font-size-small;
			margin-bottom: 3px;
		}

		.pirce {
			color: $--color-danger;
			display: flex;
			align-items: end;

			.number {
				font-size: 20px;
				font-weight: 600;
				height: 20px;
			}

			.unit {
				height: 15px;
				font-size: 12px;
			}
		}
	}
</style>