.container.data-v-babe43ef { width: 100%; height: 100vh; background-color: #FFFFFF; display: flex; flex-direction: column; padding-top: 60px; box-sizing: border-box; } .search-bar.data-v-babe43ef { position: relative; padding: 20rpx 30rpx; background-color: #FFFFFF; } .search-input.data-v-babe43ef { width: 100%; height: 70rpx; background-color: #F5F5F5; border-radius: 35rpx; padding: 0 80rpx 0 30rpx; font-size: 28rpx; color: #333333; } .search-icon.data-v-babe43ef { position: absolute; right: 50rpx; top: 50%; transform: translateY(-50%); font-size: 32rpx; } .scroll-content.data-v-babe43ef { flex: 1; width: 100%; padding-bottom: 20rpx; } .section.data-v-babe43ef { padding: 40rpx 30rpx; background-color: #FFFFFF; } .section-header.data-v-babe43ef { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx; } .section-title.data-v-babe43ef { font-size: 36rpx; font-weight: bold; color: #333333; } .book-count.data-v-babe43ef { font-size: 28rpx; color: #999999; } .book-grid.data-v-babe43ef { display: flex; flex-wrap: wrap; justify-content: space-between; } .book-item.data-v-babe43ef { width: 160rpx; margin-bottom: 30rpx; } .book-cover.data-v-babe43ef { width: 160rpx; height: 220rpx; border-radius: 8rpx; margin-bottom: 15rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1); background-color: #F5F5F5; } .book-name.data-v-babe43ef { font-size: 24rpx; color: #333333; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8rpx; } .book-progress.data-v-babe43ef { font-size: 22rpx; color: #4FC3F7; } .book-item.data-v-babe43ef { position: relative; } .type-badge.data-v-babe43ef { position: absolute; top: 8rpx; right: 8rpx; background-color: rgba(79, 195, 247, 0.9); border-radius: 8rpx; padding: 4rpx 12rpx; } .type-badge-text.data-v-babe43ef { font-size: 20rpx; color: #FFFFFF; } .book-list.data-v-babe43ef { display: flex; flex-direction: column; } .book-list-item.data-v-babe43ef { display: flex; margin-bottom: 30rpx; } .book-cover-small.data-v-babe43ef { width: 120rpx; height: 160rpx; border-radius: 8rpx; margin-right: 20rpx; flex-shrink: 0; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1); background-color: #F5F5F5; } .book-info.data-v-babe43ef { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .book-title-row.data-v-babe43ef { display: flex; align-items: center; margin-bottom: 15rpx; } .book-title.data-v-babe43ef { font-size: 32rpx; font-weight: bold; color: #333333; margin-right: 15rpx; flex: 1; } .type-tag.data-v-babe43ef { font-size: 22rpx; color: #4FC3F7; background-color: #E3F2FD; padding: 4rpx 12rpx; border-radius: 8rpx; } .book-author.data-v-babe43ef { font-size: 26rpx; color: #666666; margin-bottom: 15rpx; } .book-progress-text.data-v-babe43ef { font-size: 24rpx; color: #4FC3F7; } .empty-state.data-v-babe43ef { padding: 100rpx 30rpx; text-align: center; } .empty-text.data-v-babe43ef { font-size: 28rpx; color: #999999; display: block; margin-bottom: 40rpx; } .login-btn.data-v-babe43ef { width: 200rpx; height: 80rpx; background-color: #4FC3F7; color: #FFFFFF; font-size: 30rpx; border: none; border-radius: 40rpx; display: flex; align-items: center; justify-content: center; margin: 0 auto; }