横向时间轴

初始版的效果

plus版本

plus版demo

初始版的实现

mock数据

  const list = [{
    id: 11, title: '中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌', content: '北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大', eventDate: '2022-02-07 22:39:19',
  }, {
    id: 2, title: '春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。', content: '在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大', eventDate: '2022-02-05 17:34:50',
  }, {
    id: 3, title: '中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌', content: '北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大', eventDate: '2022-02-07 22:39:19',
  }, {
    id: 8, title: '春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。', content: '在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大', eventDate: '2022-02-05 17:34:50',
  }, {
    id: 5, title: '中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌', content: '北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大', eventDate: '2022-02-07 22:39:19',
  }, {
    id: 6, title: '春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。', content: '在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大', eventDate: '2022-02-05 17:34:50',
  }, {
    id: 7, title: '中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌', content: '北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大', eventDate: '2022-02-07 22:39:19',
  }, {
    id: 29, title: '春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。', content: '在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大', eventDate: '2022-02-05 17:34:50',
  }, {
    id: 30, title: '中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌', content: '北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大', eventDate: '2022-02-07 22:39:19',
  }, {
    id: 81, title: '春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。', content: '在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大', eventDate: '2022-02-05 17:34:50',
  }, {
    id: 52, title: '中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌', content: '北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大', eventDate: '2022-02-07 22:39:19',
  }, {
    id: 83, title: '春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。', content: '在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大', eventDate: '2022-02-05 17:34:50',
  }]

实现js

  /* eslint-disable jsx-a11y/click-events-have-key-events */
  import React from 'react'
  import { Tooltip } from 'antd'

  const EventTimeLine = ({ list, onChange, currentEvent }) => (
    <div className="eventScreen-footer">
      {list.map(item => (
        <div
          className={currentEvent === item.id ? 'selected-event' : 'event'}
          key={item.id}
          // onClick={() => {
          //   setCurrentEvent(item.id)
          // }}
          onClick={() => onChange(item.id)}
        >
          <div className="event-content">
            <div
              className="event-title"
              style={{
                overflow: 'hidden',
                display: '-webkit-box',
                '-webkit-box-orient': 'vertical',
                'text-overflow': 'ellipsis',
              }}
              title={item.title}
            >
              <Tooltip
                title={(
                  <div>
                    <div className="mb8 fac">{item.title}</div>
                    <div>{item.content}</div>
                  </div>
                )}
                color="#fff"
                overlayInnerStyle={{ color: '#000' }}
              >
                {item.title}
              </Tooltip>
            </div>
          </div>
          <div className="event-style">
            <div className={currentEvent === item.id ? 'event-crile-selected' : 'event-crile'}>
              {currentEvent === item.id ? <div className="event-crile-checked" /> : null}
            </div>
          </div>
          <div className="event-time">
            {item.eventDate}
          </div>
        </div>
      ))}
    </div>
  )

  export default EventTimeLine

样式

  .eventScreen-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    background: rgba(255, 76, 0, 0.6);
    white-space: nowrap;
    overflow-y: auto;
    color: #fff;
    text-align: center;
    padding-top: 30px;

    .event-content {
      height: 80px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .event, .selected-event {
      width: 220px;
      display: inline-block;
      white-space: normal;
      cursor: pointer;
    }

    .event-style {
      height: 30px;
      margin-top: 16px;
      position: relative;
      border: 1px solid rgba(0, 0, 0, 0);
    }

    .event-style:before {
      content: '';
      display: block;
      width: 220px;
      height: 4px;
      margin: 13px 0;
      color: #fff;
      background: rgba(255, 255, 255, 0.6);
      position: absolute;
    }

    .event-crile {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
      margin: 10px auto;
    }

    .event {
      .event-title, .event-time {
        font-size: 18px;
        font-weight: 300;
      }

      .event-title {
        -webkit-line-clamp: 3;
        height: 80px;
        padding: 0 16px;
      }
    }

    .selected-event {
      .event-title {
        -webkit-line-clamp: 2;
        height: 60px;
        padding: 0 16px;
      }

      .event-title, .event-time {
        // font-size: 20px;
        font-size: 18px;
        font-weight: 700;
      }

      .event-crile-selected {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: 0 auto;
        background: rgba(255, 2555, 252, 0.3);
        padding: 10px;
      }

      .event-crile-checked {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
      }
    }
  }

效果

plus版本实现

mockdata

  const list = [
    {
      id: 11,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2022-02-08 22:39:19"
    },
    {
      id: 13,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2022-02-09 22:39:19"
    },
    {
      id: 15,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2022-02-10 22:39:19"
    },
    {
      id: 16,
      title: "测试。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2022-02-11 17:34:50"
    },
    {
      id: 12,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2022-02-12 17:34:50"
    },
    {
      id: 17,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2022-02-13 22:39:19"
    },
    {
      id: 18,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2022-02-14 17:34:50"
    },
    {
      id: 129,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2022-02-20 17:34:50"
    },
    {
      id: 130,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2022-03-01 22:39:19"
    },
    {
      id: 181,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2022-03-03 17:34:50"
    },
    {
      id: 152,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2022-03-14 22:39:19"
    },
    {
      id: 11,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2022-03-15 22:39:19"
    },
    {
      id: 3,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2022-03-16 22:39:19"
    },
    {
      id: 5,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2022-03-17 22:39:19"
    },
    {
      id: 7,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2022-03-18 22:39:19"
    },
    {
      id: 2,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2022-04-01 17:34:50"
    },
    {
      id: 29,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2022-04-02 17:34:50"
    },
    {
      id: 183,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2022-04-05 17:34:50"
    },
    {
      id: 30,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2022-04-18 22:39:19"
    },
    {
      id: 81,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2022-04-20 17:34:50"
    },
    {
      id: 52,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2022-05-18 22:39:19"
    },
    {
      id: 83,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2022-05-24 17:34:50"
    },
    {
      id: 8,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2022-06-01 17:34:50"
    },
    {
      id: 6,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2022-06-03 17:34:50"
    },
    {
      id: 1183,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2023-04-05 17:34:50"
    },
    {
      id: 1130,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2023-04-18 22:39:19"
    },
    {
      id: 1181,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2023-04-20 17:34:50"
    },
    {
      id: 1152,
      title: "中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌",
      content:
        "北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大",
      eventDate: "2023-05-18 22:39:19"
    },
    {
      id: 1183,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2023-05-24 17:34:50"
    },
    {
      id: 1134,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2023-06-01 17:34:50"
    },
    {
      id: 116,
      title:
        "春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。",
      content:
        "在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大",
      eventDate: "2023-06-03 17:34:50"
    }
  ];

  export { list };

jsx

  import moment from 'moment'
  import React, {useEffect, useState} from 'react'
  import {Tooltip} from 'antd'
  import _ from 'lodash'
  // eslint-disable-next-line import/no-unresolved
  import './time-line.styl'

  const TimeLine = () => {
    const [upData, setUpdata] = useState([])
    const [downData, setDowndata] = useState([])
    const [currentEvent, setcurrentEvent] = useState(0)
    const [dateList, setDateList] = useState({})
    
    useEffect(() => {
      const uData = []
      const dData = []
      const newdatEList = {}
      list.forEach((item, index) => {
        const itemYear = moment(item.eventDate).get('year')
        const str = moment(item.eventDate).format('YYYY-M')
        if (newdatEList[itemYear]) {
          newdatEList[itemYear] = [
            ...newdatEList[itemYear], 
            newdatEList[itemYear].includes(str) ? '0000-00' : str,
          ]
        } else {
          newdatEList[itemYear] = [str]
          // 这一年的第一条数据
          // index % 2 === 0
          
          index && uData.push({CurrentYearNO1: true, id: `upzw${index}`})
          index && dData.push({CurrentYearNO1: true, id: `downzw${index}`})
          // item.CurrentYearNO1 = true
        }
        if (index % 2 === 0) {
          uData.push(item)
        } else {
          dData.push(item)
        }
      })
      
      setUpdata(uData)
      setDowndata(dData)
      setDateList(newdatEList)
    }, [list])

    return ( 
      <div className="eventScreen-footer">
        <div className="main-timeline">
          <div className="FBH FBAC">
            {
              upData.map((item, index) => (item.CurrentYearNO1 ? (<div className="timelinezw FBV FBJE ">&nbsp;</div>) : (
                <div
                  className={currentEvent === item.id ? 'timeline FBV FBJE hand active' : 'timeline FBV FBJE hand'}
                  style={{marginLeft: index === 0 ? '80px' : '0px'}}
                  onClick={() => setcurrentEvent(item.id)}
                >
                  <div className="hand omit2">
                    <Tooltip
                      title={(
                        <div className="toolTip-content">
                          <div className="mb8 fac">{item.title}</div>
                          <div>{item.content}</div>
                        </div>
                      )}
                      overlayClassName="toolTip"
                      color="rgba(73,193,193,1)"
                    >
                      {item.title}
                    </Tooltip>
                  </div>
                  <div>{item.eventDate}</div>
                </div>
              )))
            }
          </div>
          <div className="line FBH">
            {Object.keys(dateList).map(el => (
              <>
                <div className="year">{el}</div>
                {dateList[el].map(item => {
                  const arr = _.split(item, '-')
                  if (arr[1] && arr[1] !== '00') {
                    return (
                      <div className="line-date">
                        {arr[1]}
                        月
                      </div>
                    )
                  } 
                  return <div className="other-box">&nbsp;</div>
                })}
                <div className="last-box">&nbsp;</div>
              </>
            ))}
            
          </div>
          <div className="FBH FBAC">
            {
              downData.map((item, index) => (item.CurrentYearNO1 ? (
                <div className="timelinezw FBV FBJE ">&nbsp;</div>
              ) : (
                <div
                  className={currentEvent === item.id ? 'timeline bottom FBV FBJS hand active' : 'timeline bottom FBV FBJS hand'}
                  style={{marginLeft: index === 0 ? '190px' : '0'}}
                  onClick={() => setcurrentEvent(item.id)}
                >
                  <div>{item.eventDate}</div>
                  <div className="hand omit2">
                    <Tooltip
                      title={(
                        <div className="toolTip-content">
                          <div className="mb8 fac">{item.title}</div>
                          <div>{item.content}</div>
                        </div>
                      )}
                      overlayClassName="toolTip"
                      color="rgba(73,193,193,1)"
                    >
                      {item.title}
                    </Tooltip>
                  </div>
                </div>
              )))
            }
          </div>
        </div>
      </div>
    )
  }

  export default TimeLine

styl（stylus）

  #root {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00383e;
  }

  .omit {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;
  }

  for $n in 2 3 4 5 {
    .omit{$n} {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: $n;
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
    }
  }

  .hand {
    cursor: pointer;
  }

  .FBH, .FBV {
    display: flex;
  }

  .FBV {
    flex-direction: column;
  }

  .FBAS {
    align-items: flex-start;
  }

  .FBAC {
    align-items: center;
  }

  .eventScreen-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    background: rgba(10, 10, 10, 0.8);
    overflow-y: auto;
    color: #fff;
    text-align: center;

    .main-timeline {
      position: relative;
      width: 100%;
      height: 100%;

      .line {
        height: 32px;
        margin: auto 0;
        position: absolute;
        top: calc(50% - 16px);
        left: 0;
        background-image: linear-gradient(180deg, #D8B432 0%, #FDFD59 48%, #AE6B00 100%);

        .year {
          min-width: 80px;
          font-family: PingFang-SC-Heavy;
          font-size: 28px;
          line-height: 32px;
          color: #5F3A00;
          text-align: center;
        }

        .other-box {
          min-width: 110px;
        }

        .line-date {
          min-width: 100px;
          font-family: PingFang-SC-Heavy;
          font-size: 20px;
          color: #5F3A00;
          border-left: #5F3A00 solid 1px;
          padding-left: 8px;
          margin-left: 10px;
          text-align: left;
        }

        .last-box {
          min-width: 110px;
        }
      }

      .timeline {
        min-width: 220px;
        height: 84px;
        padding: 8px;
        position: relative;
        float: left;

        &:before {
          content: '';
          position: absolute;
          left: 50%;
          bottom: -5px;
          width: 6px;
          height: 6px;
          background: linear-gradient(45deg, #FFFFFF, transparent 70%, transparent 100%, #FFFFFF 50%);
          transform: rotate(-45deg);
          transform-origin: left bottom;
          z-index: 10;
        }
      }

      .timelinezw {
        height: 84px;
        min-width: 220px;
        height: 84px;
        position: relative;
        float: left;
      }

      .bottom {
        margin-top: 32px;

        &:before {
          content: '';
          position: absolute;
          top: -11px;
          bottom: 0;
          left: 50%;
          width: 6px;
          height: 6px;
          background: linear-gradient(45deg, #FFFFFF, transparent 70%, transparent 100%, #FFFFFF 50%);
          transform: rotate(135deg);
          transform-origin: left bottom;
          z-index: 10;
        }
      }

      .active {
        background: #005761;
      }
    }
  }

  .toolTip {
    .ant-tooltip-inner {
      padding: 1px;
    }
  }

  .toolTip-content {
    background: #030C02;
    padding: 6px 8px;
  }

  .layer-tooltip {
    position: absolute;
    z-index: 100;
    font-size: 12px;
    padding: 2px 8px 8px;
    background: rgba(23, 109, 202, 1);
    color: #fff;
    min-width: 160px;
    max-height: 240px;
    overflow-y: hidden;
    border: #fff solid 1px;
    border-radius: 5px;

    .title {
      font-size: 18px;
      color: #FFFFFF;
      font-weight: 700;
    }

    .layer-content {
      font-size: 14px;
      color: #FFFFFF;
      line-height: 22px;
      font-weight: 700;
    }
  }

  .layer-toolTip.interactive {
    pointer-events: all;
    background: #fcfcfc;
    color: #444;
    overflow-y: auto;
  }

posted @ 2022-03-28 11:23 VictoriaC~ 阅读(513) 评论(0) 编辑收藏举报

刷新页面返回顶部

我还能坚持

是我执意要选的

横向时间轴