1. 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',
}]

2. 實現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

3. 樣式

.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;
    }
  }
}

4. 效果