调整排版 新增应急物资字段

This commit is contained in:
huangchenhao 2025-11-25 10:48:33 +08:00
parent 8ed82ad175
commit 83c414932a
3 changed files with 17 additions and 12 deletions

View File

@ -24,7 +24,7 @@
<!-- 左列资源 --> <!-- 左列资源 -->
<div class="force-dispatch__left"> <div class="force-dispatch__left">
<div class="force-dispatch__stat"> <div class="force-dispatch__stat">
<span class="force-dispatch__stat-label_small">应急基地与预置点</span> <span class="force-dispatch__stat-label">应急基地与预置点</span>
<span class="force-dispatch__stat-value"> <span class="force-dispatch__stat-value">
{{ dispatchSuggestion.stations }} {{ dispatchSuggestion.stations }}
<span class="force-dispatch__stat-unit"></span> <span class="force-dispatch__stat-unit"></span>
@ -259,12 +259,7 @@ const handleStartDispatch = () => {
font-size: fs(12); font-size: fs(12);
font-family: SourceHanSansCN-Regular, sans-serif; font-family: SourceHanSansCN-Regular, sans-serif;
color: var(--text-white); color: var(--text-white);
} width: 50px;
.force-dispatch__stat-label_small {
font-size: fs(8);
font-family: SourceHanSansCN-Regular, sans-serif;
color: var(--text-white);
} }
.force-dispatch__stat-value { .force-dispatch__stat-value {

View File

@ -63,7 +63,7 @@
<div class="stat-group"> <div class="stat-group">
<div class="stat-card stat-card--base"> <div class="stat-card stat-card--base">
<span class="stat-label flexBox" <span class="stat-label flexBox"
>应急基地 >应急基地与预置点
<img <img
src="../../assets/images/SketchPng157040b93d0288f48b67022319d8789e5ccded19d94fa14634044ed62a722b1c.png" src="../../assets/images/SketchPng157040b93d0288f48b67022319d8789e5ccded19d94fa14634044ed62a722b1c.png"
@ -84,6 +84,13 @@
<span class="stat-unit"></span> <span class="stat-unit"></span>
</div> </div>
</div> </div>
<div class="stat-card stat-card--materials">
<span class="stat-label">应急物资</span>
<div class="stat-value-wrapper">
<span class="stat-value">{{ forcePreset.materials }}</span>
<span class="stat-unit"></span>
</div>
</div>
<div class="stat-card stat-card--personnel"> <div class="stat-card stat-card--personnel">
<span class="stat-label">应急人员</span> <span class="stat-label">应急人员</span>
@ -323,7 +330,7 @@ const vClickOutside = {
.stat-group { .stat-group {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: vw(22); // gap: vw(22);
.stat-card { .stat-card {
// flex: 1; // flex: 1;
@ -331,19 +338,21 @@ const vClickOutside = {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: vh(8); // gap: vh(8);
padding: vh(12) vw(12) vh(30); padding: vh(12) 0 vh(30);
border-radius: vw(6); border-radius: vw(6);
position: relative; position: relative;
background: url("../../assets/images/完成里程.png") no-repeat center background: url("../../assets/images/完成里程.png") no-repeat center
bottom; bottom;
// background-size: 100% 100%; // background-size: 100% 100%;
width: vw(104); width: vw(90);
.stat-label { .stat-label {
color: var(--text-white); color: var(--text-white);
font-size: fs(14); font-size: fs(14);
font-family: SourceHanSansCN-Medium, sans-serif; font-family: SourceHanSansCN-Medium, sans-serif;
height: 20px;
width:70px;
} }
.flexBox{ .flexBox{

View File

@ -21,6 +21,7 @@ export function useDisasterData() {
// 力量预置信息 // 力量预置信息
const forcePreset = ref({ const forcePreset = ref({
equipment: 0, equipment: 0,
materials: 0,
bases: 0, bases: 0,
personnel: 0, personnel: 0,
searchRadius: 30, // km searchRadius: 30, // km