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

最新推荐文章于 2024-08-09 10:47:42 发布

前端呆头鹅

最新推荐文章于 2024-08-09 10:47:42 发布

阅读量775

点赞数 1

文章标签： css css3 html 图表进度条 PK 投票

本文链接：https://blog.csdn.net/weixin_45809580/article/details/132863253

版权

本文介绍了使用 HTML 和 CSS 实现 PK 进度条的方法。PK 条用于展示两个或多个数据间的对比，通过父级 div 嵌套子 div 实现，利用 widthData 变量计算宽度，使用 transform 倾斜和 overflow 隐藏超出边缘。还介绍了不同样式和数据展示的 PK 条实现思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

pk 条的特征是两个数据间的 pk，用一个进度条表示。
下面先来实现第一个pk条。
在这里插入图片描述

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

<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 来将超出的边缘隐藏。

.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，将文字放到两侧即可。

<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>

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

  .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;
    }
  }