机器开机率、人员技能比饼图优化

yangfeng

2023-12-11 14101bd42ce17dfb9d951d0738abe9d303fb3fe5

 src/components/cockpitPage/BackgroundBoardLayout.vue

@@ -55,24 +55,31 @@
// 上边固定高
$topBlockHeight: 100px;
// 左侧头部数据高度
$leftHeaderHeight: 85px;
$leftHeaderHeight: 8%;
// 左侧公共右边距
$leftMarginRight: 25px;
// 整体内容左边距
$leftMargin: 80px;
// 整体内容右边距
$rightMargin: 65px;
// 左侧布局块高度
$leftBlockHeight: calc(100vh - 225px);
$leftBlockHeight: calc(100vh - 245px);
// 右侧布局块高度
$rightBlockHeight: calc(100vh - 120px);
// 左下上边距
$leftBottomMarginTop: 40px;
// 左下左侧区域宽
$leftBottomLeftWidth: 35%;
$leftBottomLeftWidth: 37%;
// 左下右侧区域宽
$leftBottomRightWidth: 65%;
$leftBottomRightWidth: 63%;

.dashboard-layout {
  background-image: url("/cockpit-bg.jpg");
  background-position-x: center;
  background-repeat: no-repeat;
  // background-position: center center;
  // background-attachment: fixed;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: space-between;
@@ -116,38 +123,34 @@
.left-header-block {
  height: $leftHeaderHeight;
  margin-top: $topBlockHeight;
  background: #dd3535;
  padding-right: $leftMarginRight;
}
.left-bottom-block {
  margin-top: 20px;
  margin-top: $leftBottomMarginTop;
  height: $leftBlockHeight;
  display: flex;
  .left-bottom-left-block {
    width: $leftBottomLeftWidth;
    height: 100%;
    .left-bottom-top-block {
      height: 40%;
      background: #9135dd;
      height: 41%;
    }
    .left-bottom-middle-block {
      height: 25%;
      background: #dd35a5;
    }
    .left-bottom-bottom-block {
      height: 35%;
      background: #dd355f;
      height: 34%;
    }
  }
  .left-bottom-right-block {
    width: $leftBottomRightWidth;
    height: 100%;
    padding-right: 20px;
    .right-bottom-top-block {
      height: 60%;
      background: #35ddc7;
    }
    .right-bottom-bottom-block {
      height: 40%;
      background: #35dd8f;
    }
  }
}
@@ -158,14 +161,11 @@
}
.right-top-block {
  height: 30%;
  background: #9135dd;
}
.right-middle-block {
  height: 35%;
  background: #dd35a5;
}
.right-bottom-block {
  height: 35%;
  background: #dd355f;
}
</style>