.bookshelf { padding: 20rpx; } .categories { display: flex; padding: 20rpx 0; border-bottom: 1rpx solid #eee; } .category-item { padding: 10rpx 30rpx; margin-right: 20rpx; border-radius: 30rpx; font-size: 28rpx; color: #666; } .category-item.active { background: #1989fa; color: #fff; } .book-list { margin-top: 30rpx; } .book-item { display: flex; padding: 20rpx; margin-bottom: 20rpx; background: #fff; border-radius: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1); } .book-cover { width: 160rpx; height: 220rpx; border-radius: 8rpx; } .book-info { flex: 1; margin-left: 20rpx; display: flex; flex-direction: column; } .book-title { font-size: 32rpx; font-weight: bold; color: #333; } .book-author { font-size: 28rpx; color: #666; margin: 10rpx 0; } .book-progress { font-size: 24rpx; color: #999; } .add-btn { position: fixed; right: 40rpx; bottom: 40rpx; width: 100rpx; height: 100rpx; background: #1989fa; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4rpx 16rpx rgba(25, 137, 250, 0.3); } .add-icon { color: #fff; font-size: 60rpx; } .book-type { font-size: 24rpx; color: #1989fa; background: rgba(25, 137, 250, 0.1); padding: 4rpx 12rpx; border-radius: 4rpx; margin-top: 8rpx; } .book-desc { font-size: 24rpx; color: #999; margin: 8rpx 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .book-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8rpx; } .book-category { font-size: 24rpx; color: #1989fa; background: rgba(25, 137, 250, 0.1); padding: 4rpx 12rpx; border-radius: 4rpx; } .book-date { font-size: 24rpx; color: #999; } /* 加载状态 */ .loading, .no-more, .empty { text-align: center; padding: 30rpx; color: #999; font-size: 28rpx; }