novel-front-app/components/novel/novelItem.vue

<template>
	<view class="book-item" :class="{'horizontal': horizontal}" @click="goToNovelDetail">
		<image class="book-cover" src="https://bookcover.yuewen.com/qdbimg/349573/1033014772/150.webp" mode="aspectFill"></image>
		<view class="book-info">
			<view class="book-title">{{book.title}}</view>
			<view class="book-author" v-if="book.author && !horizontal">{{book.author}}</view>
			<view class="book-desc" v-if="!horizontal">{{book.desc || '暂无简介'}}</view>
            
			<view class="content-row" v-if="!horizontal">
                <view class="book-tags" v-if="book.tags && book.tags.length">
                    <text class="tag" v-for="(tag, index) in book.tags" :key="index">{{tag}}</text>
                </view>
            </view>

            <view class="content-row" v-if="!horizontal">

                <view class="book-status" v-if="book.status">
                    <text>{{book.status}}</text>
                </view>
                <view class="book-text">
                    大家都在读
                </view>
            </view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			book: {
				type: Object,
				default: () => ({
					id: '1',
					title: '我是半妖',
					cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
					author: '东方不败',
					desc: '这是一部关于半妖少年成长的玄幻小说，讲述了主角在人妖两界的冒险故事。',
					tags: ['玄幻', '冒险', '热血'],
					status: '连载中'
				})
			},
			// 是否显示为水平布局（默认垂直布局）
			horizontal: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		methods: {
			goToNovelDetail() {
				uni.navigateTo({
					url: `/pages_order/novel/novelDetail?id=${this.book.id}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.book-item {
	display: flex;
	padding: 20rpx 0;
	border-bottom: 1px solid #eee;
	
	&:last-child {
		border-bottom: none;
	}
	
	.book-cover {
		width: 170rpx;
		height: 230rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
	}
	
	.book-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.book-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			flex: 1;
			margin-right: 10rpx;
		}
		
		.book-author {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 10rpx;
		}
		
		.book-desc {
			font-size: 24rpx;
			color: #999;
			line-height: 1.5;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin-bottom: 10rpx;
		}
		
		.content-row {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
		}
		
		.book-tags {
			display: flex;
			flex-wrap: wrap;
			
			.tag {
				font-size: 20rpx;
				color: #666;
				background-color: #f5f5f5;
				padding: 4rpx 12rpx;
				border-radius: 20rpx;
				margin-right: 10rpx;
			}
		}
		
		.book-status {
			flex-shrink: 0;
			
			text {
				font-size: 20rpx;
				color: #67C23A;
				background-color: rgba(103, 194, 58, 0.1);
				border-radius: 20rpx;
				padding: 4rpx 12rpx;
			}
		}
        .book-text{
            font-size: 20rpx;
        }
	}
}

/* 水平布局样式 - 用于网格展示 */
.book-item.horizontal {
	flex-direction: column;
	width: 200rpx;
	padding: 10rpx;
	border: none;
	
	.book-cover {
		width: 100%;
		height: 260rpx;
		margin-right: 0;
		margin-bottom: 10rpx;
	}
	
	.book-info {
		.title-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.book-title {
			font-size: 26rpx;
			white-space: wrap;
			overflow: hidden;
			text-overflow: ellipsis;
			flex: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			margin-right: 5rpx;
		}
		
		.book-author {
			font-size: 22rpx;
		}
		
		.book-desc {
			display: none;
		}
		
		.book-tags {
			display: none;
		}
		
		.book-status {
			flex-shrink: 0;
			
			text {
				font-size: 18rpx;
			}
		}
	}
}
</style>