jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/ProgressBar.vue

<template>
  <div class="congestion">
    <div>
      <!-- :style="{ width: dataList.length * 300 }" -->
      <div
        :class="
          selectIndex == index
            ? selectLine < 1
              ? 'item action Abefore'
              : 'item action Aafter'
            : selectIndex + selectLine == index
            ? selectLine < 1
              ? 'item action Aafter'
              : 'item action Abefore'
            : 'item'
        "
        v-for="(item, index) in dataList"
        :key="index"
      >
        <i class="after" v-if="index === 0"></i>
        <i
          class="after"
          v-else
          @click="selectItem(index, -1, dataList[index - 1])"
        ></i>
        <i class="before" v-if="index === dataList.length - 1"></i>
        <i class="before" v-else @click="selectItem(index, +1, item)"></i>

        <span></span>
        <div>{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProgressBar",
  components: {},
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    selectIndex: {
      type: Number,
      default: 1,
    },
    reset: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // selectIndex: 0,
      selectLine: -1,
    };
  },
  created() {},
  watch: {
    reset: {
      handler(newV) {
        if (newV) {
          this.selectLine = -1;
        }
      },
      immediate: true,
    },
  },
  methods: {
    selectItem(index, num, item) {
      // this.selectIndex = index;
      this.selectLine = num;
      if (item) this.$emit("selectItem", item, index);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.congestion {
  width: 100%;
  height: 35px;
  display: inline-flex;
  flex-direction: row;

  > div {
    position: relative;
    width: 100%;
    height: 35px;
    display: inline-flex;
    flex-direction: row;

    > .item .after {
      position: absolute;
      display: inline-flex;
      left: 0px;
      top: -5px;
      width: 45px !important;
      height: 35px !important;
      background-color: transparent;
      cursor: pointer;
    }

    > .item .after::after {
      content: "";
      position: absolute;
      display: inline-flex;
      left: 0px;
      top: 8px;
      width: 45px !important;
      height: 3px !important;
      background-color: #c7c7c7;
    }

    > .item .before {
      position: absolute;
      display: inline-flex;
      right: 0px;
      top: -5px;
      width: 45px;
      height: 35px;
      background-color: transparent;
      cursor: pointer;
    }

    > .item .before::after {
      content: "";
      position: absolute;
      display: inline-flex;
      left: 0px;
      top: 8px;
      width: 45px !important;
      height: 3px !important;
      background-color: #c7c7c7;
    }

    .item.action .after::after {
      background-color: #72fdc9;
    }

    .item.action.Aafter .after::after {
      background-color: #c7c7c7 !important;
    }

    > .item.action.Aafter .before::after {
      background-color: #72fdc9;
    }

    > .item.action.Abefore .after::after {
      background-color: #72fdc9;
    }

    > .bef::before {
      background-color: #72fdc9 !important;
    }

    > .aft::after {
      background-color: #72fdc9 !important;
    }

    > .item.action span {
      background-color: #72fdc9;
      cursor: pointer;
    }

    > .item.action span::after {
      border-color: #72fdc9;
    }

    > .action div {
      color: #72fdc9 !important;
    }

    > .item {
      position: relative;
      width: 113px;
      height: 35px;
      display: inline-flex;
      flex-direction: column;
      justify-items: center;

      > span {
        position: absolute;
        display: inline-flex;
        width: 9px;
        height: 9px;
        background: #c7c7c7;
        border-radius: 50%;
        opacity: 1;
        left: 53px;
      }

      > div {
        font-size: 14px;
        position: relative;
        display: inline-flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        top: 5px;
        margin-top: 10px;
        color: #c7c7c7;
      }

      > span::after {
        content: "";
        position: absolute;
        display: inline-flex;
        width: 15px;
        height: 15px;
        border: 1px solid #c7c7c7;
        border-radius: 50%;
        opacity: 1;
        top: -3.5px;
        left: -3px;
      }
    }
  }
}
</style>