<template>
	<view class="bookBasicInfo_content">
		<view class="bookBasicInfo_body">
			<view class="bookBasicInfo_body_left">
				<view class="book_cover_box">
					<image class="is_image" :src="bookInfo.cover"></image>
				</view>
			</view>
			<view class="bookBasicInfo_body_right">
				<view class="book_title">
					{{bookInfo.title}}
				</view>
				<view class="book_tips">
					{{bookInfo.author}}
				</view>
				<!-- 	<view class="book_vip">
					<view class="book_vip_txt">
						开通VIP会员，正版抢先看
					</view>
				</view> -->
				<view class="book_type">
					<view class="book_type_item">
						{{bookInfo.category_name}}
					</view>
					<!-- <view class="book_type_item">
						穿越
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bookInfo: {
				type: Object,
				default: {
					title: '',
					author: '',
					category_name: ''
				}
			}
		},
		data() {
			return {

			}
		}
	}
</script>

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

	.bookBasicInfo_content {
		width: 100%;

		.bookBasicInfo_body {
			display: flex;
			width: 100%;

			.bookBasicInfo_body_left {
				.book_cover_box {
					width: 210rpx;
					height: 280rpx;
					flex: 0 0 auto;
					border-radius: 8rpx;
					box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
				}
			}

			.bookBasicInfo_body_right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 36rpx;
				overflow: hidden;

				.book_title {
					font-size: 44rpx;
					line-height: 1;
					color: #1A1A1D;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.book_tips {
					font-size: 28rpx;
					color: #6E6E6E;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 20rpx;
				}

				.book_vip {
					display: flex;
					margin-top: 20rpx;

					.book_vip_txt {
						padding: 0 20rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: linear-gradient(to left, #F2D4A8, #F6DEC2);
						border-radius: 20rpx;
						font-size: 24rpx;
						color: #9A7C62;
					}
				}

				.book_type {
					display: flex;
					margin-top: 10rpx;

					.book_type_item {
						padding: 0 20rpx;
						height: 52rpx;
						line-height: 52rpx;
						background: #F3F3F3;
						border-radius: 26rpx;
						font-size: 24rpx;
						color: #222222;
					}
				}
			}
		}
	}
</style>