xs/xs-app/pages/bookshelf/bookshelf-readHistory.vue

<template>
	<view class="readHistory_content" :style="{width:window_width}">
		<view class="" @click="clickDeleteBook">
			清空
		</view>
		<view class="book-list">
			<view class="book-list__item" v-for="(item,index) in book_list" :key="index"
			@click="clickBook(item,index)">
			    <view class="book-list__item__book-cover">
			    	<image class="image" :src="item.book_cover" mode="aspectFill"></image>
			    </view>
				<view class="book-list__item__book-info">
					<view class="book-list__item__book-info__name">
						{{item.book_name}}
					</view>
					<view class="book-list__item__book-info__author book-list__item__book-info__name">
						作者:{{item.author_name}}
					</view>
					<view class="book-list__item__book-info__date book-list__item__book-info__name">
						{{item.read_hisroty_time}}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { book_item_data } from '../../data/data';
	defineProps({
		book_list: Array<book_item_data>,
	})
	const emits = defineEmits(['clickBook','clickDeleteBook'])
	let window_width = ref(uni.getSystemInfoSync().windowWidth + 'px')
	
	function clickDeleteBook() {
		emits('clickDeleteBook')
	}
	
	function clickBook(book_data:book_item_data, index:number) {
		emits('clickBook',book_data,index)
	}
	
</script>

<style lang="scss">
	.readHistory_content{
		display: flex;
		flex-direction: column;
		// background-color: purple;
		
		.book-list{
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			// background-color: red;
			
			&__item{
				display: flex;
				flex-direction: row;
			    margin-bottom: 20rpx;
				padding: 0 20rpx;
				// background-color: green;
				&__book-cover{
					width: 200rpx;
					height: 250rpx;
					flex-shrink: 0; //设置flex元素所有比例.默认是1,为0的时候不进行缩放
					.image {
						width: 100%;
						height: 100%;
					}
				}
				&__book-info{
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					// background-color: red;
					&__name{
						margin-top: 10rpx;
						display: -webkit-box;
						align-items: center;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 20px;
					}
					&__author{
						margin-top: 20rpx;
						font-size: 16px;
						-webkit-line-clamp: 1;
					}
					&__date{
						margin-top: 20rpx;
						font-size: 15px;
						-webkit-line-clamp: 1;
					}
				}
				
			}
		}
	}
</style>