新增结构单元拆解板块（屋面4图+柱身图文2:1），重构性能分析3板块（受力分析/节能计算/光环境）
This commit is contained in:
234
css/style.css
234
css/style.css
@@ -962,3 +962,237 @@ body {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
结构单元拆解 - 2×2图片网格
|
||||
======================================== */
|
||||
.image-grid-2x2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.grid-item img {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
object-fit: contain;
|
||||
background: #FFFFFF;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-soft);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.grid-item.with-caption {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-caption {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--spacing-sm);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
文字在右，图片在左（比例2:1）
|
||||
======================================== */
|
||||
.text-image-layout {
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
align-items: flex-start;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.text-image-layout.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.layout-images {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.layout-text {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.layout-image-single img {
|
||||
width: 100%;
|
||||
max-height: 60vh;
|
||||
object-fit: contain;
|
||||
background: #FFFFFF;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
性能分析 - 全宽大图
|
||||
======================================== */
|
||||
.full-width-image {
|
||||
margin: var(--spacing-lg) 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.full-width-image img {
|
||||
width: 100%;
|
||||
max-height: 70vh;
|
||||
object-fit: contain;
|
||||
background: #FFFFFF;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.placeholder-text.large {
|
||||
min-height: 400px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
性能分析 - 左侧图+右侧表格布局
|
||||
======================================== */
|
||||
.text-image-table-layout {
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
align-items: flex-start;
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.layout-images-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.image-pair img {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
object-fit: contain;
|
||||
background: #FFFFFF;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.layout-table-right {
|
||||
flex: 1.5;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
性能分析 - 左侧表格+右侧文字布局
|
||||
======================================== */
|
||||
.table-text-layout {
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.layout-table-left {
|
||||
flex: 1.5;
|
||||
}
|
||||
|
||||
.layout-text-right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
性能分析表格样式
|
||||
======================================== */
|
||||
.performance-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-soft);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.performance-table thead {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.performance-table th {
|
||||
padding: 1rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.performance-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.performance-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.performance-table tbody tr:hover {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.performance-table.wide {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.performance-table.wide th,
|
||||
.performance-table.wide td {
|
||||
padding: 0.6rem 0.5rem;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
光照分析滑块特殊样式
|
||||
======================================== */
|
||||
.image-slider.light-analysis .slider-item {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.image-slider.light-analysis .slider-item img {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
响应式调整
|
||||
======================================== */
|
||||
@media (max-width: 1024px) {
|
||||
.text-image-layout,
|
||||
.text-image-layout.reverse,
|
||||
.text-image-table-layout,
|
||||
.table-text-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layout-text,
|
||||
.layout-table-right,
|
||||
.layout-text-right {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item img {
|
||||
height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.image-grid-2x2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-item img {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.performance-table th,
|
||||
.performance-table td {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.full-width-image img {
|
||||
max-height: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user