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.listDisplayImage)+');'">
			</div>
			<div class="product-content">
				<div class="product-item-title hui-ellipsis">{{item.name}}</div>
				<div class="space" v-if="item.subtitle">{{item.subtitle}}</div>
				<div class="bottom">
					<div class="organization">
						<i class="el-icon-user-solid"></i>
						<span>{{item.organizationName}}</span>
					</div>
					<div class="pirce">
						<span class="number">{{item.price}}</span>
						<span class="unit">元/次</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Crypto from '@/uitls/crypto'
	export default {
		props: ['item'],
		methods: {
			imageUrl(data) {
				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?sign=' + encodeURIComponent(id));
			}
		}
	}
</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;
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
		}

		.space {
			color: $--color-text-regular;
			font-size: $--font-size-small;
			margin: 7px 0;
			-webkit-line-clamp: 2;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.organization {
			color: $--color-text-regular;
			font-size: $--font-size-small;
			opacity: 0.7;
			line-height: 14px;
		}

		.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>