<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-05-13 18:08:57
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-05-15 14:20:33
|
* @FilePath: \web\bigScreen\src\views\csmodel\components\reservoirTypeNum.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div class="current-box">
|
<div class="type-num-box">
|
<div class="type-name">
|
工程规模
|
</div>
|
<div>
|
<div class="sub-type">大型水库</div>
|
<div class="num-unit-box">
|
<div class="num">565</div>
|
<div class="unit">座</div>
|
</div>
|
</div>
|
<div>
|
<div class="sub-type">中型水库</div>
|
<div class="num-unit-box">
|
<div class="num">565</div>
|
<div class="unit">座</div>
|
</div>
|
</div>
|
<div>
|
<div class="sub-type">小型水库</div>
|
<div class="num-unit-box">
|
<div class="num">565</div>
|
<div class="unit">座</div>
|
</div>
|
</div>
|
</div>
|
<div class="type-num-box">
|
<div class="type-name">
|
水库类型
|
</div>
|
<div>
|
<div class="sub-type">公益型水库</div>
|
<div class="num-unit-box">
|
<div class="num">565</div>
|
<div class="unit">座</div>
|
</div>
|
</div>
|
<div>
|
<div class="sub-type">电站型水库</div>
|
<div class="num-unit-box">
|
<div class="num">565</div>
|
<div class="unit">座</div>
|
</div>
|
</div>
|
<div>
|
<div class="sub-type">其他水库</div>
|
<div class="num-unit-box">
|
<div class="num">565</div>
|
<div class="unit">座</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.current-box {
|
width: 100%;
|
font-size: 12px;
|
|
.type-num-box {
|
display: flex;
|
|
&>div:not(.type-name) {
|
flex: 1;
|
|
.num-unit-box {
|
display: flex;
|
align-items: baseline;
|
|
|
.num {
|
font-size: 24px;
|
color: #44EFFF;
|
}
|
|
|
}
|
}
|
|
.type-name {
|
padding: 0 24px;
|
display: flex;
|
align-items: center;
|
text-align: center;
|
flex-wrap: wrap;
|
width: 80px;
|
}
|
}
|
}
|
</style>
|
