feat: 新增最左边 info 区域
This commit is contained in:
parent
2efe4c6c66
commit
c420608387
@ -3,6 +3,26 @@
|
||||
[class.alert-on]="alertLevel === 'orange'"
|
||||
[class.alert-red]="alertLevel === 'red'"
|
||||
>
|
||||
<div class="info">
|
||||
<div class="info-panel">
|
||||
<div class="info-title">防控区信息</div>
|
||||
<div class="info-content">
|
||||
<dl class="info-dl">
|
||||
<dt>防控区名称</dt><dd>大礼村委会次重点防控区</dd>
|
||||
<dt>防控区编号</dt><dd>ZJ-DL-FK05</dd>
|
||||
<dt>防控区概况</dt><dd class="break">面积1.14km²，包含斜坡单元2个，地质灾害隐患点6处，重点巡查区2个，风险点2处，威胁272人。</dd>
|
||||
</dl>
|
||||
<dl class="info-people">
|
||||
<dt>网格责任人</dt><dd class="contact"><span class="name">刘江平</span><span class="phone">15586362528</span></dd>
|
||||
<dt>网格管理员</dt><dd class="contact"><span class="name">余泽蛟</span><span class="phone">19371312580</span></dd>
|
||||
<dt>网格专管员</dt><dd class="contact"><span class="name">邴香举</span><span class="phone">13997659222</span></dd>
|
||||
<dt>网格协管员</dt><dd class="contact"><span class="name">韩超</span><span class="phone">15172881786</span></dd>
|
||||
<dt>防控区巡查员</dt><dd class="contact"><span class="name">吴大华</span><span class="phone">18572355263</span></dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="info-banner">地灾防控 人人有责</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<div class="chart-container" id="chartContainer">
|
||||
<div id="stationInfoTitle" class="station-info-title">{{ selectedTitle }}</div>
|
||||
|
||||
@ -88,7 +88,8 @@ body.alert-mode-red::before {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
/* 三列布局：2/8 info（左）、3/8 left（中）、3/8 right（右） */
|
||||
grid-template-columns: 2fr 3fr 3fr;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2);
|
||||
}
|
||||
@ -124,11 +125,147 @@ body.alert-mode-red::before {
|
||||
}
|
||||
|
||||
.left,
|
||||
.info,
|
||||
.right {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 指定三列中的列序：info->1, left->2, right->3 */
|
||||
.info { grid-column: 1; }
|
||||
.left { grid-column: 2; }
|
||||
.right { grid-column: 3; }
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--panel-bg);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: var(--radius-2);
|
||||
padding: var(--space-3);
|
||||
color: var(--color-fg);
|
||||
line-height: 1.6;
|
||||
/* 面板自身可滚动；banner 不再固定底部 */
|
||||
overflow: auto;
|
||||
/* 占满整列高度，并至少与视口同高 */
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-weight: 700;
|
||||
/* 大屏自适应字号（进一步小一档） */
|
||||
font-size: clamp(1.05rem, 1.2vw, 1.6rem);
|
||||
margin-bottom: var(--space-2);
|
||||
color: #dfe9ff;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
/* 大屏自适应字号（进一步小一档） */
|
||||
font-size: clamp(0.95rem, 1vw, 1.35rem);
|
||||
color: #cbd9ff;
|
||||
white-space: normal;
|
||||
line-height: 1.7;
|
||||
/* 自然流布局：紧跟 banner，不撑开到面板底部 */
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* 结构化信息列表布局与间距优化 */
|
||||
.info-content .info-dl {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
column-gap: 0.8em;
|
||||
row-gap: 0.6em;
|
||||
margin: 0;
|
||||
}
|
||||
.info-content dt {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
color: #dfe9ff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.info-content dd {
|
||||
margin: 0;
|
||||
color: #cbd9ff;
|
||||
}
|
||||
.info-content dd.break {
|
||||
padding-bottom: 0.5em;
|
||||
margin-bottom: 0.4em;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
/* 人员信息三列对齐：角色 | 姓名 | 电话 */
|
||||
.info-content .info-people {
|
||||
display: grid;
|
||||
/* 两列：角色 | 联系框(含姓名-连接线-电话) */
|
||||
grid-template-columns: auto 1fr;
|
||||
column-gap: 0.6em;
|
||||
row-gap: 0.45em;
|
||||
margin: 0.6em 0 0 0;
|
||||
align-items: center;
|
||||
}
|
||||
.info-content .info-people dt {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
color: #dfe9ff;
|
||||
white-space: nowrap;
|
||||
text-align: left; /* 角色靠左 */
|
||||
}
|
||||
.info-content .info-people dd {
|
||||
margin: 0;
|
||||
}
|
||||
.info-content .info-people dd.contact {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.6em; /* 名字与电话之间间距 */
|
||||
}
|
||||
.info-content .info-people dd.contact .name {
|
||||
color: #cbd9ff;
|
||||
white-space: nowrap;
|
||||
/* 名字占据除电话外的全部宽度 */
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.15em 0.55em;
|
||||
}
|
||||
.info-content .info-people dd.contact .phone {
|
||||
color: #cbd9ff;
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.01em;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.15em 0.55em;
|
||||
flex: 0 0 auto; /* 电话保持自身宽度 */
|
||||
}
|
||||
|
||||
/* 底部红色告示条 */
|
||||
.info-banner {
|
||||
margin-top: var(--space-3);
|
||||
padding: 0.9em 1.1em; /* 注意内部留白 */
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
border-radius: 0.6rem;
|
||||
color: #ff4d4f; /* 红色字体 */
|
||||
background: transparent; /* 无红色背景 */
|
||||
border: 2px solid #ff4d4f; /* 加厚红色边框 */
|
||||
/* 自适应字号 */
|
||||
font-size: clamp(0.95rem, 1.15vw, 1.35rem);
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user