横向可滑动时间轴
初始版的效果
初始版的实现
- 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 "> </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"> </div>
})}
<div className="last-box"> </div>
</>
))}
</div>
<div className="FBH FBAC">
{
downData.map((item, index) => (item.CurrentYearNO1 ? (
<div className="timelinezw FBV FBJE "> </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;
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
