前端使用css动画绘制简易的进度条，数据多条的时候可以切换

已于 2024-08-05 15:43:10 修改
阅读量277 收藏 5
点赞数 6
分类专栏： 前端 文章标签： 前端 css javascript
于 2024-08-02 17:25:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/admire_fish/article/details/140875829
版权

文章目录

一、效果图

在这里插入图片描述

二、使用步骤

1.公共的进度条组件

我这里命名的progressBar.vue， 你们使用的时候直接复制粘贴到自己的项目里面即可。
文件中代码如下（示例）：

<template>
  <div>
    <div style="width: 100%;height: 100%">
      <div v-for="(item, index) in showList" :key="index + item.value" class="item">
        <div :class="index < 3 && page == 1 ? ('itemIcon' + (index + 1)) : 'itemIcon'">{{ index + 1 }}</div>
        <div class="itemTitle">{{ item.name }}</div>
        <div class="itemValue">{{ item.value }}{{unit}}</div>
        <div class="itemBar">
          <div :class="index < 2 && page == 1 ? ('innerBar' + (index + 1)) : 'innerBar'" :style="'width:' + (item.value / maxValue * 100).toFixed(2) + '%;'"></div>
        </div>
      </div>
      <div class="pager-content">
        <div v-for="pageNum in totalPage" :class="pageNum == page ? 'selected' : ''" @click="page = pageNum"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "progressBar",
  props: {
    dataList:{
      type: Array,
      default:[
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
      ],
    },
    unit:{
      type: String,
      default:'%',
    }
  },
  data () {
    return {
      page: 1,
      limit: 7,
    }
  },
  computed: {
    showList () {
      return this.dataList.slice(((this.page - 1) * this.limit), (this.page * this.limit))
    },
    totalPage () {
      const length = this.dataList.length
      let value = Math.floor(length / this.limit)
      if (length % this.limit !== 0) value++
      return value
    },
    maxValue(){
      let maxNum = 0
      let list = this.dataList.map(i => i.value)
      maxNum = Math.max(...list)
      return maxNum
    }
  },
}
</script>

<style scoped lang="less">

.item{
    position: relative;
    margin-top: 30px;
    width: 100%;
    height: 45px;
    .itemIcon1{
      position: absolute;
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAsCAYAAAATmipGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI0OEQ0MjU1M0NGMjExRUZBNTA0RTNGOTIyNzIxOUE3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI0OEQ0MjU2M0NGMjExRUZBNTA0RTNGOTIyNzIxOUE3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjQ4RDQyNTMzQ0YyMTFFRkE1MDRFM0Y5MjI3MjE5QTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjQ4RDQyNTQzQ0YyMTFFRkE1MDRFM0Y5MjI3MjE5QTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz75mu2sAAAGQUlEQVR42rSZTagc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");
      width: 42px;
      height: 44px;
      font-family: DINPro-Bold;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 44px;
      letter-spacing: 0px;
      color: #ffffff;
      text-align: center;
    }
    .itemIcon2{
      position: absolute;
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAsCAYAAAATmipGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI0MjlBNzgxM0NGMjExRUY5MTUwRUQzNDk5OUY3QjQyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI0MjlBNzgyM0NGMjExRUY5MTUwRUQzNDk5OUY3QjQyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjQyOUE3N0YzQ0YyMTFFRjkxNTBFRDM0OTk5RjdCNDIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjQyOUE3ODAzQ0YyMTFFRjkxNTBFRDM0OTk5RjdCNDIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz70rNkpAAAHXElEQVR42rSZWYwU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");
      width: 42px;
      height: 44px;
      font-family: DINPro-Bold;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 44px;
      letter-spacing: 0px;
      color: #ffffff;
      text-align: center;
    }
    .itemIcon3{
      position: absolute;
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAsCAYAAAATmipGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIzQzIxQjQwM0NGMjExRUY4RDFBODQ5MENFM0NBN0I3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIzQzIxQjQxM0NGMjExRUY4RDFBODQ5MENFM0NBN0I3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjNDMjFCM0UzQ0YyMTFFRjhEMUE4NDkwQ0UzQ0E3QjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjNDMjFCM0YzQ0YyMTFFRjhEMUE4NDkwQ0UzQ0E3QjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5IjV3sAAAHS0lEQVR42rSZWYgc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");
      width: 42px;
      height: 44px;
      font-family: DINPro-Bold;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 44px;
      letter-spacing: 0px;
      color: #ffffff;
      text-align: center;
    }
    .itemIcon{
      position: absolute;
      width: 42px;
      height: 44px;
      font-family: DINPro-Bold;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 44px;
      letter-spacing: 0px;
      color: #ffffff;
      text-align: center;
      visibility: hidden;
    }
    .itemTitle{
      position: absolute;
      left: 50px;
      font-family: SourceHanSansCN-Regular;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      //line-height: 47px;
      letter-spacing: 0px;
      color: #7fbfff;
    }
    .itemValue{
      position: absolute;
      right: 20px;
      font-family: SourceHanSansCN-Regular;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      //line-height: 47px;
      letter-spacing: 0px;
      color: #ffffff;
    }
    .itemBar{
      position: absolute;
      left: 50px;
      top: 25px;
      width: calc(100% - 70px);
      height: 20px;
      background-color: #031632;
      border-radius: 9px;
      border: solid 1px #0234a7;
      .innerBar1{
        position: relative;
        margin-left: 2px;
        margin-top: 2px;
        height: 14px;
        background-image: linear-gradient(180deg,
        #ffe62c 0%,
        #ffa202 100%),
        linear-gradient(
            #eeeeee,
            #eeeeee);
        background-blend-mode: normal,
        normal;
        border-radius: 7px;
        border: solid 1px #03297f;
        animation: lToR 2s;
        -moz-animation: lToR 2s;
        -webkit-animation: lToR 2s;
        -o-animation: lToR 2s;
      }
      .innerBar2{
        position: relative;
        margin-left: 2px;
        margin-top: 2px;
        height: 14px;
        background-image: linear-gradient(180deg,
        #2be9b6 0%,
        #049b68 100%),
        linear-gradient(
            #eeeeee,
            #eeeeee);
        background-blend-mode: normal,
        normal;
        border-radius: 7px;
        border: solid 1px #03297f;
        animation: lToR 2s;
        -moz-animation: lToR 2s;
        -webkit-animation: lToR 2s;
        -o-animation: lToR 2s;
      }
      .innerBar{
        position: relative;
        margin-left: 2px;
        margin-top: 2px;
        height: 14px;
        background-image: linear-gradient(180deg,
        #2cd0ff 0%,
        #0084ff 100%),
        linear-gradient(
            #eeeeee,
            #eeeeee);
        background-blend-mode: normal,
        normal;
        border-radius: 7px;
        border: solid 1px #03297f;
        animation: lToR 2s;
        -moz-animation: lToR 2s;
        -webkit-animation: lToR 2s;
        -o-animation: lToR 2s;
      }
    }
  }

.pager-content{
  position: absolute;
  bottom: 30px;
  height: 20px;
  display: flex;
  justify-content: space-evenly;
  flex-flow: row nowrap;
  background: rgba(0,0,0,0.3);
  padding-top: 4px;
  border-radius: 10px;
  width: 85%;
  width: 250px;
  left: calc(50% - 125px);
}
.pager-content>div{
  width: 12px;
  height: 12px;
  cursor: pointer;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkI3N0Q2NDMzMzczMTFFQUJFMEZGOTQxOTg0MkIyQzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkI3N0Q2NDQzMzczMTFFQUJFMEZGOTQxOTg0MkIyQzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQjc3RDY0MTMzNzMxMUVBQkUwRkY5NDE5ODQyQjJDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQjc3RDY0MjMzNzMxMUVBQkUwRkY5NDE5ODQyQjJDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrzYFR4AAACeSURBVHjaYhR1Wc8ABWxAnAHEkUCsAxW7AsTLgXgGEP8CCTBCNUgD8RYgNmDADi4AsQ8QP2WCmoxPMQNUbisQs4M0pBNQDAP6QJwG0hDFQDyIAmkwIkGDIRMDaeA3SMM5EjRcYYKGM7FgOUjDTCC+SITiSyC1IA0/gdgbGjm4AMhAL5BamKefArE5EBcA8Rkg/grFZ6BiZlA1DAABBgA8Ih7BPlxE7QAAAABJRU5ErkJggg==") no-repeat center center;
}
.pager-content .selected{
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkMwMTk3QjEzMzczMTFFQTk5RjVGQzdGRkQ3Q0JBODkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkMwMTk3QjIzMzczMTFFQTk5RjVGQzdGRkQ3Q0JBODkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQzAxOTdBRjMzNzMxMUVBOTlGNUZDN0ZGRDdDQkE4OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQzAxOTdCMDMzNzMxMUVBOTlGNUZDN0ZGRDdDQkE4OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpAUD7AAAAIvSURBVHjalFRBTxNREJ63+3YLK1GQGhRcjBghES692sRE0j9gvHgx+lP8I148e/NkQoKXeiAxXDTxgiYWgYS1baDWttvu+s3ut1oJiL7ky7ydN/PtzLyZZ+YepnJiuYAH+ISlfggMiBgYjTvZsb1DxwCYBmYpA553gTbwjbJL0mScSEkmgEvAArAE3AKuk0zovAvsAJ+APep6SlYQ+SRRggoSq168J7XlipRXFkUuGDCA4sO2RF82ZSONpQ67beAz0FQyy5oEjKSSzMqD4Ims374psgr6ZVRrBvHeWBG5siTlrYo8+vhc5tIoC6DPiGKHhZ3RaFJE0n0s6yUkVEIUUyYnCW0us+8QET6V+6kvVWagvl5R4Mtak0FVaqN50OMi+0AHaKGUjWEuO9Qn11Dlu1JjHdXXtyTSgobxmpQ1XnWIcLm7w7yAGonq9Fv1ulfb0hsJ6ZsR2eLKRwu54zH+vs8uaSd5mn2Sq17PZT47LtrDWjljHcKhl+bSM3m6GklGgmWSP+0tOzZrNvcr2nXx96E6HZ/xI+fgV2+p79Bhd6qi4b2XSP5x0bZB30FBpE2147+VDXf/fBK1UVt2ebMg0gFsadubgdSDF7Lp7v2dRG3UlqOiEcXu1J1nOv4pa9UzP6TtvZMjGF5NJ3EjmEAzyglKdYkmX8orpyOvOSKa2pESGT4jxdBO82KLoQ1PDG3jvKFNqGhyflocyNOekSbl99OekXGymEaH//Ow/RRgAFR62RXAIZxlAAAAAElFTkSuQmCC") no-repeat center center !important;
}
@keyframes lToR
{
  from {width: 0px;}
}
@-moz-keyframes lToR /* Firefox */
{
  from {width: 0px;}
}

@-webkit-keyframes lToR /* Safari and Chrome */
{
  from {width: 0px;}
}

@-o-keyframes lToR /* Opera */
{
  from {width: 0px;}
}
</style>

2.使用

在另外一个文件中要使用进度条组件，代码如下（示例）：

<template>
  <div class="part3_2">
    <progressBar class="part_content" :dataList="dataList" :unit="'%'"></progressBar>
  </div>
</template>

<script>
import progressBar from "../../../components/progressBar.vue";
export default {
  name: 'part3_2', // vue名称
  components:{progressBar},
  data () {
    return {
      dataList: [],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    //初始值
    async init(){
      this.dataList = [
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), }
      ]
      this.dataList.sort((a,b) => {
        return b.value - a.value
      })
    },
  }
}

</script>

<style scoped lang="less">
.part3_2{
  position: absolute;
  top: 230px;
  left: 60px;
  width: 31%;
  height: calc(100% - 250px);
  .part_content {
    position: absolute;
    top: 30px;
    width: 100%;
    height: calc(100% - 30px);
    overflow: auto;
  }
}
</style>

总结

以上就是我今天分享的内容，觉得有用的读者可以动动小手点一个小赞。

临渊~羡鱼
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端必修技能：高手进阶核心知识分享 - 三万字帮你搞定CSS动画(形变动画、过渡动画、关键帧动画）
uu0216的博客
07-11 1537
transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。3D转换元素，还可以更改元素的Z轴。注意： 使用此属性必须先使用transform属性。transition 属性允许你在元素状态改变时控制过渡效果。它可以让你在元素从一种样式变换到另一种样式时产生平滑的过渡效果，比如从一种颜色渐变到另一种颜色，或者从隐藏到显示。transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。
前端页面实现动态进度条基于Springboot/ javascript/ jsp
m0_37827405的博客
02-29 1280
(1) 首先在html页面中需要引入Bootstrap框架:在html最顶端复制下面代码 <!-- 引入BootStrap 框架--> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.mi...
442js_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
08-04
442js_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
html css百分比效果,利用JavaScript与CSS制作百分比进度条效果的简单实例
weixin_30036893的博客
06-03 1019
百分比进度条效果是比较常用的特效之一，它能让人们在等待的时间内不那么无聊，能够提供给人们信息，阿萌此次来介绍一种利用javascript+CSS实现简单的思路。进度条的实现方法很多，此次介绍的思路是：准备两个容器，背景颜色各不相同，利用绝对定位或者相对定位等方法层叠在一起，先设置顶部容器宽度为0，然后随着进度的百分比参数改变顶部容器的宽度比例，从而制作出类似于灌水一样的进度条效果。下面放代码，大家...
HTML5CSS3上-动画 转换 新特性 前端面试题部分汇总
weixin_43403124的博客
02-28 1692
HTML5 CSS3HTML5 CSS3相关面试题HTML5新特性CSS3 新特性列举 5 个以上的 H5 事件微信小程序与 H5 的区别H5 的浏览器存储有哪些？简述 transform，transition，animation 的作用使用CSS怎么让Chrome支持小于12px的文字比如10px？（了解）1.0. HTML51.1. 语义化标签1.2. 多媒体标签1.2.1. audio 音频标签1.2.2.video 视频标签1.2.3. 兼容性1.3. H5表单1.3.1. H5新增表单1.3.2.
【前端】移动互联动画
Uaena.&的博客
09-13 814
CSS动画原理：一个元素存在多个css状态，连续的播放修改元素的这些css状态，形成一组动画，这就是css动画
css 前端实现通过css动画实现进度条动态加载效果
最新发布
工作中遇到问题记录
01-15 1757
css 前端实现通过css动画实现进度条动态加载效果
前端动态进度条实现
qq_36566924的博客
05-17 712
前言:需要提前引入jq.js和animate.css
Web前端 | 进度条 | 动态进度条 | IOS进度条 | 仿IOS进度条
Vin Cente
08-09 672
动态进度条
#前端#Vue追加样式，实现动态进度条/仪表盘
ZHENGCHUNJUN的博客
02-17 3940
#前端#追加样式，动态修改进度条/仪表盘？
6个非常经典Web前端使用的炫丽进度条（二）
08-18
在线效果：http://ynif.v099.10000net.cn/demo/jindu/2/jindu/index.html
简洁灰色线花店网站css3模板下载_简洁 花店 幻灯 css3 线条 简单_html网站模板_网页源码移动端前端_H5.rar
08-06
该资源是一个适用于花店的网页设计模板，名为“简洁灰色线花店网站css3模板”，主要特点是使用了CSS3技术，结合简洁的灰色调和线条元素，为用户提供一个直观且美观的在线展示平台。这个模板适合想要快速构建响应式、...
使用css绘制弹幕,实现弹幕效果的方法总结（css和canvas）
weixin_39583751的博客
08-03 3429
这篇文章主要介绍了关于实现弹幕效果的方法总结(css和canvas) ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。css3实现乞丐版的弹幕css3弹幕性能优化canvas实现弹幕canva弹幕的扩展功1. css3实现乞丐版的弹幕(1)如何通过css3实现弹幕...
web前端开发之CSS
hu0708的博客
06-30 2674
css
用CSS+SVG做一个优雅的环形进度条
OpenTiny的博客
10-19 1547
本文为我们介绍了用CSS+SVG做一个优雅的环形进度条的核心原理。利用两个重叠的圆环形，通过对上层圆环弧长的控制来表示进度，下层圆环则作为辅助，呈现环形进度条剩余的部分。
实现环形进度条（CSS3+jQuery/Vue）
weixin_34409822的博客
04-06 634
整体思路是：通过裁切（clip）产生两个半圆展示出静态的进度条，而后通过旋转（rotate）角度的变化产生动态效果。 先来回顾两个基础知识点 （1）css的一个不常见的属性： clip: rect(top, right, bottom, left); 这个属性规定了一个裁切的矩形，其中top和bottom所指定的偏移量是从元素盒子顶部边...
线形进度条的几种实现方式
qq_40289557的博客
05-28 2349
在大屏可视化应用中，进度条可以直观地表现出某个指标的进度，进度条的展示形式又有很多种，例如环形进度条，线性进度条，本章节针对线形进度条的几种实现方案提供一下个人的见解及具体的实现方案（以vue为技术栈）
前端js实现动态更新进度条-9
weixin_34303897的博客
04-18 328
2019独角兽企业重金招聘Python工程师标准>>> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值