重构为多页导航架构：8个独立页面，前期分析4子板块，设计表现6图，设计图纸完整展示

2026-06-02 21:25:45 +08:00
parent ec29003082
commit 8a86668eb1
14 changed files with 1174 additions and 379 deletions
--- a/css/style.css
+++ b/css/style.css
@@ -412,6 +412,168 @@ body {
    letter-spacing: 1px;
 }

+/* ========================================
+   多页导航 - 页面标题区域
+   ======================================== */
+.page-header {
+    padding: 8rem 2rem 4rem;
+    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
+    text-align: center;
+    margin-top: 70px;
+}
+
+.page-title {
+    font-size: 3rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 1rem;
+    letter-spacing: 2px;
+}
+
+.page-subtitle {
+    font-size: 1.2rem;
+    color: var(--primary-color);
+    letter-spacing: 3px;
+    font-weight: 500;
+}
+
+/* ========================================
+   子板块标题
+   ======================================== */
+.subsection {
+    margin-bottom: var(--spacing-xl);
+}
+
+.subsection:last-child {
+    margin-bottom: 0;
+}
+
+.subsection-title {
+    font-size: 1.8rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: var(--spacing-md);
+    padding-left: 1rem;
+    border-left: 4px solid var(--primary-color);
+}
+
+/* ========================================
+   内容块
+   ======================================== */
+.content-block {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: var(--spacing-md);
+}
+
+/* ========================================
+   按钮样式
+   ======================================== */
+.hero-buttons {
+    margin-top: var(--spacing-lg);
+}
+
+.btn {
+    display: inline-block;
+    padding: 1rem 2.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: 30px;
+    transition: var(--transition);
+    letter-spacing: 1px;
+}
+
+.btn-primary {
+    background: var(--primary-color);
+    color: white;
+    box-shadow: var(--shadow-soft);
+}
+
+.btn-primary:hover {
+    background: var(--primary-dark);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-medium);
+}
+
+/* ========================================
+   设计图纸 - 完整展示（避免滚动）
+   ======================================== */
+.drawing-full {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    background: #FFFFFF;
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-soft);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
+}
+
+.drawing-full img {
+    max-width: 100%;
+    max-height: 80vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    display: block;
+}
+
+.drawing-img {
+    height: 400px;
+    background: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.drawing-img img {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    display: block;
+}
+
+.placeholder-text.large {
+    font-size: 1.5rem;
+    color: var(--text-light);
+}
+
+/* ========================================
+   画廊样式优化
+   ======================================== */
+.gallery-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--spacing-md);
+    margin-top: var(--spacing-md);
+}
+
+.gallery-item.large {
+    grid-column: span 2;
+}
+
+.gallery-caption {
+    padding: var(--spacing-sm) var(--spacing-md);
+    text-align: center;
+}
+
+.gallery-caption h3 {
+    font-size: 1.3rem;
+    color: var(--text-primary);
+    margin-bottom: var(--spacing-xs);
+}
+
+.gallery-caption p {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
 /* ========================================
   响应式设计
   ======================================== */