diff --git a/css/style.css b/css/style.css index ff8d8e9..38f778c 100644 --- a/css/style.css +++ b/css/style.css @@ -1201,6 +1201,86 @@ body { height: auto; } +/* ======================================== + 设计图纸 - 单列布局样式 + ======================================== */ + +/* 总平面图和一层平面图 - 高度增加三分之一 */ +.drawing-full.enlarged { + max-height: 100vh !important; /* 从80vh增加到100vh,约增加25% */ +} + +.drawing-full.enlarged img { + max-height: 100vh !important; +} + +/* 单列布局容器 */ +.single-column-layout { + display: flex; + flex-direction: column; + gap: var(--spacing-lg); +} + +/* 全宽卡片 */ +.full-width-card { + width: 100%; + max-width: none; +} + +/* 全宽图片容器 */ +.drawing-img.wide-full { + height: auto; + min-height: 500px; + max-height: 70vh; +} + +.drawing-img.wide-full img { + width: 100%; + height: auto; + max-height: 70vh; + object-fit: contain; + background: #FFFFFF; +} + +/* 响应式调整 */ +@media (max-width: 1024px) { + .drawing-full.enlarged { + max-height: 80vh !important; + } + + .drawing-full.enlarged img { + max-height: 80vh !important; + } + + .drawing-img.wide-full { + min-height: 400px; + max-height: 60vh; + } + + .drawing-img.wide-full img { + max-height: 60vh; + } +} + +@media (max-width: 768px) { + .drawing-full.enlarged { + max-height: 60vh !important; + } + + .drawing-full.enlarged img { + max-height: 60vh !important; + } + + .drawing-img.wide-full { + min-height: 300px; + max-height: 50vh; + } + + .drawing-img.wide-full img { + max-height: 50vh; + } +} + /* ======================================== 响应式调整 ======================================== */ diff --git a/drawings.html b/drawings.html index 79bdc6f..8266ec1 100644 --- a/drawings.html +++ b/drawings.html @@ -64,7 +64,7 @@

总平面图

-
+
总平面图
@@ -75,21 +75,21 @@

一层平面图

-
+
一层平面图
- +

立面图

-
+
-
-
+
+
东立面图
@@ -99,8 +99,8 @@
-
-
+
+
南立面图
@@ -110,8 +110,8 @@
-
-
+
+
西立面图
@@ -121,8 +121,8 @@
-
-
+
+
北立面图
@@ -134,14 +134,14 @@
- +

剖面图

-
+
-
-
+
+
1-1剖面图
@@ -151,8 +151,8 @@
-
-
+
+
2-2剖面图