<template>
|
<div class="right">
|
<div class="right-top">
|
<span>水深流速结果</span>
|
</div>
|
<div class="right-content" >
|
<div class="listinfo-title">受灾统计</div>
|
<div class="container">
|
<div class="name">受灾人口：1000人</div>
|
<div class="name">受灾房屋：530户</div>
|
<div class="name">降雨模型： XXX危险性评估模型</div>
|
<div class="name">财产损失：3200万元</div>
|
<div class="name">受灾道路：7条，总淹没距离24公里</div>
|
<div class="name">监测设备：15台设备。占比7%</div>
|
<div class="name">避险路线：2条不可通过</div>
|
</div>
|
<div class="listinfo-title">危险等级分布</div>
|
|
<Table></Table>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import Table from "../tools/Table.vue"
|
</script>
|
<style lang="less" scoped>
|
@import url("../../assets/css/right.css");
|
.container {
|
padding: 5px 20px;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
color: #fff;
|
.name {
|
padding: 6px;
|
width: 100%;
|
}
|
.listinfo-btn {
|
margin: 5px;
|
}
|
}
|
.listinfo-title {
|
color: #fff;
|
font-size: 20px;
|
font-weight: 700;
|
margin: 10px;
|
}
|
</style>
|
