diff --git a/src/views/manageDesk/index.vue b/src/views/manageDesk/index.vue
index a27cdb6..dbefa7e 100644
--- a/src/views/manageDesk/index.vue
+++ b/src/views/manageDesk/index.vue
@@ -23,24 +23,83 @@
 
           <border-box-5 class="top-left-box-1">
             <div class="tlb-text">
-              <div>22.0</div>
-              <div class="small-text">66</div>
-              <div class="small-text">0</div>
+              <div>{{ topLeftCard1Data[0] }}</div>
+              <div class="small-text">{{ topLeftCard1Data[1] }}</div>
+              <div class="small-text">{{ topLeftCard1Data[2] }}</div>
             </div>
           </border-box-5>
 
           <border-box-5 class="top-left-box-2" :reverse="true">
             <div class="tlb-text">
-              <div>0.1</div>
-              <div class="small-text">66</div>
-              <div class="small-text">0</div>
+              <div>{{ topLeftCard2Data[0] }}</div>
+              <div class="small-text">{{ topLeftCard2Data[1] }}</div>
+              <div class="small-text">{{ topLeftCard2Data[2] }}</div>
             </div>
           </border-box-5>
         </div>
+
+        <div class="top-right">
+          <polyline-chart>
+            <div class="title-item">
+              设备完好率月趋势
+              <decoration-3 />
+            </div>
+          </polyline-chart>
+          <polyline-chart>
+            <div class="title-item">
+              设备故障月趋势
+              <decoration-3 />
+            </div>
+          </polyline-chart>
+        </div>
       </div>
 
       <div class="bottom">
-        <div class="bottom-left"></div>
+        <border-box-6 class="bottom-left">
+          <decoration-4 class="bottom-left-decoration-1" />
+          <decoration-4 class="bottom-left-decoration-2" />
+
+          <div class="bottom-left-item">
+            this is bottom left item
+          </div>
+          <div class="bottom-left-item">
+            this is bottom left item
+          </div>
+        </border-box-6>
+
+        <div class="bottom-right">
+          <border-box-6 class="bottom-right-item">
+            <div class="title-item">
+              <img src="./img/1.png" />人员贡献排行榜
+            </div>
+
+            <scroll-board :data="bottomRightScrollBorad1Data" />
+          </border-box-6>
+
+          <border-box-6 class="bottom-right-item">
+            <div class="title-item">
+              <img src="./img/2.png" />故障设备排行榜
+            </div>
+
+            <scroll-board :data="bottomRightScrollBorad2Data" />
+          </border-box-6>
+
+          <border-box-6 class="bottom-right-item">
+            <div class="title-item">
+              <img src="./img/3.png" />常见故障排行榜
+            </div>
+
+            <scroll-board :data="bottomRightScrollBorad3Data" />
+          </border-box-6>
+
+          <border-box-6 class="bottom-right-item">
+            <div class="title-item">
+              <img src="./img/4.png" />故障位置排行榜
+            </div>
+
+            <scroll-board :data="bottomRightScrollBorad4Data" />
+          </border-box-6>
+        </div>
       </div>
     </border-box-1>
   </div>
@@ -52,7 +111,140 @@ export default {
   data () {
     return {
       technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
-      topMiddleTitle: '漯周界-机电运维管理台'
+      topMiddleTitle: '漯周界-机电运维管理台',
+
+      // 上部左边第一个卡片数据
+      topLeftCard1Data: ['22.0', '66', '0'],
+      // 上部左边第二个卡片数据
+      topLeftCard2Data: ['0.1', '66', '0'],
+
+      // 底部右边第一个滚动榜单数据
+      bottomRightScrollBorad1Data: {
+        data: [
+          {
+            title: '赵亚伟',
+            info: '月累计排除故障: 3起'
+          },
+          {
+            title: '刘川',
+            info: '月累计排除故障: 3起'
+          },
+          {
+            title: '方扛',
+            info: '月累计排除故障: 3起'
+          },
+          {
+            title: '孙鹏飞',
+            info: '月累计排除故障: 3起'
+          },
+          {
+            title: '仲文豪',
+            info: '月累计排除故障: 2起'
+          },
+          {
+            title: '李东洋',
+            info: '月累计排除故障: 2起'
+          },
+          {
+            title: '贾果果',
+            info: '月累计排除故障: 1起'
+          },
+          {
+            title: '魏振正',
+            info: '月累计排除故障: 1起'
+          }
+        ],
+        showItemNum: 5
+      },
+
+      // 底部右边第二个滚动榜单数据
+      bottomRightScrollBorad2Data: {
+        data: [
+          {
+            title: '液晶显示器',
+            info: '月累计: 2起'
+          },
+          {
+            title: '车牌识别仪',
+            info: '月累计: 2起'
+          },
+          {
+            title: '自动栏杆机',
+            info: '月累计: 2起'
+          },
+          {
+            title: '称重仪表',
+            info: '月累计: 2起'
+          },
+          {
+            title: '收费键盘',
+            info: '月累计: 2起'
+          }
+        ],
+        showItemNum: 5
+      },
+
+      // 底部右边第三个滚动榜单数据
+      bottomRightScrollBorad3Data: {
+        data: [
+          {
+            title: '栏杆机不能抬起',
+            info: '月累计: 5起'
+          },
+          {
+            title: '栏杆机落杆',
+            info: '月累计: 3起'
+          },
+          {
+            title: '光端机故障',
+            info: '月累计: 2起'
+          },
+          {
+            title: '票据打印机',
+            info: '月累计: 2起'
+          },
+          {
+            title: '视频无图像',
+            info: '月累计: 2起'
+          },
+          {
+            title: '视频花屏',
+            info: '月累计: 1起'
+          },
+          {
+            title: '车牌识别仪',
+            info: '月累计: 1起'
+          }
+        ],
+        showItemNum: 5
+      },
+
+      // 底部右边第四个滚动榜单数据
+      bottomRightScrollBorad4Data: {
+        data: [
+          {
+            title: '收费广场',
+            info: '发生故障: 3起'
+          },
+          {
+            title: '外场道路',
+            info: '发生故障: 3起'
+          },
+          {
+            title: '运维分中心',
+            info: '发生故障: 3起'
+          },
+          {
+            title: '服务区',
+            info: '发生故障: 3起'
+          },
+          {
+            title: '其他',
+            info: '发生故障: 2起'
+          }
+        ],
+        showItemNum: 5
+      }
     }
   }
 }
@@ -104,7 +296,6 @@ export default {
   }
 
   .top {
-    box-shadow: 0 0 3px red;
     width: 100%;
     height: 35%;
     margin-top: 20px;
@@ -115,7 +306,6 @@ export default {
 
   .bottom {
     flex: 1;
-    box-shadow: 0 0 3px green;
     display: flex;
     flex-direction: row;
   }
@@ -220,5 +410,87 @@ export default {
       }
     }
   }
+
+  .top-right, .bottom-right {
+    flex: 1;
+    margin-left: 30px;
+  }
+
+  .top-right {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+
+    .polyline-chart {
+      width: 40%;
+      box-shadow: 0 0 3px red;
+    }
+
+    .title-item {
+      position: absolute;
+      right: 0px;
+      width: 180px;
+      font-size: 20px;
+      text-align: right;
+    }
+  }
+
+  .bottom-left {
+    position: relative;
+    display: flex;
+
+    .bottom-left-decoration-1, .bottom-left-decoration-2 {
+      position: absolute;
+      height: 42%;
+      left: 50%;
+      margin-left: -3px;
+    }
+
+    .bottom-left-decoration-1 {
+      top: 8%;
+      transform: rotate(180deg);
+    }
+
+    .bottom-left-decoration-2 {
+      bottom: 8%;
+    }
+  }
+
+  .bottom-left-item {
+    flex: 1;
+  }
+
+  .bottom-right {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .bottom-right-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    margin: 0 -5px;
+    padding: 20px 25px;
+
+    .title-item {
+      height: 50px;
+      line-height: 50px;
+      margin-bottom: 20px;
+      font-size: 20px;
+
+      img {
+        height: 40px;
+        width: 40px;
+        vertical-align: middle;
+        margin-left: 20px;
+        margin-right: 5px;
+      }
+    }
+
+    .scroll-board {
+    }
+  }
 }
 </style>