yangyuqing/new-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化设计图纸布局：立面图/剖面图单列展示，总平面/平面图高度增加25%

Browse Source
This commit is contained in:
yangyuqing
2026-06-03 00:18:55 +08:00
parent 92afe8d88c
commit cbb655274b
2 changed files with 98 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
css/style.css
View File

@@ -1201,6 +1201,86 @@ body {
height: auto; 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;
}
}
/* ======================================== /* ========================================
响应式调整 响应式调整
======================================== */ ======================================== */

36
drawings.html
View File

@@ -64,7 +64,7 @@
<section class="section" id="site-plan"> <section class="section" id="site-plan">
<div class="container"> <div class="container">
<h2 class="section-title">总平面图</h2> <h2 class="section-title">总平面图</h2>
<div class="drawing-full"> <div class="drawing-full enlarged">
<img src="images/drawing-siteplan.jpg" alt="总平面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"> <img src="images/drawing-siteplan.jpg" alt="总平面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text large" style="display:none;">总平面图</div> <div class="placeholder-text large" style="display:none;">总平面图</div>
</div> </div>
@@ -75,21 +75,21 @@
<section class="section section-alt" id="floor-plan"> <section class="section section-alt" id="floor-plan">
<div class="container"> <div class="container">
<h2 class="section-title">一层平面图</h2> <h2 class="section-title">一层平面图</h2>
<div class="drawing-full"> <div class="drawing-full enlarged">
<img src="images/drawing-floorplan.jpg" alt="一层平面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"> <img src="images/drawing-floorplan.jpg" alt="一层平面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text large" style="display:none;">一层平面图</div> <div class="placeholder-text large" style="display:none;">一层平面图</div>
</div> </div>
</div> </div>
</section> </section>
<!-- 立面图（4张） --> <!-- 立面图（4张，单列展示） -->
<section class="section" id="elevations"> <section class="section" id="elevations">
<div class="container"> <div class="container">
<h2 class="section-title">立面图</h2> <h2 class="section-title">立面图</h2>
<div class="card-grid two-columns"> <div class="single-column-layout">
<!-- 东立面 --> <!-- 东立面 -->
<div class="card"> <div class="card full-width-card">
<div class="card-image drawing-img"> <div class="card-image drawing-img wide-full">
<img src="images/drawing-elevation-east.jpg" alt="东立面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"> <img src="images/drawing-elevation-east.jpg" alt="东立面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text" style="display:none;">东立面图</div> <div class="placeholder-text" style="display:none;">东立面图</div>
</div> </div>
@@ -99,8 +99,8 @@
</div> </div>
<!-- 南立面 --> <!-- 南立面 -->
<div class="card"> <div class="card full-width-card">
<div class="card-image drawing-img"> <div class="card-image drawing-img wide-full">
<img src="images/drawing-elevation-south.jpg" alt="南立面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"> <img src="images/drawing-elevation-south.jpg" alt="南立面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text" style="display:none;">南立面图</div> <div class="placeholder-text" style="display:none;">南立面图</div>
</div> </div>
@@ -110,8 +110,8 @@
</div> </div>
<!-- 西立面 --> <!-- 西立面 -->
<div class="card"> <div class="card full-width-card">
<div class="card-image drawing-img"> <div class="card-image drawing-img wide-full">
<img src="images/drawing-elevation-west.jpg" alt="西立面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"> <img src="images/drawing-elevation-west.jpg" alt="西立面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text" style="display:none;">西立面图</div> <div class="placeholder-text" style="display:none;">西立面图</div>
</div> </div>
@@ -121,8 +121,8 @@
</div> </div>
<!-- 北立面 --> <!-- 北立面 -->
<div class="card"> <div class="card full-width-card">
<div class="card-image drawing-img"> <div class="card-image drawing-img wide-full">
<img src="images/drawing-elevation-north.jpg" alt="北立面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"> <img src="images/drawing-elevation-north.jpg" alt="北立面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text" style="display:none;">北立面图</div> <div class="placeholder-text" style="display:none;">北立面图</div>
</div> </div>
@@ -134,14 +134,14 @@
</div> </div>
</section> </section>
<!-- 剖面图（2张） --> <!-- 剖面图（2张，单列展示） -->
<section class="section section-alt" id="sections"> <section class="section section-alt" id="sections">
<div class="container"> <div class="container">
<h2 class="section-title">剖面图</h2> <h2 class="section-title">剖面图</h2>
<div class="card-grid two-columns"> <div class="single-column-layout">
<!-- 1-1剖面 --> <!-- 1-1剖面 -->
<div class="card"> <div class="card full-width-card">
<div class="card-image drawing-img"> <div class="card-image drawing-img wide-full">
<img src="images/drawing-section-1.jpg" alt="1-1剖面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"> <img src="images/drawing-section-1.jpg" alt="1-1剖面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text" style="display:none;">1-1剖面图</div> <div class="placeholder-text" style="display:none;">1-1剖面图</div>
</div> </div>
@@ -151,8 +151,8 @@
</div> </div>
<!-- 2-2剖面 --> <!-- 2-2剖面 -->
<div class="card"> <div class="card full-width-card">
<div class="card-image drawing-img"> <div class="card-image drawing-img wide-full">
<img src="images/drawing-section-2.jpg" alt="2-2剖面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"> <img src="images/drawing-section-2.jpg" alt="2-2剖面图" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text" style="display:none;">2-2剖面图</div> <div class="placeholder-text" style="display:none;">2-2剖面图</div>
</div> </div>