页面背景图及饼图显示优化

yangfeng

2023-12-06 93d04e35d6ff02470687b73ff7494b62bdc85f2c

 src/components/cockpitPage/BackgroundBoardLayout.vue

@@ -53,26 +53,33 @@
// 整体内边距
$layoutPadding: 12px;
// 上边固定高
$topBlockHeight: 100px;
$topBlockHeight: 90px;
// 左侧头部数据高度
$leftHeaderHeight: 85px;
$leftHeaderHeight: 8%;
// 左侧公共右边距
$leftMarginRight: 25px;
// 整体内容左边距
$leftMargin: 80px;
// 整体内容右边距
$rightMargin: 65px;
// 左侧布局块高度
$leftBlockHeight: calc(100vh - 225px);
$leftBlockHeight: calc(100vh - 245px);
// 右侧布局块高度
$rightBlockHeight: calc(100vh - 120px);
// 左下上边距
$leftBottomMarginTop: 30px;
// 左下左侧区域宽
$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;
@@ -82,7 +89,7 @@
    width: 100%;
    text-align: center;
    position: absolute;
    top: 10px;
    top: 0px;
    font-size: 32px;
    color: #01f5fe;
    font-weight: 700;
@@ -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>