xiangan_pc/src/components/time-line/index.vue

<template>
  <div class="time-line">
    <div v-for="year in years" :key="year">
      <!-- 年份 -->
      <div class="time-line-year">
        <div class="time-line-item-tail" />
        <div class="time-line-item-date">{{ year }} </div>
      </div>
      <div v-for="(item, index) in filterYearDataList(year)" :key="index" class="time-line-item">
        <!-- 节点 -->
        <div class="time-line-item-node">
          <i class="node" />
          <!-- <div class="node" :class="{ nodeActive: item.active }" /> -->
        </div>
        <!-- 节点尾 -->
        <div class="time-line-item-tail" />
        <!-- 内容 -->
        <div class="time-line-item-wrapper">
          <!-- 抬头 -->
          <div class="time-line-item-wrapper-title" @click="selectMenu(dataList, index)">
            <span class="title-date">{{ item.date|convertDate }} </span>
            <span class="title-name">{{ item.name }}</span>
          </div>
          <!-- 内容 -->
          <div v-for="(item2, index2) in item.list" :key="index2" class="time-line-item-wrapper-item">
            <span>{{ item2.name }}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { formatDate } from '@/utils/index.js'
export default {
  name: 'TimeLine',
  props: {
    dataList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
    }
  },
  computed: {
    years() {
      const result = []
      this.dataList.forEach(item => {
        const year = formatDate(item.date, 'YYYY')
        if (result.indexOf(year) < 0) {
          result.push(year)
        }
      })
      return result
    }
  },
  methods: {
    selectMenu(arr, index) {
      arr[index].active = !arr[index].active
    },
    filterYearDataList(val) {
      return this.dataList.filter(item => {
        return item.date.indexOf(val) >= 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$color: #fff;
$containerBgColor: #333335;
$borderColor: #424242;
$paddingRight: 20px;

.time-line {
  margin: 0;
  padding: 5px $paddingRight;
  font-size: 14px;
  color: $color;
  background-color: $containerBgColor;
  list-style: none;

  .time-line-year {
    position: relative;
    height: 50px;

    // 年份
    .time-line-item-date {
      position: relative;
      top: 13px;
      padding-left: 10px;
      margin-left: -10px;
      margin-right: -$paddingRight;
      height: 24px;
      line-height: 24px;
      font-size: 16px;
      font-style: oblique;
      font-family: fantasy;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      background-color: #424242;
      letter-spacing: 1px;
    }
  }

  .time-line-item {
    position: relative;
    padding-bottom: 10px;

    // 节点
    .time-line-item-node {
      z-index: 3;
      display: inline-block;
      position: absolute;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 15px;
      background-color: #fff;
      border: 1px solid #3e9fff;
      border-color: $borderColor;

      .node {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #959595;
      }
    }

    // wrapper
    .time-line-item-wrapper {
      position: relative;
      padding-left: 28px;
      top: -3px;

      // 抬头
      .time-line-item-wrapper-title {
        color: $color;

        .title-date {
          display: inline-block;
          padding-right: 10px;
          color: #ecb36d;
        }
        .title-name {
          display: inline-block;
          background-color: #fff;
          color: #000;
          cursor: pointer;
          padding: 0 10px;
          border-radius: 5px;
        }
      }

      // 内容
      .time-line-item-wrapper-item {
        margin-top: 5px;
        padding: 2px 0px;
        // background-color: #fff;
        color: #fff;
        border-radius: 3px;
      }
    }

    .transitionCon {
      position: relative;
    }
  }
}

// 节点尾（竖线）
.time-line-item-tail {
  position: absolute;
  left: 7px;
  top: 4px;
  height: 100%;
  border-left: 3px solid;
  border-color: $color;
}

.nodeActive {
  background-color: #3e9fff !important;
}
// .time-line .time-line-item:last-child .time-line-item-tail {
//   display: none;
// }
</style>