Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev
This commit is contained in:
commit
568e89686f
@ -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 {
|
||||
|
||||
@ -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,21 +102,23 @@
|
||||
</div>
|
||||
|
||||
<div class="station-list">
|
||||
<div
|
||||
v-for="station in forcePreset.stations"
|
||||
:key="station.id"
|
||||
class="station-item"
|
||||
>
|
||||
<img
|
||||
src="../../assets/images/路线icon.png"
|
||||
alt="station"
|
||||
class="station-icon"
|
||||
/>
|
||||
<div class="station-info">
|
||||
<span class="station-name">{{ station.name }}</span>
|
||||
<span class="station-distance"
|
||||
>距离灾害点{{ station.distance }}公里</span
|
||||
>
|
||||
<div class="station-list-inner">
|
||||
<div
|
||||
v-for="station in forcePreset.stations"
|
||||
:key="station.id"
|
||||
class="station-item"
|
||||
>
|
||||
<img
|
||||
src="../../assets/images/路线icon.png"
|
||||
alt="station"
|
||||
class="station-icon"
|
||||
/>
|
||||
<div class="station-info">
|
||||
<span class="station-name">{{ station.name }}</span>
|
||||
<span class="station-distance"
|
||||
>距离灾害点{{ station.distance }}公里</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -323,7 +332,7 @@ const vClickOutside = {
|
||||
.stat-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: vw(22);
|
||||
// gap: vw(22);
|
||||
|
||||
.stat-card {
|
||||
// flex: 1;
|
||||
@ -332,21 +341,23 @@ 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{
|
||||
.flexBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -21,6 +21,7 @@ export function useDisasterData() {
|
||||
// 力量预置信息
|
||||
const forcePreset = ref({
|
||||
equipment: 0,
|
||||
materials: 0,
|
||||
bases: 0,
|
||||
personnel: 0,
|
||||
searchRadius: 30, // km
|
||||
|
||||
@ -200,7 +200,7 @@
|
||||
<!-- 底部一键启动按钮 -->
|
||||
<template #footer>
|
||||
<ActionButton
|
||||
text="一键启动"
|
||||
text="响应调度"
|
||||
type="primary"
|
||||
size="medium"
|
||||
@click="handleModalStartDispatch"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user