book-hi/pages-sell/components/related-books/index.vue

<template>
	<view class="related-books">
		<view class="books-grid">
			<view v-for="(book, index) in books" :key="index" class="book-item" @click="onBookClick(book)">
				<image :src="book.cover" mode="aspectFill" class="book-cover"></image>
				<text class="book-title u-line-1">{{ book.title }}</text>
				<text class="book-edition u-line-1">{{ book.edition }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'RelatedBooks',
	props: {
		books: {
			type: Array,
			default: () => []
		}
	},
	methods: {
		onBookClick(book) {
			this.$emit('click', book);
		}
	}
}
</script>

<style lang="scss" scoped>
.related-books {
	background: transparent;
	padding-top: 20rpx;
	
	.books-grid {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10rpx; /* Compensate for item padding */
		
		.book-item {
			width: 33.33%;
			padding: 0 10rpx 30rpx 10rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			
			.book-cover {
				width: 100%;
				height: 280rpx;
				border-radius: 8rpx;
				background: #eee;
				margin-bottom: 12rpx;
			}
			
			.book-title {
				font-size: 26rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 4rpx;
			}
			
			.book-edition {
				font-size: 22rpx;
				color: #999;
			}
		}
	}
}
</style>