<template>
    <div class="content">
        <!-- 左边的内容 -->
        <div class="left-content">
            <!-- 营业临厅时长 -->
            <div class="business-hall">
                <div class="title">

                </div>
            </div>
            <!-- 客流量 -->
            <div class="passenger-flow">
                <div class="title">

                </div>
            </div >
            <!-- 厅内统计 -->
            <div class='hall-statistics'>
                <div class="title">

                </div>
            </div>
        </div>
        <!-- 右边的内容 -->
        <div class="right-content">
            <!-- 缴费情况 -->
            <div class="payment">
                <div class="title">

                </div>
            </div>
            <!-- 业务受理 -->
            <div class="business-acceptance">
                <div class="title">

                </div>
            </div>
            <!-- 服务情况 -->
            <div class="service">
                <div class="title">

                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
name:'index',
data(){
    return{
        
    }
},
mounted(){

},
methods:{
}
}
</script>

<style>
.content{
    width: 100%;
     height: 100%;
     position: relative;
}
.left-content,.right-content{
    position: absolute;
    width: 20.6%;
    top: 0;
    height: 100%;
    /* background-color: aqua; */
}
/* 内容板块背景 */
.left-content>div,.right-content>div{
    background-image: url(../assets/images/border.png);
    background-size: 100% 100%;
    margin-bottom: 5px;
    padding: 10px;
}
/* 标题的样式 */
.left-content>div>.title,.right-content>div>.title{
    width: 100%;
    background-image: url(../assets/images/border-title.png);
    height: 30px;
    background-size: 100% 100%;
    box-sizing: border-box;
}
.left-content .business-hall{
    height: 38.2%;
    
}
.left-content .passenger-flow{
    height: 39.7%;
}
.left-content .hall-statistics{
    height: 20.4%;
}
.right-content .payment{
    height: 38.3%;
}
.right-content .business-acceptance{
    height: 30%;
}
.right-content .service{
    height: 30%;
}
.right-content{
    right: 0;
}
.left-content{
    left: 0;
}
</style>