thoth-frontend-test/src/views/projectManage/version/list/timeLine.vue

<template>
  <div class="swiper-container">
    <swiper ref="mySwiper" class="swiper-wrapper timeline" :options="options">
      <swiper-slide v-for="(item,index) in steps" :key="index" class="swiper-slide">
        <div class="line" />
        <div class="center" :class="'circle' + item.type">
          <div :class="[item.type === 2 ? 'circle' : 'circle-in', 'center']" />
        </div>
        <div :class="'content' + item.type">
          <span>{{ item.title }}</span><span class="date">{{ item.dateLabel }}</span>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import preImg from '@/icons/png/previous.png'
import nextImg from '@/icons/png/next.png'
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  props: {
    steps: {
      type: Array,
      default() {
        return [
          { dateLabel: 'January 2017', title: 'Gathering Information' },
          { dateLabel: 'February 2017', title: 'Planning' },
          { dateLabel: 'March 2017', title: 'Design' }
        ]
      }
    }
  },
  data() {
    return {
      nextImg: nextImg,
      preImg: preImg,
      options: {
        slidesPerView: 5,
        grabCursor: true
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  created() {
    this.steps.forEach(item => {
      const list = item.dateLabel.split(' ')
      item.dateLabel = list[0]
    })
  }
}
</script>

<style scoped lang="scss">
.swiper-container {
  padding: 50px 0;
  position: relative;
  overflow-x: auto;
}
.swiper-container::-webkit-scrollbar {display:none}
.timeline {
  width: 100%;
  list-style-type: none;
  display: flex;
  padding: 0;
  margin: 0;
  text-align: center;
}
.swiper-slide {
  height: 150px;
  width: 200px;
  display: flex;
  align-items: center;
  font-size: 18px;
  position: relative;
  .line{
    width: 100%;
    border: 1px solid #E5E5E5;
  }
  .center {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .circle0,.circle1,.circle2 {
    position: absolute;
  }
  .circle0::before {
    content: '';
    position: absolute;
    height: 40px;
    border: 1px solid #4091f7;
    left: 50%;
    top: -5px;
    transform: translate(-50%,-33px);
  }
  .circle1::after{
    content: '';
    position: absolute;
    height: 40px;
    border: 1px solid #4091f7;
    left: 50%;
    bottom: -5px;
    transform: translate(-50%,33px);
  }
  .circle2::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,33px);
  }
  .circle {
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    background: #FFF;
    border: 2px solid #92d048;
  }
  .circle-in {
    position: absolute;
    border-radius: 50%;
    border: 6px solid #4091f7;
  }
  .content0,.content1,.content2 {
    width: 100%;
    font-size: 14px;
    color: #333;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    span {
      margin-right: 5px;
    }
  }
  .content0 {
    top: 0px;
  }
  .content1 {
    bottom: 0px;
  }
  .content2 {
    top: 36px;
  }
}
.swiper-slide:nth-child(2n) {
  width: 40%;
}
.swiper-slide:nth-child(3n) {
  width: 20%;
}
.swiper-button {
  position: relative;
  top: -75px;
}
</style>