如何自定义进度条？弹性布局+div

「爱情、让人受尽委屈。」 2023-02-09 13:13 4阅读 0赞

css代码如下：

chart-class1 { 
                height: 50px;
                padding: 7px 37px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-bottom: 21px;
            }
            .chart-class1>div .process-top{ 
                height: 6px;
                margin-bottom: 10px;
                position: relative;
            }
            .process-top>div>div:nth-child(2){ 
                 background: #ffaf50;
                 border-radius: 3px 0 0 3px;
                z-index: 4;
             }
            .process-top>div>div:last-child{ 
                background: #0575fe;
                border-radius: 0px 3px 3px 0;
                position: absolute;
                z-index: 1;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
            }
            .chart-class1>div>div:last-child{ 
                justify-content: space-between;
            }
     .bg-process-end{ /*可以不要*/
                background: url(./img/index2-img/process.png) no-repeat;
                width: 58px;
                height: 29px;
                background-size: 100% 100%;
                position: absolute;
                top: -11px;
                z-index: 5;
                margin-left: -56px;
            }

<div id="" class="chart-class1" style="position: relative">
          <div style="width: 100%;height: 100%;">
             <div class="process-top">
                 <div class="flex-row" style="width: 100%;height: 100%;position: relative">
                     <div class="bg-process-end" :style="{left: this.data +'%'}"></div>//可以不用这行
                     <div :style="{width: this.data+'%'}"></div>
                     <div style="width: 100%"></div>
                </div>
            </div>
           <div class="flex-row">
               <div class="num-percent">{ { data}}%</div>//data是vue中定义的
                   <div class="flex-row">
                        <div class="flex-row blue-legend1-left">
                             <div></div>
                             <div>某某</div>
                         </div>
                  		<div class="flex-row yellow-legend1-left">
                             <div></div>
                             <div>某某</div>
                        </div>
                 </div>
           </div>
       </div>
    </div>