thoth-frontend-test/src/components/timeline/index.vue

<template>
  <div :class="[!bgmargin ? 'qz-timeline-bg' : 'qz-timeline-bgOne']">
    <div class="qz-timeline-layout">
      <div v-for="(item, index) in list" :key="index">
        <div class="qz-timeline-name" :class="[index === key ? 'qz-time-color1' : 'qz-time-color']">{{ item }}</div>
        <span class="circular" :class="[index === key ? 'qz-time-code1' : 'qz-time-code']" @click="qz_click_code({value: index, name: item})" />
        <div class="qz-timeline-divider" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: { type: Array, required: true },
    num: { type: Number, default: 0 },
    bgmargin: { type: Boolean, default: false }
  },
  data() {
    return {
      list: [],
      key: this.num
    }
  },
  watch: {
    data: {
      handler(newV) {
        if (!newV) return
        this.list = newV
      },
      deep: true,
      immediate: true
    },
    num: {
      handler(newV) {
        this.key = newV
      },
      deep: true
    }
  },
  methods: {
    // 初始化
    timeline_init() {
      this.list = this.list.map(item => ({
        ...item,
        show: false
      }))
    },
    // 点击节点
    qz_click_code(val) {
      this.key = val.value
      this.$emit('update', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.qz-timeline-bgOne {
  min-width: max-content;
  margin: 0 30px 18px;
  text-align: center;
  padding-right: 30px;
}
.qz-timeline-bg {
  min-width: max-content;
  margin: 29px 30px 30px;
  text-align: center;
  padding-right: 30px;
}
.qz-timeline-layout {
  display: flex;
  justify-content: center;
}
.qz-timeline-divider {
  content: '';
  min-width: 100px;
  border: 1px solid #E5E5E5;
}
.qz-timeline-name {
  font-weight: 400;
  font-size: 12px;
  color: #444444;
  position: relative;
  top: 12px;
}
.circular {
  width: 10px;
  height: 10px;
  margin: 0 8px;
  display: inline-block;
  border: 1px solid #60AEFF;
  border-radius: 50%;
  position: relative;
  top: 12px;
  cursor: pointer;
}
.qz-time-code {
  background: #FFF;
}
.qz-time-code1 {
  background: #60AEFF;
}
.qz-time-color {
  color: #444;
}
.qz-time-color1 {
  color: #60AEFF;
}
</style>