BookDetails modal fix

lkxnif · Jan 12, 2025 · f39ced2 · f39ced2
1 parent 4e8bbbb
commit f39ced2
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 1 deletion.
diff --git a/css/style.css b/css/style.css
@@ -1258,4 +1258,70 @@ img {
     .navbar-collapse.collapse:not(.show) {
         display: flex !important;
     }
+}
+
+/* 书籍详情模态框样式 */
+#bookDetailsModal .modal-body {
+    padding: 1.5rem;
+}
+
+#bookDetailsModal .modal-body img {
+    width: 100%;
+    max-height: 300px;
+    object-fit: contain;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#bookDetailsModal dl {
+    margin-bottom: 0;
+}
+
+#bookDetailsModal dt {
+    color: #666;
+    font-weight: 500;
+}
+
+#bookDetailsModal dd {
+    margin-bottom: 0.5rem;
+}
+
+#bookDetailsModal .book-description {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #eee;
+}
+
+#bookDetailsModal .book-description h6 {
+    color: #666;
+    margin-bottom: 0.5rem;
+}
+
+#bookDetailsModal .book-description p {
+    font-size: 0.95rem;
+    line-height: 1.5;
+    margin-bottom: 0;
+}
+
+/* 响应式调整 */
+@media (max-width: 767px) {
+    #bookDetailsModal .modal-body {
+        padding: 1rem;
+    }
+
+    #bookDetailsModal .col-md-4 {
+        margin-bottom: 1rem;
+    }
+
+    #bookDetailsModal img {
+        max-height: 200px;
+    }
+
+    #bookDetailsModal dt {
+        margin-bottom: 0.25rem;
+    }
+
+    #bookDetailsModal dd {
+        margin-bottom: 1rem;
+    }
 }
diff --git a/index.html b/index.html
@@ -125,7 +125,58 @@
     <!-- 书籍详情模态框 -->
     <div class="modal fade" id="bookDetailsModal">
         <div class="modal-dialog modal-lg">
-            <!-- 模态框内容将通过JavaScript动态加载 -->
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="book-title"></h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <img id="book-cover" src="" alt="书籍封面" class="img-fluid rounded">
+                        </div>
+                        <div class="col-md-8">
+                            <dl class="row">
+                                <dt class="col-sm-3">作者</dt>
+                                <dd class="col-sm-9" id="book-author"></dd>
+
+                                <dt class="col-sm-3">出版社</dt>
+                                <dd class="col-sm-9" id="book-publisher"></dd>
+
+                                <dt class="col-sm-3">ISBN</dt>
+                                <dd class="col-sm-9" id="book-isbn"></dd>
+
+                                <dt class="col-sm-3">语言</dt>
+                                <dd class="col-sm-9" id="book-language"></dd>
+
+                                <dt class="col-sm-3">格式</dt>
+                                <dd class="col-sm-9">
+                                    <span id="book-format"></span>
+                                    <span id="book-size" class="ms-2"></span>
+                                    <span id="book-pages" class="ms-2"></span>
+                                </dd>
+
+                                <dt class="col-sm-3">出版日期</dt>
+                                <dd class="col-sm-9" id="book-publishdate"></dd>
+                            </dl>
+                            <div class="book-description mt-3">
+                                <h6>简介</h6>
+                                <p id="book-description" class="text-muted"></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary"
+                        onclick="window.library.readBook(this.dataset.bookId)">
+                        <i class="fas fa-book-reader"></i> 阅读
+                    </button>
+                    <button type="button" class="btn btn-success"
+                        onclick="window.library.downloadBook(this.dataset.bookId)">
+                        <i class="fas fa-download"></i> 下载
+                    </button>
+                </div>
+            </div>
         </div>
     </div>
 </body>