diantou/src_product/iam/components/progress-bar.vue

<template>
  <div class="template-view">
    <div class="progressbar-card">
      <div class="progressbar" :style="{ width: cardwidth + '%', height: cardheight + 'px' }">
        <div class="before"></div>
        <div
          :class="bartusecolor[colorIndex]"
          :style="{ width: width + '%', transition: 'width' + ' ' + time + 's' }"
        >
          <span></span>
        </div>
        <div class="label-flex">
          <div class="label la-top">
            <span v-for="(zt, index) in progressData" :key="index" class="traffic-info"
              ><div
                class="indexys"
                :class="{
                  indexywc: index + 1 < progressJd,
                  indexjxz: index + 1 === progressJd,
                  indexwwc: index + 1 > progressJd,
                }"
                >{{ index + 1 }}</div
              >
              <div class="ztinfo">{{ zt.title }}</div></span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import components from './_import-components/progress-bar-import'

export default {
  name: 'ProgressBar',
  metaInfo: {
    title: 'ProgressBar',
  },
  components,
  props: {
    width: {
      type: null,
      default: '',
    },
    cardheight: {
      type: Number,
      default: 400,
    },
    cardwidth: {
      type: Number,
      default: 20,
    },
    colorIndex: {
      type: Number,
      default: 0,
    },
    time: {
      type: Number,
      default: 5,
    },
    progressData: {
      type: Array,
      default: () => [],
    },
    progressJd: {
      type: Number,
      defalut: 1,
    },
  },
  data() {
    return {
      bartusecolor: ['bar tuse color', 'bar tuse color2', 'bar tuse color3', 'bar tuse color4'],
      barardcolor: ['bar ard color', 'bar ard color2', 'bar ard color3', 'bar ard color4'],
    }
  },
  methods: {},
}
</script>

<style scoped>
.progressbar .bar span {
  position: absolute;
  display: block;
  width: 150%;
  height: 150%;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  top: -5px;
  left: -100px;
  background: url(jd.png) 0 0; /*进度条不透明背景 */
  animation: mymove 5s infinite; /*控制进度条滚动 */
  background-size: 30% 100%;
  opacity: 0.4;
}
.progressbar {
  position: relative;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  margin: 0px auto;
}
.progressbar:first-of-type {
  margin-top: 40px;
}
.progressbar .before {
  position: absolute;
  display: block;
  content: '';
  width: calc(100% + 4px);
  height: 20px;
  left: -2px;
  right: 1px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 2px 0 rgba(180, 180, 180, 0.85);
  border: 1px solid rgba(222, 222, 222, 0.8);
}
.progressbar .bar {
  position: absolute;
  display: block;
  width: 0;
  height: 16px;
  top: 2px;
  left: 0;
  background: #7eea19;
  border-radius: 16px;
  box-shadow: 0 0 12px 0 #7eea19, inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.25), inset -1px 0 0 0 rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.progressbar .label .bar {
  position: relative;
  display: inline-block;
  top: 12%;
  left: 0;
  margin-right: 5px;
  width: 16px;
}
.progressbar .label .bar.color {
  box-shadow: 0 0 5px 0 #7eea19, inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.25), inset -1px 0 0 0 rgba(255, 255, 255, 0.25);
}
.progressbar .label .bar.color2 {
  box-shadow: 0 0 5px 0 #e5c319, inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.25), inset -1px 0 0 0 rgba(255, 255, 255, 0.25);
}
.progressbar .label .bar.color3 {
  box-shadow: 0 0 5px 0 #44b6af, inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.25), inset -1px 0 0 0 rgba(255, 255, 255, 0.25);
}
.progressbar .label .bar.color4 {
  box-shadow: 0 0 5px 0 #186de2, inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.25), inset -1px 0 0 0 rgba(255, 255, 255, 0.25);
}
.progressbar .bar.color2 {
  background: #e5c319;
  box-shadow: 0 0 12px 0 #e5c319, inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.25), inset -1px 0 0 0 rgba(255, 255, 255, 0.25);
}
.progressbar .bar.color3 {
  background: #61c1bb;
  box-shadow: 0 0 7px 0 #44b6af, 0 1px 0 0 rgba(255, 255, 255, 0.45),
    1px 0 0 0 rgba(255, 255, 255, 0.25), -1px 0 0 0 rgba(255, 255, 255, 0.25);
}
.progressbar .bar.color4 {
  background: #186de2;
  box-shadow: 0 0 12px 0 #186de2, inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.25), inset -1px 0 0 0 rgba(255, 255, 255, 0.25);
}
.progressbar .bar:before {
  position: absolute;
  display: block;
  content: '';
  width: 606px;
  height: 150%;
  top: -25%;
  left: -25px;
}
.progressbar .bar:after {
  position: absolute;
  display: block;
  content: '';
  width: 64px;
  height: 16px;
  right: 0;
  top: 0;
  border-radius: 0 16px 16px 0;
}

.label.la-top code,
.progressbar .label {
  display: flex;
  align-items: center;
}
.progressbar .label {
  font-family: aldrich, sans-serif;
  position: relative;
  width: 100%;
  height: 30px;
  line-height: 30px;
  bottom: 40px;
  left: 0;
  background: #fff;
  font-weight: 700;
  font-size: 12px;
  color: #515a6e;
}
.label.la-top code {
  position: absolute;
  right: 0;
  top: 6px;
}
.traffic-info {
  margin-top: 6px;
  margin-right: 10px;
}

.progressbar-card {
  background: #fff;
  display: flex;
  align-items: center;
}
@keyframes mymove {
  0% {
    transform: translateX(0px);
    opacity: 0.5;
  }
  10% {
    transform: translateX(5px);
    opacity: 1;
  }
  20% {
    transform: translateX(20px);
    opacity: 0.5;
  }
  30% {
    transform: translateX(30px);
    opacity: 1;
  }
  40% {
    transform: translateX(40px);
    opacity: 0.5;
  }
  50% {
    transform: translateX(50px);
    opacity: 1;
  }
  60% {
    transform: translateX(60px);
    opacity: 0.6;
  }
  70% {
    transform: translateX(70px);
    opacity: 1;
  }
  80% {
    transform: translateX(80px);
    opacity: 0.4;
  }
  90% {
    transform: translateX(90px);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0.52;
  }
}

@-webkit-keyframes mymove /*Safari and Chrome*/ {
  0% {
    transform: translateX(0px);
    opacity: 0.5;
  }
  10% {
    transform: translateX(5px);
    opacity: 1;
  }
  20% {
    transform: translateX(20px);
    opacity: 0.5;
  }
  30% {
    transform: translateX(30px);
    opacity: 1;
  }
  40% {
    transform: translateX(40px);
    opacity: 0.5;
  }
  50% {
    transform: translateX(50px);
    opacity: 1;
  }
  60% {
    transform: translateX(60px);
    opacity: 0.6;
  }
  70% {
    transform: translateX(70px);
    opacity: 1;
  }
  80% {
    transform: translateX(80px);
    opacity: 0.4;
  }
  90% {
    transform: translateX(90px);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0.52;
  }
}
.indexys {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  color: #fff;
  padding-left: 10px;
}
.indexywc {
  background-color: #e5c319;
}
.indexjxz {
  background-color: #45b6af;
}
.indexwwc {
  background-color: #515a6e;
}
.ztinfo {
  margin-left: 35px;
}
</style>