代码提交

src/App.vue

@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="topCenter">
-        <div class="topText">
+        <div class="topText" text="国网南京雨花供电营业厅">
           国网南京雨花供电营业厅
         </div>
         
@@ -52,9 +52,9 @@ export default {
 <style lang="less" scoped>
 .top{
   width: 100%;
-  height: 9.6%;
+  height: 93px;
   display: flex;
-  justify-content: space-between;
+  jjustify-content: space-evenly;
   .topLeft{
     width: 11%;
     height: 55%;
@@ -77,6 +77,14 @@ export default {
       font-size: 35px;
       display: flex;
       align-items: center;
+      color: #ffffff;
+    }
+      .topText:before{
+        content: attr(text);
+        position: absolute;
+        z-index: 10;
+        color:rgb(86, 254, 246);
+        -webkit-mask:linear-gradient(to top , transparent,);
     }
   }
   .topRight{
@@ -86,7 +94,9 @@ export default {
   }
 }
 .main{
-  height: calc(100% - 9.6%);
+  height: calc(1080px - 93px);
   width: 100%;
+  position: relative;
+  top: -40px;
 }
 </style>

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';
-Vue.use(Plugin);
+// import Plugin from 'v-fit-cdcolumns';
+// 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>