jewelry-front/components/product/productItem.vue

<template>
	<view class="item" @click="$emit('click')">
		<!-- 商品图片 -->
		<view class="item-image">
			<image :src="item.image &&
			item.image.split(',')[0]" mode="aspectFill">
			</image>
		</view>

		<!-- 商品信息 -->
		<view class="info">
			<!-- 商品标题 -->
			<view class="title">
				{{ item.title }}
			</view>

			<!-- 价格 -->
			<view class="price">
				<view class="money">
					￥<text>{{ item.vipPrice }}/元每件</text>
				</view>
				<view class="price-imgs">
					<image src="@/static/image/category/gold-card-price.png" mode="widthFix" class="price-img"></image>
					<image v-if="false" src="@/static/image/category/silver-card-price.png" mode="widthFix"
						class="price-img"></image>
					<image v-if="false" src="@/static/image/category/diamond-price.png" mode="widthFix"
						class="price-img"></image>
				</view>
			</view>

			<!-- 销量 -->
			<view class="sales-volume">
				<view class="sales-volume-imgbox">
					<image src="@/static/image/category/sales-volume-icon.png" mode="widthFix" class="sales-volume-img">
					</image>
				</view>

				<view class="sales-volume-number">
					已售出32490+单
				</view>
			</view>

			<!-- 购买按钮 -->
			<view class="buy-btn">
				购买
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				default: {}
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.item {
		width: 100%;
		padding: 10rpx 20rpx;
		align-items: center;
		margin-bottom: 20rpx;
		display: flex;
		box-sizing: border-box;
		border-bottom: 1rpx solid #00000012;
		background: white;
		border-radius: 20rpx;

		// 商品图片
		.item-image {
			width: 180rpx;
			height: 180rpx;

			image {
				height: 100%;
				width: 100%;
				border-radius: 20rpx;
			}
		}

		// 商品信息
		.info {
			padding: 20rpx;
			color: #555;
			width: calc(100% - 180rpx);
			box-sizing: border-box;
			overflow: hidden;

			// 商品标题
			.title {
				width: 100%;
				font-size: 28rpx;
				font-weight: bold;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				// white-space: nowrap; //溢出不换行
			}

			// 价格
			.price {
				display: flex;
				align-items: center;
				color: #f40;
				font-size: 26rpx;

				.money {
					font-size: 30rpx;
				}

				.price-imgs {
					display: flex;
					flex-wrap: wrap;

					.price-img {
						width: 80rpx;
						margin-left: 10rpx;
					}
				}
			}

			// 销量
			.sales-volume {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.sales-volume-imgbox {
					width: 20rpx;

					.sales-volume-img {
						width: 100%;
					}
				}

				.sales-volume-number {
					color: #B8B8B8;
					font-size: 26rpx;
					padding-left: 10rpx;
				}
			}

			// 购买按钮
			.buy-btn {
				background: $uni-color;
				color: white;
				display: inline-block;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>