/* pages/book/list.wxss */ .container { height: 100vh; padding: 80rpx 0; box-sizing: border-box; overflow: hidden; } /* 顶部标题栏 */ .header { padding: 30rpx; display: flex; position: relative; align-items: flex-start; justify-content: flex-start; width: 90vw; } .back-btn { width: 50rpx; height: 50rpx; display: flex; align-items: center; justify-content: center; margin-right: 30rpx; position: relative; } /* 返回箭头图标 */ .icon-back { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .icon-back-arrow { width: 24rpx; height: 24rpx; border-top: 4rpx solid #333; border-left: 4rpx solid #333; transform: rotate(-45deg); margin-left: 8rpx; } .title { font-size: 36rpx; font-weight: bold; color: #333; flex: 1; text-align: center; margin-right: 80rpx; /* 为了保持标题居中,右侧留出与返回按钮相同的空间 */ } /* 书籍列表 */ .book-list { height: calc(100vh - 260rpx); padding: 20rpx; width: 720rpx; } .book-item { display: flex; padding: 30rpx; margin-bottom: 20rpx; background: #fff; border-radius: 12rpx; position: relative; } .book-cover { width: 160rpx; height: 200rpx; border-radius: 12rpx; margin-right: 20rpx; } .book-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .book-title { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 16rpx; } .book-desc { font-size: 26rpx; color: #666; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .book-stats { font-size: 24rpx; color: #999; margin-top: 16rpx; } .book-tag { position: absolute; top: 30rpx; right: 30rpx; padding: 4rpx 12rpx; background: #ff6b6b; color: #fff; font-size: 22rpx; border-radius: 6rpx; } /* 加载更多 */ .loading, .no-more { text-align: center; padding: 30rpx 0; } .loading text, .no-more text { font-size: 24rpx; color: #999; }