function renderTimeline() {
  var timelineData = [
    {
      year: "2022",
      month: [
        {
          value: 4,
          label: ["钉钉331战役，", "智能薪酬又获钉钉人事品类第一"],
        },
        {
          value: "...未完待续",
          type: "last",
          label: [""],
        },
      ],
    },
    {
      year: "2021",
      month: [
        {
          value: 1,
          label: ["考勤确认上线钉钉"],
        },
        {
          value: 5,
          label: ["智能薪酬3.0亮相柯南在路上春夏发布会，", "首发年度洞察报告"],
        },
        {
          value: 6,
          label: [
            "智能薪酬获颁了“钉钉开放平台年度银奖”，",
            "蝉联“钉钉开工节人事管理类目销售冠军”",
          ],
        },
        {
          value: 11,
          label: ["柯南在路上获颁“2021杭州人力资源服务和产品", "创新创优优秀项目”"],
        },
        {
          value: "年底",
          label: ["柯南在路上3周年"],
        },
      ],
    },
    {
      year: 2020,
      month: [
        {
          value: 4,
          label: [
            "钉钉联合柯南在路上发布智能薪酬2.0,",
            "正式推出制造、零售两大行业解决方案",
          ],
        },
        {
          value: 12,
          label: ["柯南在路上入选“2020抗疫防疫先进单位”"],
        },
      ],
    },
    {
      year: 2019,
      month: [
        {
          value: 5,
          label: ["柯南在路上受邀参加“国际人力资源技术大会”"],
        },
        {
          value: 7,
          label: ["智能工资条上线钉钉"],
        },
      ],
    },
    {
      year: 2018,
      month: [
        {
          value: 6,
          label: ["智能薪酬上线钉钉"],
        },
        // {
        //   value: 12,
        //   label: ["智能社保上线钉钉"],
        // },
        {
          value: "年底",
          label: ["钉钉与人力窝合资，成立柯南在路上"],
        },
      ],
    },
  ];

  var timelineDom = document.getElementById("about-timeline");

  var timelineRes = "";
  var timelineDataTotal = timelineData.length;

  timelineData.forEach((yearData, index) => {
    var cur = Math.abs(timelineDataTotal - 1 - index);
    var isLeft = !(cur % 2);
    var item = "";
    yearData.month.forEach(({ value, label, type }) => {
      var labelTmp = label;
      if (label.length > 1) {
        labelTmp = label.map((v) => `<div>${v}</div>`).join("");
      }
      var valueTmp = typeof value === "number" ? value + "月" : value;
      if (type === "last") {
        valueTmp = value;
      } else if (isLeft) {
        valueTmp = "_" + valueTmp;
      } else {
        valueTmp = valueTmp + "_";
      }
      item += isLeft
        ? `<div class="about-month-item" data-aos="fade-up">
            <div class="about-month-label">${labelTmp}</div>
            <div class="${
              type === "last" ? "about-month-value-last" : "about-month-value"
            }">${valueTmp}</div>
          </div>`
        : `<div class="about-month-item" data-aos="fade-up">
            <div class="${
              type === "last" ? "about-month-value-last" : "about-month-value"
            }">${valueTmp}</div>
            <div class="about-month-label">${labelTmp}</div>
          </div>`;
    });
    timelineRes += `<div class="about-year-item ${
      isLeft ? "about-year-item-left" : "about-year-item-right"
    }" data-aos="fade-up">
      <div class="about-year-name" data-aos="fade-up">${yearData.year}</div>
      <div class="about-month-box" data-aos="fade-up">${item}</div>
    </div>`;
  });
  timelineRes += `<div class="about-time-line-circle"></div>`;
  timelineDom.innerHTML = timelineRes;
}

// renderTimeline();