简简单单的屎山代码---进度条

168 阅读1分钟

 <div class="item">
          <div class="info">
            <div>检擦站1111</div>
            <div class="info-num">
              <div>25</div>
              <div>/50</div>
            </div>
          </div>
          <div class="rank">
            <div class="warp">
              <div class="num1" :style="{ width: (25 / 50) * 100 + '%' }"></div>
              <img :style="{ left: (25 / 50) * 100 - 5 + '%' }" src="../assets/logo.png" alt="" srcset="" />
            </div>
          </div>
        </div>
        <div class="item">
          <div class="info">
            <div>检擦站1111</div>
            <div>45454</div>
          </div>
          <div class="rank">
            <div class="warp">
              <div class="num1" :style="{ width: (20 / 50) * 100 + '%' }"></div>
              <img :style="{ left: (20 / 50) * 100 - 5 + '%' }" src="../assets/logo.png" alt="" srcset="" />
            </div>
          </div>
        </div>
          .middlex {
      width: 50%;
      height: 300px;
      border: 1px solid red;
      background-color: #ccc;
      // margin: 0 auto;
      .item {
        width: 200px;
        height: 40px;
        margin-bottom: 10px;
        background-color: #fff;
        .info {
          width: 100%;
          height: 20px;
          line-height: 20px;
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
          .info-num{
            display: flex;
          }
        }
        .rank {
          width: 100%;
          height: 20px;
          // border: 1px solid black;

          .warp {
            width: 180px;
            height: 10px;
            background-color: #ccc;
            margin: 5px 10px;
            position: relative;
            border-radius: 10px;
            .num1 {
              position: absolute;
              left: 0;
              top: 0;
              height: 100%;
              // width: 50%;
              background-color: blue;
              border-radius: 10px;
            }
            img {
              width: 10px;
              height: 10px;
              position: absolute;
              left: 20%;
              top: 0;
            }
          }
        }
      }
    }