.container.data-v-d21fa7e5 { width: 100%; height: 100vh; background-color: #FFFFFF; display: flex; flex-direction: column; } /* 顶部导航栏 */ .header.data-v-d21fa7e5 { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 30rpx; background-color: #4DB6AC; position: relative; } .back-btn.data-v-d21fa7e5 { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; } .back-icon.data-v-d21fa7e5 { font-size: 40rpx; color: #FFFFFF; font-weight: bold; } .header-title.data-v-d21fa7e5 { font-size: 36rpx; font-weight: bold; color: #FFFFFF; position: absolute; left: 50%; transform: translateX(-50%); } .placeholder.data-v-d21fa7e5 { width: 60rpx; } /* 横向标签栏 */ .tab-bar.data-v-d21fa7e5 { display: flex; align-items: center; background-color: #66CCC2; padding: 0 20rpx; overflow-x: auto; white-space: nowrap; } .tab-item.data-v-d21fa7e5 { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24rpx 20rpx; min-width: 120rpx; } .tab-text.data-v-d21fa7e5 { font-size: 28rpx; color: #FFFFFF; transition: color 0.3s ease; } .tab-text-active.data-v-d21fa7e5 { font-size: 30rpx; font-weight: bold; color: #2E7D32; } .tab-active.data-v-d21fa7e5 { border-bottom: 4rpx solid #2E7D32; } /* 主体内容区 */ .main-content.data-v-d21fa7e5 { flex: 1; display: flex; width: 100%; height: 0; overflow: hidden; } /* 左侧分类边栏 */ .sidebar.data-v-d21fa7e5 { width: 160rpx; height: 100%; background-color: #FFFFFF; border-right: 1rpx solid #E5E5E5; } .category-item.data-v-d21fa7e5 { position: relative; display: flex; align-items: center; justify-content: center; padding: 30rpx 20rpx; min-height: 80rpx; box-sizing: border-box; } .category-active.data-v-d21fa7e5 { background-color: #F5F5F5; } .category-indicator.data-v-d21fa7e5 { position: absolute; left: 0; top: 0; bottom: 0; width: 6rpx; background-color: #4DB6AC; } .category-text.data-v-d21fa7e5 { font-size: 28rpx; color: #999999; transition: color 0.3s ease; } .category-text-active.data-v-d21fa7e5 { color: #4DB6AC; font-weight: bold; } /* 右侧书籍列表 */ .book-list-container.data-v-d21fa7e5 { flex: 1; height: 100%; background-color: #FFFFFF; padding: 0 30rpx; } .book-item.data-v-d21fa7e5 { display: flex; align-items: center; padding: 30rpx 0; position: relative; } .rank-number.data-v-d21fa7e5 { font-size: 48rpx; font-weight: bold; color: #CCCCCC; width: 80rpx; text-align: center; flex-shrink: 0; } .book-cover.data-v-d21fa7e5 { width: 120rpx; height: 160rpx; border-radius: 8rpx; margin-right: 24rpx; flex-shrink: 0; background-color: #F5F5F5; } .book-info.data-v-d21fa7e5 { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .book-title.data-v-d21fa7e5 { font-size: 32rpx; font-weight: bold; color: #000000; margin-bottom: 12rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .book-author.data-v-d21fa7e5 { font-size: 26rpx; color: #999999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .divider-line.data-v-d21fa7e5 { position: absolute; bottom: 0; left: 80rpx; right: 0; height: 1rpx; background-color: #E5E5E5; } /* 加载更多 */ .load-more.data-v-d21fa7e5 { width: 100%; height: 80rpx; display: flex; align-items: center; justify-content: center; margin-top: 20rpx; margin-bottom: 40rpx; } .load-more-text.data-v-d21fa7e5 { font-size: 28rpx; color: #999999; }