饼图样式优化

yangfeng

2023-12-04 6f1229d08cf208bfb9ea71b6909e46620948ad9a

 src/views/cockpitPage/components/OrderCompleteRadio.vue

@@ -14,6 +14,7 @@
              :percentage="item.radio"
              :define-back-color="'#083f55'"
              :text-color="'#fec718'"
              :class="item.radio < 90 ? 'setTitle-right' : 'setTitle-left'"
            ></el-progress>
          </div>
        </div>
@@ -33,8 +34,8 @@
    return {
      tableList: [
        { title: "DD19070047", radio: 50.6 },
        { title: "DD19070048", radio: 70 },
        { title: "DD19070049", radio: 85 },
        { title: "DD19070048", radio: 89 },
        { title: "DD19070049", radio: 100 },
        { title: "DD19070050", radio: 30 },
      ],
    };
@@ -63,6 +64,7 @@
      height: calc(20% - 10px);
      width: 100%;
      border-radius: 50px;
      transition: all 1s ease-in-out 0s;
      .left {
        width: 20%;
        margin: 0 10px;
@@ -86,13 +88,18 @@
    background: url("../../../../public/cockpitPage/order-bg.png") no-repeat
      center center / cover;
  }
  .el-progress-bar__innerText {
  .setTitle-right .el-progress-bar__innerText {
    position: absolute;
    top: 2px;
    right: -70px;
    right: -66px;
    text-align: left;
    font-size: 18px;
    width: 60px;
  }
  .setTitle-left .el-progress-bar__innerText {
    color: rgb(226, 146, 27) !important;
    font-size: 18px;
    width: 60px;
  }
}
</style>