uniapp进度条

zxmcwn

已于 2023-10-09 12:01:59 修改

阅读量247

点赞数 2

文章标签： uni-app 开发语言

于 2023-10-09 11:42:30 首次发布

本文链接：https://blog.csdn.net/zxmcwn/article/details/133698118

版权

   <view class="uni-padding-wrap">
        <view class="layout progress-box">
          <view
            ><img
              class="management_img"
              src="../../../static/images/weixin.png"
              alt=""
          /></view>
          <view class="usage">微信</view>
          <view class="usages">2小时42分钟</view>
          <progress class="progress_a" :percent="pgList[0]" stroke-width="5" />
        </view>
        <view class="layout progress-box">
          <view
            ><img
              class="management_img"
              src="../../../static/images/bilibili.png"
              alt=""
          /></view>
          <view class="usage">哔哩哔哩</view>
          <view class="usages">18分钟</view>
          <progress class="progress_a" :percent="pgList[1]" stroke-width="5" />
        </view>
        <view class="layout progress-box">
          <view
            ><img
              class="management_img"
              src="../../../static/images/tieba.png"
              alt=""
          /></view>
          <view class="usage">百度贴吧</view>
          <view class="usages">9分钟</view>
          <progress class="progress_a" :percent="pgList[2]" stroke-width="5" />
        </view>
        <view class="layout progress-box">
          <view class=""
            ><img
              class="management_img"
              src="../../../static/images/weixin.png"
              alt=""
          /></view>
          <view class="usage">微博</view>
          <view class="usages">7分钟</view>
          <progress class="progress_a" :percent="pgList[3]" stroke-width="5" />
        </view>
      </view>

export default {
  data() {
    return {
      pgList: [80, 60, 40, 20],
    };
  },
  onLoad() {},
  methods: {},
};

.uni-padding-wrap {
  height: 280px;
}
.progress-box {
  width: 85%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 10px;
  position: relative;
}
.uni-progress {
  width: 85%;
  display: block;
}
.progress_a /deep/.uni-progress-bar {
  border-radius: 5px;
  margin-top: 12px;
}
.progress_a /deep/.uni-progress-inner-bar {
  border-radius: 5px;
  background-color: #31a6fe !important;
}
.usage {
  font-size: 14px;
  position: absolute;
  top: -2px;
  left: 50px;
}
.usages {
  font-size: 12px;
  color: #9d9d9d;
  position: absolute;
  top: -2px;
  right: 0;
}