Vue は横断歩道の進行状況バーを実装します

効果を見てください： 

使用した写真:

プログレス バーの 2 つの背景を最初に保存します。1 つ目は背景色の黒、2 つ目は進行状況を示すために使用されるベージュの背景です。

       

 全体的な考え:

背景画像として小さな単位を使用し、スタイルで進行状況バーの長さを設定して、背景画像が自動的に塗りつぶされて横断歩道を形成し、進行状況バーを実現します。

html:

                <div class="progress">
                    <span>{
   
   {progress}}%</span>
                    <div class="p_bj">
                        <div class="p_layer" :style="{width:progress+'%'}">
                        </div>
                    </div>
                </div>

以下：

      .progress {
            width: 100%;
            height: 60px;
            margin-top: 12px;
            background-image: url("../../../../assets/images/newImg/progress_bg.png");
            background-size: 100% 100%;
            position: relative;
            display: flex;
            align-items: center;
            span {
                position: absolute;
                left: 0;
                top: -8px;
                color: #b06c6c;
                font-size: 22px;
                font-weight: bold;
            }
            .p_bj {
                width: 96%;
                margin-left: 5px;
                height: 28px;
                background-position: 10px 10px;
                background-image: url("../../../../assets/images/newImg/p_2.png");
                .p_layer {
                    width: 38%;
                    height: 28px;
                    background-image: url("../../../../assets/images/newImg/p_1.png");
                    background-position: 10px 10px;
                }
            }
        }

データ：

この進行状況の値を変更すると、進行状況の変化を実現できます