book-hi/pages-sell/components/recommend-item/index.vue

<template>
	<view class="recommend-item">
		<!-- Main Info Row -->
		<view class="main-info">
			<image :src="item.cover" class="book-cover" mode="aspectFill"></image>

			<view class="info-right">
				<view class="title-author">
					<view class="title-row">
						<text class="title">{{ item.title }}</text>
						<!-- Assuming share icon is only at page top, based on typical designs, 
						     but if it's per item, I'd add it here. 
						     The prompt image 1 shows a share icon at the top right of the page header. 
						     I'll leave it out of the item for now unless I see otherwise. -->
					</view>
					<text class="author">{{ item.author }}</text>
				</view>

				<view class="price-action">
					<view class="price-box">
						<text class="currency">¥</text>
						<text class="price">{{ item.price }}</text>
						<text class="original">¥{{ item.originalPrice }}</text>
					</view>

					<view class="cart-btn" @click.stop="handleAddToCart">
						<text>加入购物车</text>
					</view>
				</view>
			</view>
		</view>

		<!-- Description Row -->
		<view class="desc-section">
			<view class="desc-header">
				<text class="label">简介</text>
				<view class="indicator"></view>
			</view>
			<text class="desc-content">{{ item.desc || '暂无简介' }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'RecommendItem',
	props: {
		item: {
			type: Object,
			required: true
		}
	},
	methods: {
		handleAddToCart() {
			this.$emit('add-cart', this.item);
		}
	}
}
</script>

<style lang="scss" scoped>
.recommend-item {
	padding: 30rpx 0;
	border-bottom: 1rpx dashed #EEEEEE;

	.main-info {
		display: flex;
		margin-bottom: 30rpx;

		.book-cover {
			width: 172rpx;
			height: 220rpx;
			border-radius: 8rpx;
			background-color: #f5f5f5;
			margin-right: 24rpx;
			flex-shrink: 0;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		.info-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 4rpx 0;

			.title-author {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 12rpx;
					display: block;
					line-height: 1.4;
				}

				.author {
					font-size: 24rpx;
					color: #999;
				}
			}

			.price-action {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.price-box {
					.currency {
						font-size: 24rpx;
						color: #FF4B4B;
						font-weight: bold;
					}

					.price {
						font-size: 36rpx;
						color: #FF4B4B;
						font-weight: bold;
						margin-right: 12rpx;
					}

					.original {
						font-size: 24rpx;
						color: #999;
						text-decoration: line-through;
					}
				}

				.cart-btn {
					background: #38C248;
					border-radius: 30rpx;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 24rpx;

					text {
						font-size: 26rpx;
						color: #fff;
					}
				}
			}
		}
	}

	.desc-section {
		.desc-header {
			position: relative;
			display: inline-block;
			margin-bottom: 16rpx;

			.label {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				position: relative;
				z-index: 1;
			}

			.indicator {
				position: absolute;
				bottom: 4rpx;
				right: 4rpx;
				width: 30rpx;
				height: 8rpx;
				background: #4ED964;
				border-radius: 4rpx;
				z-index: 0;
			}
		}

		.desc-content {
			font-family: Source Han Sans SC;
			font-size: 26rpx;
			color: #8D8D8D;
			line-height: 1.6;
			display: block;
			text-align: justify;
		}
	}
}
</style>