<template>
	<view class="bookRecommendInfo_content">
		<view class="bookRecommendInfo_box">
			<view class="_header_box">
				<view class="_header_box_title">
					推荐书籍
				</view>
			</view>
			<view class="_body_list_box">
				<view class="_body_list">
					<view class="_body_list_item" v-for="m in recommendBooks" :key="m.id">
						<view class="_item_book_over">
							<image class="is_image" :src="m.cover"></image>
						</view>
						<view class="_item_book_name">
							{{m.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			recommendBooks: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.is_image {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.bookRecommendInfo_content {
		width: 100%;

		.bookRecommendInfo_box {
			width: 100%;

			._header_box {
				width: 100%;

				._header_box_title {
					font-size: 36rpx;
					color: #1A1A1A;
					line-height: 1;
				}
			}

			._body_list_box {
				width: 100%;

				._body_list {
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					._body_list_item {
						width: 202rpx;
						margin-right: 32rpx;

						._item_book_over {
							width: 202rpx;
							height: 270rpx;
							border-radius: 8rpx;
							margin-top: 30rpx;
						}

						._item_book_name {
							width: 100%;
							margin-top: 24rpx;
							font-size: 30rpx;
							line-height: 1;
							color: #1A1A1A;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					._body_list_item:nth-child(3n+0) {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>