看板-总看板调整

src/assets/scss/indextotal.scss

@@ -0,0 +1,143 @@
+#index {
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  overflow: hidden;
+  
+  .bg {
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 0 16px;
+    background-image: url("../../assets/pageBg.png");
+    background-size: cover;
+    background-position: center center;
+  }
+
+  .host-body {
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
+    .title {
+      position: relative;
+      width: 500px;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .title-text {
+        font-size: 26px;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%);
+      }
+
+      .dv-dec-6 {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        width: 250px;
+        height: 8px;
+        transform: translate(-50%);
+      }
+    }
+
+    // 第二行
+    .aside-width {
+      width: 40%;
+    }
+    .react-r-s,
+    .react-l-s {
+      background-color: #0f1325;
+    }
+
+    // 平行四边形
+    .react-right {
+      &.react-l-s {
+        text-align: right;
+        width: 500px;
+      }
+      font-size: 18px;
+      width: 300px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(-45deg);
+
+      .react-after {
+        position: absolute;
+        right: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #0f1325;
+        transform: skewX(45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(45deg);
+      }
+    }
+
+    .react-left {
+      &.react-l-s {
+        width: 500px;
+        text-align: left;
+      }
+      font-size: 20px;
+      width: 300px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(45deg);
+      background-color: #0f1325;
+
+      .react-left {
+        position: absolute;
+        left: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #1a5cd7;
+        transform: skewX(-45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(-45deg);
+      }
+    }
+
+    .body-box {
+      margin-top: 16px;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+      .content-box {
+        display: grid;
+        grid-template-columns: 2.2fr 1.5fr 2.8fr;
+      }
+
+      // 底部数据
+      .bottom-box {
+        display: grid;
+        grid-template-columns: 3fr 3fr;
+      }
+    }
+  }
+}

src/components/totalchart/bottom/bottomRightChart/chart.vue

@@ -4,7 +4,7 @@
       :options="options"
       id="bottomRightChart"
       height="480px"
-      width="800px"
+      width="680px"
     ></Echart>
   </div>
 </template>

src/components/totalchart/centerLeft/centerLeft1ALLChart/chart.vue

@@ -5,7 +5,7 @@
       :options="options"
       id="centerLeft1ALLChart"
       height="250px"
-      width="450px"
+      width="520px"
       ref="column-board"
     ></Echart>
   </div>

src/views/total/centerLeft1ALL.vue

@@ -122,7 +122,7 @@ export default {
 
 <style lang="scss" scoped>
 $box-height: 420px;
-$box-width: 500px;
+$box-width: 630px;
 #centerLeft1ALL {
   padding: 0px;
   height: $box-height;

src/views/total/index.vue

@@ -209,7 +209,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/indexpackage.scss';
+@import '../../assets/scss/indextotal.scss';
 
 .dropdown{
   font-size: 18px;