This commit is contained in:
Zzc 2025-11-25 11:40:41 +08:00
commit 568e89686f
4 changed files with 63 additions and 33 deletions

View File

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

View File

@ -63,7 +63,7 @@
<div class="stat-group">
<div class="stat-card stat-card--base">
<span class="stat-label flexBox"
>应急基地
>应急基地与预置点
<img
src="../../assets/images/SketchPng157040b93d0288f48b67022319d8789e5ccded19d94fa14634044ed62a722b1c.png"
@ -84,6 +84,13 @@
<span class="stat-unit"></span>
</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">
<span class="stat-label">应急人员</span>
@ -95,6 +102,7 @@
</div>
<div class="station-list">
<div class="station-list-inner">
<div
v-for="station in forcePreset.stations"
:key="station.id"
@ -116,6 +124,7 @@
</div>
</div>
</div>
</div>
</template>
<script setup>
@ -323,7 +332,7 @@ const vClickOutside = {
.stat-group {
display: flex;
justify-content: center;
gap: vw(22);
// gap: vw(22);
.stat-card {
// flex: 1;
@ -332,18 +341,20 @@ const vClickOutside = {
align-items: center;
justify-content: center;
gap: vh(8);
padding: vh(12) vw(12) vh(30);
padding: vh(12) 0 vh(30);
border-radius: vw(6);
position: relative;
background: url("../../assets/images/完成里程.png") no-repeat center
bottom;
// background-size: 100% 100%;
width: vw(104);
width: vw(90);
.stat-label {
color: var(--text-white);
font-size: fs(14);
font-family: SourceHanSansCN-Medium, sans-serif;
height: 20px;
width: 70px;
}
.flexBox {
@ -385,10 +396,26 @@ const vClickOutside = {
display: flex;
flex-direction: column;
gap: vh(8);
position: relative;
max-height: vw(120);
overflow-y: auto;
overflow-y: hidden;
margin: vh(5) 0;
&-inner {
display: flex;
flex-direction: column;
gap: vh(8);
animation: scroll 40s linear infinite;
will-change: transform;
padding-right: vw(4); //
//
&:hover {
animation-play-state: paused;
}
}
//
&::-webkit-scrollbar {
width: vw(4);
}
@ -397,18 +424,25 @@ const vClickOutside = {
background: rgba(20, 53, 118, 0.5);
border-radius: vw(2);
}
@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc(-100% + vw(120)));
}
}
.station-item {
display: flex;
align-items: center;
gap: vw(12);
padding: vh(0) vw(12);
// background: rgba(20, 53, 118, 0.3);
background: url("../../assets/images/文本线条框.png") no-repeat center
center;
background-size: 100% 100%;
border-radius: vw(6);
flex-shrink: 0;
.station-icon {
width: vw(32);
height: vh(32);

View File

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

View File

@ -200,7 +200,7 @@
<!-- 底部一键启动按钮 -->
<template #footer>
<ActionButton
text="一键启动"
text="响应调度"
type="primary"
size="medium"
@click="handleModalStartDispatch"