横向时间轴

2022-03-28 11:32:33 阅读：168 来源： 互联网

标签：决赛范可新 title 中国队横向选手时间轴 2022

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

View Code

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

View Code

4. 效果

标签：决赛,范可新,title,中国队,横向,选手,时间轴,2022
来源： https://www.cnblogs.com/victoria-csl/p/16066255.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

横向时间轴