<template>
	<view class="memberExclusive_content">
		<view class="exclusive_content_header">
			<view class="_header_title_all">
				<view class="_title_all_vip_image">
					<image class="is_image" src="/static/images/myInfo/VIP_active.png"></image>
				</view>
				<view class="_title_all_name">
					会员专享
				</view>
			</view>
			<view class="_header_tips">
				会员免费阅读
			</view>
		</view>
		<view class="exclusive_content_body">
			<view class="_content_body_list">
				<view class="_content_body_list_item" v-for="m in 6" :key="m">
					<CommBookItem />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CommBookItem from '@/components/commBookItem/index.vue';
	export default {
		components: {
			CommBookItem
		},
		data() {

		}
	}
</script>

<style lang="scss">
	.is_image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.memberExclusive_content {
		width: 100%;

		.exclusive_content_header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			box-sizing: border-box;
			padding-right: 32rpx;

			._header_title_all {
				display: flex;
				align-items: center;

				._title_all_vip_image {
					width: 48rpx;
					height: 48rpx;
				}

				._title_all_name {
					font-size: 36rpx;
					color: #F45576;
					line-height: 1;
					margin-left: 8rpx;
					font-weight: 600;
				}
			}

			._header_tips {
				font-size: 26rpx;
				line-height: 1;
				color: #666666;
			}
		}

		.exclusive_content_body {
			width: 100%;

			._content_body_list {
				display: flex;
				flex-wrap: wrap;

				._content_body_list_item {
					width: 210rpx;
					margin-right: 28rpx;
					margin-top: 32rpx;
				}
			}
		}
	}
</style>