中间部分完毕

src/views/center.vue

@@ -2,22 +2,31 @@
   <div id="center">
     <div class="up">
       <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
-        <p class="ml-3 fs-xl">{{item.title}}</p>
+        <p class="ml-3 colorBlue fw-b">{{item.title}}</p>
         <div>
           <dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
         </div>
       </div>
     </div>
     <div class="down">
-      <div class="ranking">
-        <dv-scroll-ranking-board :config="ranking" />
+      <div class="ranking bg-color-black">
+        <span style="color:#5cd9e8">
+          <icon name="align-left"></icon>
+        </span>
+        <span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
+        <dv-scroll-ranking-board :config="ranking" style="height:220px" />
       </div>
       <div class="percent">
-        <div class="item">
-          <centerChart/>
+        <div class="item  bg-color-black">
+          <span>今日MR通过率</span>
+          <centerChart1 />
+        </div>
+        <div class="item  bg-color-black">
+          <span>今日MR达标率</span>
+          <centerChart2 />
         </div>
         <div class="water">
-          <dv-water-level-pond :config="water" style="height: 125px" />
+          <dv-water-level-pond :config="water" style="height: 120px" />
         </div>
       </div>
     </div>
@@ -25,7 +34,8 @@
 </template>
 
 <script>
-import centerChart from "@/components/echart/centerChart";
+import centerChart1 from "@/components/echart/center/centerChart1";
+import centerChart2 from "@/components/echart/center/centerChart2";
 
 export default {
   data() {
@@ -120,12 +130,16 @@ export default {
         unit: "份"
       },
       water: {
-        data: [24, 45]
+        data: [24, 45],
+        shape: 'roundRect',
+        formatter:'{value}%',
+        waveNum:3
       }
     };
   },
   components: {
-    centerChart
+    centerChart1,
+    centerChart2
   }
 };
 </script>
@@ -148,22 +162,31 @@ export default {
     }
   }
   .down {
-    padding: 0.5rem;
+    padding: 4px;
     padding-bottom: 0px;
     width: 100%;
     display: flex;
-    height: 250px;
+    height: 255px;
     justify-content: space-between;
+    .bg-color-black {
+      border-radius: 5px;
+    }
     .ranking {
-      width: 58%;
+      padding: 10px;
+      width: 59%;
     }
     .percent {
       width: 40%;
       display: flex;
-      flex-direction: column;
+      flex-wrap: wrap;
       .item {
-        width: 100%;
-        height: 125px;
+        width: 50%;
+        height: 120px;
+        span {
+          margin-top: 7px;
+          display: flex;
+          justify-content: center;
+        }
       }
       .water {
         width: 100%;

src/views/centreRight2.vue

@@ -2,7 +2,7 @@
   <div id="centreRight2">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
-         <span style="color:#5cd9e8">
+        <span style="color:#5cd9e8">
           <icon name="align-left"></icon>
         </span>
         <span class="fs-xl text mx-2">产品销售渠道分析</span>

src/views/index.vue

@@ -43,7 +43,10 @@
             <div class="react-left bg-color-blue mr-3">
               <span class="text fw-b">构建数据分析</span>
             </div>
-            <div class="react-left mr-4" style="width: 500px; background-color: #0f1325;">
+            <div
+              class="react-left mr-4"
+              style="width: 500px; background-color: #0f1325; text-align: right;"
+            >
               <span class="react-after"></span>
               <span class="text">2020年03月16日 周一 12:00</span>
             </div>
@@ -65,7 +68,7 @@
             </div>
             <!-- 中间 -->
             <div>
-              <center/>
+              <center />
             </div>
             <!-- 中间 -->
             <div>