117 lines
2.3 KiB
Vue
117 lines
2.3 KiB
Vue
<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> |