.container.data-v-7912e6ab { width: 100%; height: 100vh; background-color: #F5F2E8; display: flex; flex-direction: column; transition: background-color 0.3s; padding-top: 30px; box-sizing: border-box; } .container.dark-mode.data-v-7912e6ab { background-color: #1A1A1A; } .header.data-v-7912e6ab { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 30rpx; padding-top: calc(20rpx + env(safe-area-inset-top)); background-color: rgba(245, 242, 232, 0.92); border-bottom: 1rpx solid rgba(224, 224, 224, 0.6); position: fixed; top: 0; left: 0; right: 0; z-index: 1600; /* 高于浮动设置面板,悬浮于内容之上 */ transition: background-color 0.3s, border-color 0.3s; } .dark-mode .header.data-v-7912e6ab { background-color: rgba(26, 26, 26, 0.92); border-bottom-color: rgba(51, 51, 51, 0.6); } .back-btn.data-v-7912e6ab, .share-btn.data-v-7912e6ab { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; } .back-icon.data-v-7912e6ab, .share-icon.data-v-7912e6ab { font-size: 40rpx; color: #333333; font-weight: bold; } .dark-mode .back-icon.data-v-7912e6ab, .dark-mode .share-icon.data-v-7912e6ab { color: #FFFFFF; } .header-title.data-v-7912e6ab { position: absolute; left: 50%; transform: translateX(-50%); font-size: 32rpx; font-weight: bold; color: #333333; } .dark-mode .header-title.data-v-7912e6ab { color: #FFFFFF; } .content-area.data-v-7912e6ab { flex: 1; width: 100%; padding: 40rpx 30rpx; box-sizing: border-box; background-color: #F5F2E8; transition: background-color 0.3s; } .dark-mode .content-area.data-v-7912e6ab { background-color: #1A1A1A; } .loading-section.data-v-7912e6ab { padding: 100rpx 30rpx; text-align: center; } .loading-text.data-v-7912e6ab { font-size: 28rpx; color: #999999; } .empty-section.data-v-7912e6ab { padding: 100rpx 30rpx; text-align: center; } .empty-section .empty-text.data-v-7912e6ab { font-size: 28rpx; color: #999999; } .chapter-info.data-v-7912e6ab { margin-bottom: 40rpx; text-align: center; } .chapter-title.data-v-7912e6ab { font-size: 36rpx; font-weight: bold; color: #333333; } .dark-mode .chapter-title.data-v-7912e6ab { color: #FFFFFF; } .content-text.data-v-7912e6ab { display: flex; flex-direction: column; line-height: 2.2; background-color: transparent; } .text-line-wrapper.data-v-7912e6ab { margin-bottom: 20rpx; background-color: transparent; } .text-line.data-v-7912e6ab { color: #333333; text-indent: 2em; line-height: 2.2; display: block; background-color: transparent; } .dark-mode .text-line.data-v-7912e6ab { color: #E0E0E0; } .bottom-toolbar.data-v-7912e6ab { display: flex; justify-content: space-around; align-items: center; padding: 30rpx 20rpx; background-color: #F5F2E8; border-top: 1rpx solid #E0E0E0; padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); position: relative; z-index: 100; transition: background-color 0.3s, border-color 0.3s; } .dark-mode .bottom-toolbar.data-v-7912e6ab { background-color: #1A1A1A; border-top-color: #333333; } .toolbar-item.data-v-7912e6ab { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10rpx 20rpx; } .toolbar-text.data-v-7912e6ab { font-size: 28rpx; color: #333333; } .dark-mode .toolbar-text.data-v-7912e6ab { color: #FFFFFF; } /* 悬浮设置面板 */ .floating-settings.data-v-7912e6ab { position: fixed; left: 50%; bottom: calc(30rpx + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; padding: 14rpx 20rpx; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 40rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.15); z-index: 1500; } .floating-settings.dark-mode.data-v-7912e6ab { background: rgba(42, 42, 42, 0.9); } .floating-item.data-v-7912e6ab { padding: 10rpx 24rpx; } .floating-text.data-v-7912e6ab { font-size: 28rpx; color: #333333; } .floating-settings.dark-mode .floating-text.data-v-7912e6ab { color: #FFFFFF; } .floating-divider.data-v-7912e6ab { width: 1rpx; height: 28rpx; background-color: rgba(0,0,0,0.08); margin: 0 6rpx; } .floating-settings.dark-mode .floating-divider.data-v-7912e6ab { background-color: rgba(255,255,255,0.15); } /* 目录弹窗 */ .chapter-modal.data-v-7912e6ab { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; align-items: flex-end; } .modal-content.data-v-7912e6ab { width: 100%; height: 70%; background-color: #FFFFFF; border-radius: 30rpx 30rpx 0 0; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); transition: background-color 0.3s; } .modal-content.dark-mode.data-v-7912e6ab { background-color: #2A2A2A; } .modal-header.data-v-7912e6ab { display: flex; align-items: center; justify-content: space-between; padding: 30rpx; border-bottom: 1rpx solid #E0E0E0; transition: border-color 0.3s; } .modal-content.dark-mode .modal-header.data-v-7912e6ab, .modal-content-small.dark-mode .modal-header.data-v-7912e6ab { border-bottom-color: #333333; } .modal-title.data-v-7912e6ab { font-size: 36rpx; font-weight: bold; color: #333333; transition: color 0.3s; } .modal-content.dark-mode .modal-title.data-v-7912e6ab, .modal-content-small.dark-mode .modal-title.data-v-7912e6ab { color: #FFFFFF; } .close-btn.data-v-7912e6ab { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; } .close-icon.data-v-7912e6ab { font-size: 50rpx; color: #666666; line-height: 1; transition: color 0.3s; } .modal-content.dark-mode .close-icon.data-v-7912e6ab, .modal-content-small.dark-mode .close-icon.data-v-7912e6ab { color: #CCCCCC; } .chapter-list.data-v-7912e6ab { flex: 1; width: 100%; padding: 20rpx 0; } .chapter-item.data-v-7912e6ab { padding: 25rpx 30rpx; border-bottom: 1rpx solid #F0F0F0; transition: background-color 0.3s, border-color 0.3s; } .modal-content.dark-mode .chapter-item.data-v-7912e6ab { border-bottom-color: #333333; } .chapter-item.active.data-v-7912e6ab { background-color: #F5F5F5; } .modal-content.dark-mode .chapter-item.active.data-v-7912e6ab { background-color: #333333; } .chapter-item-title.data-v-7912e6ab { font-size: 30rpx; color: #333333; transition: color 0.3s; } .modal-content.dark-mode .chapter-item-title.data-v-7912e6ab { color: #FFFFFF; } /* 笔记弹窗 */ .notes-modal.data-v-7912e6ab { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; align-items: flex-end; } .notes-content.data-v-7912e6ab { flex: 1; display: flex; flex-direction: column; padding: 20rpx 30rpx; } .add-note-section.data-v-7912e6ab { display: flex; flex-direction: column; margin-bottom: 30rpx; } .note-input.data-v-7912e6ab { width: 100%; min-height: 200rpx; padding: 20rpx; background-color: #F5F5F5; border-radius: 10rpx; font-size: 28rpx; color: #333333; margin-bottom: 20rpx; box-sizing: border-box; transition: background-color 0.3s, color 0.3s; } .modal-content.dark-mode .note-input.data-v-7912e6ab { background-color: #333333; color: #FFFFFF; } .modal-content.dark-mode .note-input.data-v-7912e6ab::-webkit-input-placeholder { color: #999999; } .modal-content.dark-mode .note-input.data-v-7912e6ab::placeholder { color: #999999; } .add-note-btn.data-v-7912e6ab { width: 100%; height: 80rpx; background-color: #4FC3F7; color: #FFFFFF; border-radius: 10rpx; font-size: 30rpx; display: flex; align-items: center; justify-content: center; border: none; } .notes-list.data-v-7912e6ab { flex: 1; width: 100%; } .note-item.data-v-7912e6ab { padding: 25rpx; background-color: #F5F5F5; border-radius: 10rpx; margin-bottom: 20rpx; transition: background-color 0.3s; } .modal-content.dark-mode .note-item.data-v-7912e6ab { background-color: #333333; } .note-header.data-v-7912e6ab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15rpx; } .note-time.data-v-7912e6ab { font-size: 24rpx; color: #999999; transition: color 0.3s; } .modal-content.dark-mode .note-time.data-v-7912e6ab { color: #888888; } .note-delete.data-v-7912e6ab { width: 40rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; } .delete-icon.data-v-7912e6ab { font-size: 40rpx; color: #FF4444; line-height: 1; } .note-content.data-v-7912e6ab { font-size: 28rpx; color: #333333; line-height: 1.8; transition: color 0.3s; } .modal-content.dark-mode .note-content.data-v-7912e6ab { color: #FFFFFF; } .empty-notes.data-v-7912e6ab { display: flex; justify-content: center; align-items: center; padding: 100rpx 0; } .empty-text.data-v-7912e6ab { font-size: 28rpx; color: #999999; transition: color 0.3s; } .modal-content.dark-mode .empty-text.data-v-7912e6ab { color: #666666; } /* 字号选择弹窗 */ .fontsize-modal.data-v-7912e6ab { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; } .modal-content-small.data-v-7912e6ab { width: 500rpx; background-color: #FFFFFF; border-radius: 20rpx; padding: 40rpx; box-sizing: border-box; transition: background-color 0.3s; } .modal-content-small.dark-mode.data-v-7912e6ab { background-color: #2A2A2A; } .fontsize-title.data-v-7912e6ab { font-size: 32rpx; font-weight: bold; color: #333333; text-align: center; margin-bottom: 30rpx; transition: color 0.3s; } .modal-content-small.dark-mode .fontsize-title.data-v-7912e6ab { color: #FFFFFF; } .fontsize-options.data-v-7912e6ab { display: flex; flex-direction: column; } .fontsize-item.data-v-7912e6ab { padding: 25rpx; border-bottom: 1rpx solid #F0F0F0; text-align: center; transition: background-color 0.3s, border-color 0.3s; } .modal-content-small.dark-mode .fontsize-item.data-v-7912e6ab { border-bottom-color: #333333; } .fontsize-item.data-v-7912e6ab:last-child { border-bottom: none; } .fontsize-item.active.data-v-7912e6ab { background-color: #F5F5F5; } .modal-content-small.dark-mode .fontsize-item.active.data-v-7912e6ab { background-color: #333333; } .fontsize-label.data-v-7912e6ab { font-size: 30rpx; color: #333333; transition: color 0.3s; } .modal-content-small.dark-mode .fontsize-label.data-v-7912e6ab { color: #FFFFFF; } /* 文本选择菜单 */ .text-selection-menu.data-v-7912e6ab { position: fixed; background-color: #333333; border-radius: 8rpx; padding: 0; z-index: 2000; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3); min-width: 200rpx; } .selection-menu-item.data-v-7912e6ab { padding: 20rpx 30rpx; border-bottom: 1rpx solid #444444; } .selection-menu-item.data-v-7912e6ab:last-child { border-bottom: none; } .selection-menu-item.data-v-7912e6ab:active { background-color: #444444; } .selection-menu-text.data-v-7912e6ab { font-size: 28rpx; color: #FFFFFF; } /* 选中文本高亮层 */ .selection-overlay.data-v-7912e6ab { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1999; background-color: transparent; }