<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-18 16:18:17
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-04 13:50:06
|
* @FilePath: \hbsl\src\views\home\index.vue
|
* @Description: 小区-栋-层-房屋
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
|
<template>
|
<div class="container">
|
<div class="left-container">
|
<div class="one">
|
<div class="title-box">
|
<div class="title">标题名称</div>
|
</div>
|
<div class="content-box">
|
<pie-echarts></pie-echarts>
|
</div>
|
</div>
|
|
<div class="two">
|
<div class="title-box">
|
<div class="title">每日8时超汛限</div>
|
</div>
|
<div class="content-box">
|
<bar-echarts></bar-echarts>
|
</div>
|
</div>
|
|
<div class="three">
|
<div class="title-box">
|
<div class="title">连续10天超汛限</div>
|
</div>
|
<div class="content-box"></div>
|
</div>
|
</div>
|
|
<div class="right-container">
|
<div class="one">
|
<div class="title-box">
|
<div class="title">水库数量分布</div>
|
</div>
|
<div class="content-box"></div>
|
</div>
|
|
<div class="two">
|
<div class="title-box">
|
<div class="title">水库规模分布</div>
|
</div>
|
<div class="content-box"></div>
|
</div>
|
|
<div class="three">
|
<div class="title-box">
|
<div class="title">泄调洪水库数量</div>
|
</div>
|
<div class="content-box"></div>
|
</div>
|
|
<div class="four">
|
<div class="title-box">
|
<div class="title">降雨等级分布</div>
|
</div>
|
<div class="content-box"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import pieEcharts from './components/pieEcharts.vue'
|
import barEcharts from './components/barEcharts.vue'
|
|
export default {
|
components: { pieEcharts ,barEcharts},
|
|
data () {
|
return {
|
|
}
|
},
|
|
created () {
|
|
},
|
|
mounted () {
|
|
},
|
|
methods: {
|
|
},
|
|
destroyed () {
|
|
},
|
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
color: #fff;
|
width: 100%;
|
|
.left-container,
|
.right-container {
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
top: 0;
|
width: 408px;
|
height: 100%;
|
pointer-events: auto;
|
background: rgba(28, 115, 195, 0.05);
|
|
&>div {
|
display: flex;
|
flex-direction: column;
|
|
.title-box {
|
height: 38px;
|
line-height: 38px;
|
background: url(/images/title-box.png) no-repeat center / 100% 100%;
|
|
.title {
|
margin-left: 30px;
|
text-align: left;
|
|
font-size: 18px;
|
font-family: Alibaba PuHuiTi;
|
font-weight: bold;
|
font-style: italic;
|
color: #F6F9FE;
|
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
|
|
background: linear-gradient(0deg, rgba(14, 197, 236, 0.36) 0%, rgba(49, 190, 255, 0.36) 0%, rgba(239, 252, 254, 0.36) 58.7646484375%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparen
|
}
|
}
|
|
.content-box {
|
flex: 1;
|
}
|
}
|
}
|
|
.left-container {
|
left: 0;
|
|
.one {
|
height: 258px;
|
}
|
|
.two {
|
height: 454px;
|
}
|
|
.three {
|
flex: 1;
|
}
|
}
|
|
.right-container {
|
right: 0;
|
|
.one {
|
height: 266px;
|
}
|
|
.two {
|
height: 260px;
|
}
|
|
.three {
|
height: 210px;
|
}
|
|
.four {
|
flex: 1;
|
}
|
}
|
}
|
</style>
|
