.book-viewer[data-v-dc6aee90] { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #1a1a2e; z-index: 9999; display: flex; flex-direction: column; overflow: hidden; } /* ========== 工具栏 ========== */ .toolbar[data-v-dc6aee90] { display: flex; align-items: center; justify-content: space-between; padding: 0 0.625rem; height: 2.1875rem; background: rgba(26, 26, 46, 0.95); border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .toolbar-left[data-v-dc6aee90] { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; } .toolbar-brand[data-v-dc6aee90] { font-size: 0.6875rem; font-weight: 800; color: #0ea5e9; letter-spacing: 0.0625rem; flex-shrink: 0; } .toolbar-title[data-v-dc6aee90] { font-size: 0.8125rem; color: #e2e8f0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toolbar-right[data-v-dc6aee90] { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .toolbar-btn[data-v-dc6aee90] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.25rem 0.4375rem; border-radius: 0.25rem; background: rgba(255, 255, 255, 0.06); min-width: 2.125rem; } .toolbar-btn[data-v-dc6aee90]:active { background: rgba(255, 255, 255, 0.15); } .toolbar-close[data-v-dc6aee90] { background: rgba(239, 68, 68, 0.15); margin-left: 0.25rem; } .toolbar-close[data-v-dc6aee90]:active { background: rgba(239, 68, 68, 0.3); } .toolbar-icon[data-v-dc6aee90] { font-size: 0.875rem; color: #cbd5e1; } .toolbar-label[data-v-dc6aee90] { font-size: 0.5625rem; color: #94a3b8; margin-top: 0.0625rem; } .page-display[data-v-dc6aee90] { display: flex; align-items: center; gap: 0.1875rem; padding: 0 0.3125rem; font-size: 0.75rem; color: #e2e8f0; font-weight: 600; min-width: 2.5rem; justify-content: center; } /* ========== 目录侧边栏 ========== */ .toc-overlay[data-v-dc6aee90] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 10001; } .toc-sidebar[data-v-dc6aee90] { position: absolute; left: 0; top: 0; bottom: 0; width: 13.75rem; background: #16213e; display: flex; flex-direction: column; box-shadow: 0.25rem 0 1.25rem rgba(0, 0, 0, 0.4); } .toc-header[data-v-dc6aee90] { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.875rem; border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .toc-header-title[data-v-dc6aee90] { font-size: 0.9375rem; font-weight: 700; color: #e2e8f0; } .toc-close[data-v-dc6aee90] { width: 1.625rem; height: 1.625rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 0.875rem; color: #94a3b8; } .toc-close[data-v-dc6aee90]:active { background: rgba(255, 255, 255, 0.2); } .toc-list[data-v-dc6aee90] { flex: 1; overflow: hidden; } .toc-item[data-v-dc6aee90] { display: flex; align-items: center; padding: 0.625rem 0.875rem; border-bottom: 0.03125rem solid rgba(255, 255, 255, 0.04); gap: 0.4375rem; } .toc-item[data-v-dc6aee90]:active { background: rgba(255, 255, 255, 0.05); } .toc-active[data-v-dc6aee90] { background: rgba(14, 165, 233, 0.12); border-left: 0.1875rem solid #0ea5e9; } .toc-level-1 .toc-text[data-v-dc6aee90] { font-weight: 700; font-size: 0.8125rem; color: #e2e8f0; } .toc-level-2 .toc-text[data-v-dc6aee90] { padding-left: 0.75rem; font-size: 0.75rem; color: #cbd5e1; } .toc-level-3 .toc-text[data-v-dc6aee90] { padding-left: 1.5rem; font-size: 0.6875rem; color: #94a3b8; } .toc-bullet[data-v-dc6aee90] { font-size: 0.5rem; color: #0ea5e9; flex-shrink: 0; } .toc-text[data-v-dc6aee90] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toc-page[data-v-dc6aee90] { font-size: 0.625rem; color: #64748b; flex-shrink: 0; } /* ========== 书本舞台 ========== */ .book-stage[data-v-dc6aee90] { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #1a1a2e; } /* ========== 3D 书本容器 ========== */ .book-flip-container[data-v-dc6aee90] { width: 92%; height: 88%; position: relative; perspective: 1600px; display: flex; } /* ========== 展开页(底层) ========== */ .book-spread[data-v-dc6aee90] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; z-index: 1; } .book-page[data-v-dc6aee90] { flex: 1; height: 100%; position: relative; } .book-page-left[data-v-dc6aee90] { border-radius: 0.375rem 0 0 0.375rem; } .book-page-right[data-v-dc6aee90] { border-radius: 0 0.375rem 0.375rem 0; } /* ========== 翻页层 ========== */ .book-flipper[data-v-dc6aee90] { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; z-index: 10; } .flipper-right[data-v-dc6aee90] { right: 0; border-radius: 0 0.375rem 0.375rem 0; } .flipper-left[data-v-dc6aee90] { left: 0; border-radius: 0.375rem 0 0 0.375rem; } .flipper-face[data-v-dc6aee90] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; } .flipper-front[data-v-dc6aee90] { z-index: 2; background: linear-gradient(135deg, #fefefe 0%, #f5f5f4 100%); } .flipper-right .flipper-front[data-v-dc6aee90] { border-radius: 0 0.375rem 0.375rem 0; box-shadow: -0.125rem 0 0.9375rem rgba(0, 0, 0, 0.3); } .flipper-left .flipper-front[data-v-dc6aee90] { border-radius: 0.375rem 0 0 0.375rem; box-shadow: 0.125rem 0 0.9375rem rgba(0, 0, 0, 0.3); } .flipper-back[data-v-dc6aee90] { transform: rotateY(180deg); background: linear-gradient(135deg, #fefefe 0%, #f5f5f4 100%); } .flipper-right .flipper-back[data-v-dc6aee90] { border-radius: 0.375rem 0 0 0.375rem; box-shadow: 0.125rem 0 0.9375rem rgba(0, 0, 0, 0.3); } .flipper-left .flipper-back[data-v-dc6aee90] { border-radius: 0 0.375rem 0.375rem 0; box-shadow: -0.125rem 0 0.9375rem rgba(0, 0, 0, 0.3); } /* ========== 书脊线 ========== */ .book-spine[data-v-dc6aee90] { position: absolute; top: 4%; left: 50%; bottom: 4%; width: 0.0625rem; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 15%, rgba(0,0,0,0.15) 85%, transparent 100%); z-index: 5; pointer-events: none; } /* ========== 页面内容通用 ========== */ .page-scroll[data-v-dc6aee90] { height: 100%; box-sizing: border-box; } .page-content[data-v-dc6aee90] { min-height: 100%; padding: 1.25rem; background: linear-gradient(135deg, #fefefe 0%, #f5f5f4 100%); border-radius: 0.375rem; box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.35); color: #1e293b; font-size: 0.875rem; line-height: 1.8; word-break: break-word; } /* ========== 底部翻页提示 ========== */ .page-hint[data-v-dc6aee90] { display: flex; align-items: center; justify-content: space-between; padding: 0.4375rem 1rem; flex-shrink: 0; background: rgba(26, 26, 46, 0.95); border-top: 0.0625rem solid rgba(255, 255, 255, 0.08); } .hint-btn[data-v-dc6aee90] { padding: 0.3125rem 0.875rem; border-radius: 0.625rem; background: rgba(14, 165, 233, 0.15); color: #0ea5e9; font-size: 0.75rem; } .hint-btn[data-v-dc6aee90]:active { background: rgba(14, 165, 233, 0.3); } .hint-disabled[data-v-dc6aee90] { background: rgba(255, 255, 255, 0.05); color: #475569; pointer-events: none; } .hint-center[data-v-dc6aee90] { font-size: 0.75rem; color: #94a3b8; padding: 0.3125rem 0.75rem; border-radius: 0.625rem; background: rgba(255, 255, 255, 0.05); } .hint-center[data-v-dc6aee90]:active { background: rgba(255, 255, 255, 0.12); } /* 页面内部元素自适应 */ .book-stage[data-v-dc6aee90] img { max-width: 100%; height: auto; border-radius: 0.25rem; } .book-stage[data-v-dc6aee90] table { width: 100%; border-collapse: collapse; font-size: 0.75rem; } .book-stage[data-v-dc6aee90] th, .book-stage[data-v-dc6aee90] td { border: 0.03125rem solid #cbd5e1; padding: 0.375rem 0.5rem; text-align: left; } .book-stage[data-v-dc6aee90] th { background: #f1f5f9; font-weight: 600; } .book-stage[data-v-dc6aee90] pre { background: #1e293b; color: #e2e8f0; padding: 0.75rem; border-radius: 0.3125rem; overflow-x: auto; font-size: 0.75rem; line-height: 1.5; } .book-stage[data-v-dc6aee90] code { font-family: 'SF Mono', 'Menlo', monospace; } .book-stage[data-v-dc6aee90] blockquote { border-left: 0.1875rem solid #0ea5e9; padding: 0.5rem 0.875rem; margin: 0.625rem 0; background: #f0f9ff; border-radius: 0 0.25rem 0.25rem 0; color: #334155; } .book-stage[data-v-dc6aee90] h1 { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 0.5rem 0 0.75rem; padding-bottom: 0.375rem; border-bottom: 0.09375rem solid #0ea5e9; } .book-stage[data-v-dc6aee90] h2 { font-size: 1.0625rem; font-weight: 700; color: #1e293b; margin: 0.5rem 0 0.625rem; } .book-stage[data-v-dc6aee90] h3 { font-size: 0.9375rem; font-weight: 600; color: #334155; margin: 0.4375rem 0 0.5rem; } .book-stage[data-v-dc6aee90] h4, .book-stage[data-v-dc6aee90] h5, .book-stage[data-v-dc6aee90] h6 { font-size: 0.875rem; font-weight: 600; color: #475569; margin: 0.375rem 0 0.4375rem; } .book-stage[data-v-dc6aee90] ul, .book-stage[data-v-dc6aee90] ol { padding-left: 1.25rem; } .book-stage[data-v-dc6aee90] li { margin: 0.3125rem 0; } .book-stage[data-v-dc6aee90] p { margin: 0.4375rem 0; } .book-stage[data-v-dc6aee90] a { color: #0ea5e9; text-decoration: none; } .book-stage[data-v-dc6aee90] hr { border: none; border-top: 0.0625rem solid #e2e8f0; margin: 0.875rem 0; } .book-stage[data-v-dc6aee90] uni-video { max-width: 100%; height: auto; border-radius: 0.25rem; } /* ========== 加载状态 ========== */ .book-loading[data-v-dc6aee90] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9375rem; } .loading-spinner[data-v-dc6aee90] { width: 1.875rem; height: 1.875rem; border: 0.125rem solid rgba(14, 165, 233, 0.2); border-top-color: #0ea5e9; border-radius: 50%; animation: spin-dc6aee90 0.8s linear infinite; } @keyframes spin-dc6aee90 { to { transform: rotate(360deg); } } .loading-text[data-v-dc6aee90] { font-size: 0.8125rem; color: #94a3b8; } /* ========== 空状态 ========== */ .book-empty[data-v-dc6aee90] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; } .empty-icon[data-v-dc6aee90] { font-size: 2.5rem; } .empty-text[data-v-dc6aee90] { font-size: 0.875rem; color: #64748b; } /* ========== 页码跳转浮层 ========== */ .page-jump-bar[data-v-dc6aee90] { position: absolute; top: 0.5rem; right: 0.9375rem; z-index: 99; } .jump-input[data-v-dc6aee90] { width: 6.25rem; height: 1.875rem; background: rgba(255, 255, 255, 0.95); border: 0.0625rem solid #0ea5e9; border-radius: 0.3125rem; padding: 0 0.625rem; font-size: 0.8125rem; color: #1e293b; text-align: center; } /* ========== 错误提示 ========== */ .error-toast[data-v-dc6aee90] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(239, 68, 68, 0.92); color: #fff; padding: 0.625rem 1.25rem; border-radius: 0.375rem; font-size: 0.8125rem; z-index: 10010; max-width: 80vw; text-align: center; }