人员

haoxuan

2023-12-04 e6370a879323b476ba482b817cf602da25c65fa6

 src/views/cockpitPage/components/OrderCompleteRadio.vue

@@ -4,7 +4,6 @@
      <ChartTitle name="订单完成比率"></ChartTitle>
    </div>
    <div class="list-view">
      <!-- <ul> -->
      <template v-for="item in tableList">
        <div class="table-bg-view">
          <div class="left">{{ item.title }}</div>
@@ -15,14 +14,11 @@
              :percentage="item.radio"
              :define-back-color="'#083f55'"
              :text-color="'#fec718'"
              :class="item.radio < 90 ? 'setTitle-right' : 'setTitle-left'"
            ></el-progress>
            <!-- <div class="container">
              <div class="item" v-for="i in 40" :key="i"></div>
            </div> -->
          </div>
        </div>
      </template>
      <!-- </ul> -->
    </div>
  </div>
</template>
@@ -37,16 +33,14 @@
  data() {
    return {
      tableList: [
        { title: "DD19070047", radio: 50 },
        { title: "DD19070048", radio: 70 },
        { title: "DD19070049", radio: 85 },
        { title: "DD19070047", radio: 50.6 },
        { title: "DD19070048", radio: 89 },
        { title: "DD19070049", radio: 100 },
        { title: "DD19070050", radio: 30 },
      ],
    };
  },
  mounted() {
    console.log(this.$refs.middle.$el, "sssssssss");
  },
  mounted() {},
  watch: {},
  methods: {},
};
@@ -70,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;
@@ -93,12 +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: -50px;
    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>