132 lines
3.2 KiB
Vue
132 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<div class="disaster-analysis">
|
||
|
|
<!-- <div class="disaster-analysis__location">
|
||
|
|
<img
|
||
|
|
src="../../assets/images/SketchPng6b1bc7da82dd750ccb3b0a21a6fb46e0173d2fbabde3c21d83e92a2bc004dcfc.png"
|
||
|
|
alt="location"
|
||
|
|
class="location-icon"
|
||
|
|
/>
|
||
|
|
<span class="location-text">地理位置</span>
|
||
|
|
<img
|
||
|
|
src="../../assets/images/SketchPng52c0048cd3e760896c35ba9be5433c689d4c5063439ad54d40a678a1b2b20ca0.png"
|
||
|
|
alt="arrow"
|
||
|
|
class="arrow-icon"
|
||
|
|
/>
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
<div class="disaster-analysis__content">
|
||
|
|
<div class="disaster-analysis__row">
|
||
|
|
<DataField
|
||
|
|
label="灾害类型"
|
||
|
|
:value="disasterInfo.type"
|
||
|
|
:icon="DataFieldIcon1"
|
||
|
|
/>
|
||
|
|
<DataField
|
||
|
|
label="损坏方量"
|
||
|
|
:value="disasterInfo.volume"
|
||
|
|
:unit="disasterInfo.volumeUnit"
|
||
|
|
:icon="DataFieldIcon2"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="disaster-analysis__row">
|
||
|
|
<DataField
|
||
|
|
label="滑坡体长度"
|
||
|
|
:value="disasterInfo.length"
|
||
|
|
:unit="disasterInfo.lengthUnit"
|
||
|
|
:icon="DataFieldIcon3"
|
||
|
|
/>
|
||
|
|
<DataField
|
||
|
|
label="滑坡体宽度"
|
||
|
|
:value="disasterInfo.width"
|
||
|
|
:unit="disasterInfo.widthUnit"
|
||
|
|
:icon="DataFieldIcon4"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="disaster-analysis__row">
|
||
|
|
<DataField
|
||
|
|
label="人员伤亡"
|
||
|
|
:value="disasterInfo.casualties"
|
||
|
|
unit="人"
|
||
|
|
color-type="success"
|
||
|
|
:icon="DataFieldIcon5"
|
||
|
|
/>
|
||
|
|
<DataField
|
||
|
|
label="车辆损坏"
|
||
|
|
:value="disasterInfo.vehicles"
|
||
|
|
unit="台"
|
||
|
|
color-type="success"
|
||
|
|
:icon="DataFieldIcon6"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { inject } from "vue";
|
||
|
|
import DataField from "../shared/DataField.vue";
|
||
|
|
|
||
|
|
import DataFieldIcon1 from "../../assets/images/DataField/icon-1.png";
|
||
|
|
import DataFieldIcon2 from "../../assets/images/DataField/icon-2.png";
|
||
|
|
import DataFieldIcon3 from "../../assets/images/DataField/icon-3.png";
|
||
|
|
import DataFieldIcon4 from "../../assets/images/DataField/icon-4.png";
|
||
|
|
import DataFieldIcon5 from "../../assets/images/DataField/icon-5.png";
|
||
|
|
import DataFieldIcon6 from "../../assets/images/DataField/icon-6.png";
|
||
|
|
|
||
|
|
const { disasterInfo } = inject("disasterData");
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
@use "@/styles/mixins.scss" as *;
|
||
|
|
@use "../../assets/styles/common.scss" as *;
|
||
|
|
|
||
|
|
.disaster-analysis {
|
||
|
|
padding: 0;
|
||
|
|
|
||
|
|
&__location {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: vw(8);
|
||
|
|
padding: vh(8) vw(12);
|
||
|
|
background: rgba(20, 53, 118, 0.5);
|
||
|
|
border-radius: vw(4);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background 0.3s;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: rgba(20, 53, 118, 0.7);
|
||
|
|
}
|
||
|
|
|
||
|
|
.location-icon {
|
||
|
|
width: vw(14);
|
||
|
|
height: vh(14);
|
||
|
|
}
|
||
|
|
|
||
|
|
.location-text {
|
||
|
|
color: var(--text-white);
|
||
|
|
font-size: fs(14);
|
||
|
|
font-family: SourceHanSansCN-Medium, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrow-icon {
|
||
|
|
width: vw(10);
|
||
|
|
height: vh(10);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: vh(12);
|
||
|
|
}
|
||
|
|
|
||
|
|
&__row {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: vw(16);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|