布局代码提交

src/main.js

@@ -5,8 +5,8 @@ import router from './router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 Vue.use(ElementUI)
-import Plugin from 'v-fit-columns';
+// import Plugin from 'v-fit-cdcolumns';
-Vue.use(Plugin);
+// Vue.use(Plugin);
 import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 

src/view/index.vue

@@ -1,4 +1,36 @@
 <template>
+    <div class="content">
+        <!-- 左边的内容 -->
+        <div class="left-content">
+            <!-- 营业临厅时长 -->
+            <div class="business-hall">
+
+            </div>
+            <!-- 客流量 -->
+            <div class="passenger-flow">
+
+            </div >
+            <!-- 厅内统计 -->
+            <div class='hall-statistics'>
+
+            </div>
+        </div>
+        <!-- 右边的内容 -->
+        <div class="right-content">
+            <!-- 缴费情况 -->
+            <div class="payment">
+
+            </div>
+            <!-- 业务受理 -->
+            <div class="business-acceptance">
+
+            </div>
+            <!-- 服务情况 -->
+            <div class="service">
+
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -18,5 +50,48 @@ methods:{
 </script>
 
 <style>
-
+.content{
+    /* width: 100%;
+     */
+     height: 100%;
+     position: relative;
+}
+.left-content,.right-content{
+    position: absolute;
+    width: 396px;
+    top: 0;
+    height: 980px;
+    /* background-color: aqua; */
+}
+/* 内容板块背景 */
+.left-content>div,.right-content>div{
+    background-image: url(../assets/images/border.png);
+    background-size: 100% 100%;
+    margin-bottom: 5px;
+}
+.left-content .business-hall{
+    height: 378px;
+    
+}
+.left-content .passenger-flow{
+    height: 392px;
+}
+.left-content .hall-statistics{
+    height: 197px;
+}
+.right-content .payment{
+    height: 378px;
+}
+.right-content .business-acceptance{
+    height: 296px;
+}
+.right-content .service{
+    height: 296px;
+}
+.right-content{
+    right: 0;
+}
+.left-content{
+    left: 0;
+}
 </style>