| | |
| | | <div class="left">{{ item.title }}</div> |
| | | <div class="middle" ref="middle"> |
| | | <el-progress |
| | | :stroke-width="20" |
| | | :stroke-width="18" |
| | | :text-inside="true" |
| | | :percentage="item.radio" |
| | | :define-back-color="'#083f55'" |
| | | :text-color="'#fec718'" |
| | | :class="item.radio < 90 ? 'setTitle-right' : 'setTitle-left'" |
| | | :class=" |
| | | item.radio < 90 |
| | | ? 'setTitle-right' |
| | | : item.radio == 100 |
| | | ? 'setTitle-complete' |
| | | : 'setTitle-left' |
| | | " |
| | | ></el-progress> |
| | | </div> |
| | | </div> |
| | |
| | | tableList: { |
| | | get() { |
| | | if ( |
| | | this.startIndex > this.orderCompleteObject.orderCompleteList.length |
| | | this.startIndex >= this.orderCompleteObject.orderCompleteList.length |
| | | ) { |
| | | this.startIndex = 0; |
| | | } |
| | |
| | | this.startIndex + 4 |
| | | ); |
| | | }, |
| | | set(val) { |
| | | console.log(val); |
| | | }, |
| | | }, |
| | | }, |
| | | watch: { |
| | | "orderCompleteObject.orderCompleteList"(val) { |
| | | console.log(val, "ssssssssss"); |
| | | this.startIndex = this.orderCompleteObject.startIndex; |
| | | }, |
| | | }, |
| | |
| | | } |
| | | .list-view { |
| | | height: calc(100% - 20px); |
| | | padding-right: 5px; |
| | | .table-bg-view { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | background: #083f55; |
| | | height: calc(20% - 10px); |
| | | width: 100%; |
| | | padding-right: 5px; |
| | | border-radius: 50px; |
| | | transition: all 1s ease-in-out 0s; |
| | | .left { |
| | |
| | | } |
| | | .el-progress-bar__inner { |
| | | position: relative; |
| | | // background: #552d08; |
| | | background: url("../../../../public/cockpitPage/order-bg.png") no-repeat |
| | | center center / cover; |
| | | } |
| | | .setTitle-complete .el-progress-bar__inner { |
| | | position: relative; |
| | | background: url("../../../../public/cockpitPage/order-complete.png") |
| | | no-repeat center center / cover; |
| | | } |
| | | .setTitle-right .el-progress-bar__innerText { |
| | | position: absolute; |
| | |
| | | width: 60px; |
| | | } |
| | | .setTitle-left .el-progress-bar__innerText { |
| | | color: rgb(226, 146, 27) !important; |
| | | color: #fffb00 !important; |
| | | font-size: 18px; |
| | | width: 60px; |
| | | } |
| | | .setTitle-complete .el-progress-bar__innerText { |
| | | color: #fff !important; |
| | | font-size: 16px; |
| | | width: 60px; |
| | | } |
| | | } |
| | | </style> |