.container.data-v-ac1886ed { width: 100%; height: 100vh; background-color: #FFFFFF; display: flex; flex-direction: column; padding-top: 30px; box-sizing: border-box; } .header.data-v-ac1886ed { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 30rpx; background-color: #FFFFFF; border-bottom: 1rpx solid #E0E0E0; position: relative; } .back-btn.data-v-ac1886ed { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; } .back-icon.data-v-ac1886ed { font-size: 40rpx; color: #333333; font-weight: bold; } .header-title.data-v-ac1886ed { position: absolute; left: 50%; transform: translateX(-50%); font-size: 36rpx; font-weight: bold; color: #333333; } .share-btn.data-v-ac1886ed { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; } .share-icon.data-v-ac1886ed { font-size: 36rpx; color: #333333; } .scroll-content.data-v-ac1886ed { flex: 1; width: 100%; padding-bottom: 120rpx; } .loading-section.data-v-ac1886ed { padding: 100rpx 30rpx; text-align: center; } .loading-text.data-v-ac1886ed { font-size: 28rpx; color: #999999; } .book-header.data-v-ac1886ed { display: flex; padding: 40rpx 30rpx; background-color: #FFFFFF; border-bottom: 1rpx solid #F0F0F0; } .book-cover-wrapper.data-v-ac1886ed { margin-right: 30rpx; flex-shrink: 0; } .book-cover.data-v-ac1886ed { width: 180rpx; height: 250rpx; border-radius: 8rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15); background-color: #F5F5F5; } .book-info.data-v-ac1886ed { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; } .book-title.data-v-ac1886ed { font-size: 40rpx; font-weight: bold; color: #333333; margin-bottom: 20rpx; } .book-brief.data-v-ac1886ed { font-size: 28rpx; color: #666666; line-height: 1.6; margin-bottom: 20rpx; } .book-author.data-v-ac1886ed { font-size: 26rpx; color: #999999; margin-bottom: 20rpx; } .book-price.data-v-ac1886ed { font-size: 32rpx; color: #FF5722; font-weight: bold; margin-top: 10rpx; } .book-price-paid.data-v-ac1886ed { font-size: 32rpx; color: #FF5722; font-weight: bold; } .section.data-v-ac1886ed { padding: 40rpx 30rpx; background-color: #FFFFFF; border-bottom: 1rpx solid #F0F0F0; } .section-header.data-v-ac1886ed { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx; } .section-title.data-v-ac1886ed { font-size: 36rpx; font-weight: bold; color: #333333; margin-bottom: 20rpx; display: block; } .section-content.data-v-ac1886ed { font-size: 28rpx; color: #666666; line-height: 1.8; display: block; } .write-review-btn.data-v-ac1886ed { font-size: 26rpx; color: #999999; padding: 8rpx 20rpx; background-color: #F5F5F5; border-radius: 30rpx; } .review-list.data-v-ac1886ed { display: flex; flex-direction: column; } .review-item.data-v-ac1886ed { margin-bottom: 40rpx; padding-bottom: 40rpx; border-bottom: 1rpx solid #F0F0F0; } .review-item.data-v-ac1886ed:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .review-header.data-v-ac1886ed { display: flex; align-items: center; margin-bottom: 20rpx; position: relative; } .review-avatar.data-v-ac1886ed { width: 60rpx; height: 60rpx; border-radius: 50%; margin-right: 20rpx; background-color: #F5F5F5; } .review-user-info.data-v-ac1886ed { flex: 1; display: flex; align-items: center; } .review-name.data-v-ac1886ed { font-size: 28rpx; color: #333333; font-weight: bold; margin-right: 15rpx; } .review-tag.data-v-ac1886ed { font-size: 20rpx; color: #4CAF50; background-color: #E8F5E9; padding: 4rpx 12rpx; border-radius: 4rpx; } .review-date.data-v-ac1886ed { font-size: 24rpx; color: #999999; margin-right: 20rpx; } .review-likes.data-v-ac1886ed { display: flex; align-items: center; } .like-icon.data-v-ac1886ed { font-size: 28rpx; margin-right: 8rpx; } .like-count.data-v-ac1886ed { font-size: 24rpx; color: #999999; } .review-content.data-v-ac1886ed { font-size: 28rpx; color: #666666; line-height: 1.8; display: block; } .view-all-reviews.data-v-ac1886ed { margin-top: 30rpx; padding: 20rpx; background-color: #F5F5F5; border-radius: 8rpx; text-align: center; } .view-all-text.data-v-ac1886ed { font-size: 28rpx; color: #333333; } .section-more.data-v-ac1886ed { font-size: 26rpx; color: #999999; } .recommend-grid.data-v-ac1886ed { display: flex; flex-wrap: wrap; justify-content: space-between; } .recommend-item.data-v-ac1886ed { width: 160rpx; margin-bottom: 30rpx; } .recommend-cover.data-v-ac1886ed { width: 160rpx; height: 220rpx; border-radius: 8rpx; margin-bottom: 15rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1); background-color: #F5F5F5; } .recommend-title.data-v-ac1886ed { font-size: 24rpx; color: #333333; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bottom-bar.data-v-ac1886ed { position: fixed; bottom: 0; left: 0; right: 0; display: flex; padding: 20rpx 30rpx; background-color: #FFFFFF; border-top: 1rpx solid #E0E0E0; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05); padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); } .add-to-shelf-btn.data-v-ac1886ed { flex: 1; height: 88rpx; background-color: #FFFFFF; color: #333333; font-size: 32rpx; border: 1rpx solid #E0E0E0; border-radius: 44rpx; margin-right: 20rpx; display: flex; align-items: center; justify-content: center; } .add-to-shelf-btn.in-shelf.data-v-ac1886ed { background-color: #F5F5F5; color: #999999; border-color: #E0E0E0; } .add-to-shelf-btn[disabled].data-v-ac1886ed { opacity: 0.6; } .read-btn.data-v-ac1886ed { flex: 1; height: 88rpx; background-color: #4FC3F7; color: #FFFFFF; font-size: 32rpx; border: none; border-radius: 44rpx; display: flex; align-items: center; justify-content: center; }