.container.data-v-0391012f { width: 100%; height: 100vh; background-color: #F5F5F5; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 40rpx 30rpx 80rpx; padding-top: calc(30px + 40rpx); box-sizing: border-box; box-sizing: border-box; } .header.data-v-0391012f { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20rpx 0; } .back-btn.data-v-0391012f { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; } .back-icon.data-v-0391012f { font-size: 36rpx; color: #666666; } .share-btn.data-v-0391012f { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; } .share-icon.data-v-0391012f { font-size: 36rpx; color: #666666; } .book-info-section.data-v-0391012f { display: flex; flex-direction: column; align-items: center; flex: 1; justify-content: center; } .book-cover.data-v-0391012f { width: 400rpx; height: 560rpx; border-radius: 8rpx; margin-bottom: 40rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.15); background-color: #F5F5F5; } .book-title.data-v-0391012f { font-size: 40rpx; font-weight: bold; color: #333333; margin-bottom: 20rpx; text-align: center; } .book-author.data-v-0391012f { font-size: 28rpx; color: #999999; margin-bottom: 20rpx; text-align: center; } .chapter-title.data-v-0391012f { font-size: 26rpx; color: #666666; margin-bottom: 20rpx; text-align: center; } .add-to-shelf-btn.data-v-0391012f { width: 300rpx; height: 80rpx; background-color: #F5F5F5; color: #333333; font-size: 28rpx; border: none; border-radius: 40rpx; display: flex; align-items: center; justify-content: center; } .add-to-shelf-btn.data-v-0391012f::after { border: none; } .player-section.data-v-0391012f { width: 100%; padding-bottom: env(safe-area-inset-bottom); } .progress-section.data-v-0391012f { margin-bottom: 60rpx; width: 100%; } .progress-bar-wrapper.data-v-0391012f { width: 100%; height: 60rpx; display: flex; align-items: center; position: relative; margin-bottom: 20rpx; } .time-label.data-v-0391012f { display: flex; justify-content: center; } .time-text.data-v-0391012f { background-color: #4FC3F7; color: #FFFFFF; font-size: 24rpx; padding: 8rpx 20rpx; border-radius: 20rpx; } .progress-bar.data-v-0391012f { width: 100%; height: 4rpx; background-color: #E0E0E0; border-radius: 2rpx; position: relative; } .progress-filled.data-v-0391012f { height: 100%; background-color: #4FC3F7; border-radius: 2rpx; transition: width 0.3s ease; } .progress-dot.data-v-0391012f { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 24rpx; height: 24rpx; background-color: #4FC3F7; border-radius: 50%; box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2); } .controls-section.data-v-0391012f { display: flex; justify-content: space-around; align-items: center; padding: 0 40rpx; } .control-btn.data-v-0391012f { display: flex; align-items: center; justify-content: center; } .control-text.data-v-0391012f { font-size: 28rpx; color: #999999; } .control-icon.data-v-0391012f { font-size: 40rpx; color: #333333; } .play-btn.data-v-0391012f { width: 120rpx; height: 120rpx; background-color: #4FC3F7; border-radius: 50%; box-shadow: 0 4rpx 12rpx rgba(79, 195, 247, 0.4); } .play-icon.data-v-0391012f { font-size: 60rpx; color: #FFFFFF; margin-left: 6rpx; }