overview.vue

<template>
 <div class="overview-wrapper height100">
      <div class="middel-part">
            <!--地区展板播放统计-->
            <areas class="table-list"></areas>
            <!--中间地图-->
            <div class="map-container">
                <borderNums></borderNums>
                <mapDiv></mapDiv>
            </div>
            <!--全国点播板块-->
            <top10 class="table-list"></top10>
        </div>
         <div class="echartspanel">
             <div class="echarts-box left">
                 <demand class="echarts-panel"></demand>
             </div>
            <div class="echarts-box right">
                <interact  class="echarts-panel"></interact>           
            </div>       
        </div>
 </div>
</template>
<script>
import {
    demand,
    interact,
    areas,
    top10,
    mapDiv,
    borderNums
  } from './components'
export default {
    data(){
        return {

        }
    },
     components:{demand, interact , areas, top10, mapDiv, borderNums},
}
</script>
<style lang="less" scoped>
.overview-wrapper{
    .middel-part{
        display: flex;
        height: 50vh;
        justify-content: space-between;
        overflow:hidden;
        .table-list{
            width: 25vw;
            height: 100%;
            background: @party-white;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
            border-radius: 8px;
            padding: 20px;
        }
        .map-container{
            position: relative;
            width: calc(100% - 50vw);
            height: 100%;
        }
    }
   /deep/ .common-title{
        .icon-title{
            width: 20px;
            vertical-align: middle;
        }
        .title{
            font-weight: 500;
            font-size: 20px;
            color: @font-color;
            line-height: 20px;
            vertical-align: middle;
            margin-left: 12px;
        }
        .bg{
            width: 100%;
        }
    }
    //列表
    .table-list{
     /deep/.list-of-body{
            height: calc(100% - 50px);
            box-sizing: border-box;
            ul{
                display: flex;
                align-items: flex-start;
                font-size: 16px;
                padding-left: 20px;
                box-sizing: border-box;
                li{
                    line-height: 40px;
                    &.f1{
                       width: 10%;
                    }
                    &.f2{
                       width: 20%;
                    }
                    &.f3{
                        width: 30%;
                    }
                    &.f5{
                        width: 50%;
                    }
                    &.f6{
                        width: 60%;
                    }
                    &.f7{
                        width: 70%;
                    }
                    div.title{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        padding-right: 10px;
                    }
                }
            }
            .body-title{
                color: @font-color;
            }
            .body-content{
                height: calc(100% - 40px);
                overflow-y: hidden;
                .body-item{
                    height: 40px;
                    background-color: @party-bg-gray;
                    margin-bottom: 3px;
                    color: @font-color;
                }
            }
        }
    }
    // echarts 样式
     .echartspanel{
         height: calc(100% - 50vh);
         padding-top: 20px;
         .echarts-box{
            height: 100%;
            width: 50%;
            display: inline-block;
            box-sizing: border-box;
           &.left{
               padding-right: 10px;
               float: left;
           }
           &.right{
               padding-left: 10px;
               float: right;
           }
           .echarts-panel{
                background:@party-white;
                border: 1px solid #FFFFFF;
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
                border-radius: 8px;
                height: 100%;
                padding: 20px;
           }
        }
     }
}
</style>