1.0版本完成

src/views/bottomLeft.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="bottomLeft">
-    <div class>
+    <div class="bg-color-black ">
       <div class="d-flex pt-2 pl-2">
         <span style="color:#5cd9e8">
           <icon name="chart-bar"></icon>
@@ -33,12 +33,12 @@ export default {
 
 <style lang="scss">
 #bottomLeft {
-  padding: 1rem;
-  height: 410px;
+  padding: 1.5rem 1rem;
+  height: 520px;
   min-width: 300px;
   border-radius: 5px;
   .bg-color-black {
-    height: 385px;
+    height: 485px;
     border-radius: 10px;
   }
   .text {

src/views/bottomRight.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="bottomRight">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-area"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
+          <div class="decoration2">
+            <dv-decoration-2 :reverse="true" style="width:5px;height:480px;" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <bottomRightChart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import bottomRightChart from "@/components/echart/bottom/bottomRightChart";
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    bottomRightChart
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss">
+#bottomRight {
+  padding: 1rem 1rem 0rem;
+  height: 520px;
+  min-width: 300px;
+  border-radius: 5px;
+  .bg-color-black {
+    height: 495px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  } //下滑线动态
+  .decoration2 {
+    position: absolute;
+    right: 10px;
+  }
+  .chart-box {
+    margin-top: 1rem;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>

src/views/index.vue

@@ -2,7 +2,7 @@
   <div id="index">
     <dv-full-screen-container class="bg">
       <dv-loading v-if="loading">Loading...</dv-loading>
-      <div class="host-body">
+      <div v-else class="host-body">
         <div class="d-flex jc-center">
           <dv-decoration-10 style="width:33.3%;height:5px;" />
           <div class="d-flex jc-center">
@@ -83,10 +83,12 @@
 
           <!-- 第四行数据 -->
           <div class="bototm-box">
-            <dv-border-box-1>
+            <dv-border-box-13>
               <bottomLeft />
-            </dv-border-box-1>
-            <div>2</div>
+            </dv-border-box-13>
+            <dv-border-box-12>
+              <bottomRight />
+            </dv-border-box-12>
           </div>
         </div>
       </div>
@@ -101,10 +103,11 @@ import centreRight1 from "./centreRight1";
 import centreRight2 from "./centreRight2";
 import center from "./center";
 import bottomLeft from "./bottomLeft";
+import bottomRight from "./bottomRight";
 export default {
   data() {
     return {
-      loading: false
+      loading: true
     };
   },
   components: {
@@ -113,7 +116,8 @@ export default {
     centreRight1,
     centreRight2,
     center,
-    bottomLeft
+    bottomLeft,
+    bottomRight
   },
   mounted() {
     this.cancelLoading();