【手把手保姆级】花式进度/PK/投票条开发教程

pk 条的特征是两个数据间的 pk，用一个进度条表示。

下面先来实现第一个pk条。

pk 条中有两个颜色，左侧为数据 A，右侧为数据 B，中间使用斜线分割。 pk 条可以使用一个和 B 数据颜色一致的父级 div，然后在内嵌套一个和 A 颜色一致的子 div 来实现。

html 复制代码

<div class="postPKBtnGroup">
  <div class="postPKBtn" :style="{ width: widthData }"></div>
</div>

其中 widthData 变量的计算是 A/A+B*100+'%'。然后为两个 div 写上样式，简单的 pk 条就完成了。需要注意的点是：

因为 pk 条中间的形状是斜线，所以内部 div 需要使用 transform: skewX(-10deg)来倾斜。
内部 div 倾斜后，内部 div 作用两侧都会倾斜，而我们只需要一条斜线，这时可以使用 left: -3px，将另一侧移出边框外。
内部 div 另一侧移出边框外后，需要为外部 div 添加 overflow: hidden 来将超出的边缘隐藏。

css 复制代码

.postPKBtnGroup {
  margin-top: 4px;
  height: 8px;
  background: #2b78ff;
  overflow: hidden;
  border-radius: 2px;
  width: 100%;
  .postPKBtn {
    background: #ff4d4d;
    width: 20px;
    height: 8px;
    transform: skewX(-10deg);
    position: relative;
    left: -3px;
  }
}

然后为 pk 条添加上面的数字和选择标志，直接在进度条上方写入一个 div，将文字放到两侧即可。

html 复制代码

<div class="postPKBtnNum">
  <div class="postPKBtnNumItem">
    {{ imageData[0].count }}
    <img
      v-if="selectResult === imageData[0].desc"
      class="voteIconImg"
      :src="require('@/assets/navigatePlan/active-icon.png')"
      alt=""
    />
  </div>
  <div class="postPKBtnNumItem">
    {{ imageData[1].count }}
    <img
      v-if="selectResult === imageData[1].desc"
      class="voteIconImg"
      :src="require('@/assets/navigatePlan/unactive-icon.png')"
      alt=""
    />
  </div>
</div>

js 复制代码

let imageData = [
  { count: 50, desc: "A" },
  { count: 50, desc: "B" },
];
let selectResult = "A";

css 复制代码

  .postPKBtnNum {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2b78ff;
    line-height: 16px;
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    .postPKBtnNumItem {
      display: flex;
      align-items: center;
      &:first-child {
        color: #ff4d4d;
      }
    }
    .voteIconImg {
      width: 16px;
      height: 16px;
      margin-left: 4px;
    }
  }

一个简单又精致的进度条就做好了。接着我们看另外一个PK条。

可以看到结构基本和上面一致的，只是PK条的宽度更宽，外层div的圆角更大，数字显示从外面改到了PK条内侧，只要在上面的基础上做一点样式上的调整就能实现。这里就不给出具体代码了，遇到困难的网友可以在下面留言。

然后是第三个进度条。

可以看到和上面的结构也差不多，只是展示的数据从两组变为了多组，所以无法在一个进度条内表示了。上面进度条展示了4组数据，每个数组用一个进度条展示。但是结构还是父级 div在内嵌套一个子 div去实现，然后重复4次就可以。这里也不给出具体代码了。