import css from './style.m.css'; import PropTypes from 'prop-types'; import { aLinkProps } from '@src/utils/common'; import { Timeline } from 'antd'; import { Steps } from 'antd'; import { CheckOutlined } from '@ant-design/icons'; import { useState, useEffect } from 'react'; const { Step } = Steps; const description = 'This is a description.'; let startDate ='2024-10-16'; let betweenDate ='2024-12-25'; let endDate ='2025-01-13'; let current =1; function TimeLine(props) { const { data } = props; const [subTitle, setSubTitle] = useState(''); useEffect(() => { const titles = { 0: '火热报名中', 1: '复赛', 2: '完赛' }; setSubTitle(titles[current] || ''); // 如果 current 没有匹配的值，则设置默认副标题 }, [current]); if (data && data?.length <= 0) return; const href = 'developer.huaweicloud.com/competition…' + data.id; return (
.contentWrapper { margin-top: 20px; }
.contentWrapper :global(.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item:first-child) { padding-left: 0px; } .contentWrapper :global(.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item) { padding-left: 0px; }
.contentWrapper :global(.ant-steps-item-content) { display: inline-block !important; vertical-align: top; position: relative; height: 94px; width: 140px; text-align: center; /* 增加居中 */ } .contentWrapper :global(.ant-steps-item-container) { outline: none; display: flex; align-items: center; position: relative; } .contentWrapper :global(.ant-steps-item-title) { position: absolute; display: flex; align-items: center; padding-right: 16px; color: rgba(0, 0, 0, 0.85); font-size: 16px; line-height: 32px; top: -10px; left: -1px; }
.contentWrapper :global(.ant-steps-item-subtitle) { display: inline-block; visibility: hidden; margin-left: 8px; color: #fff; font-weight: normal; font-size: 12px; line-height: 22px; background-color: #ff4c23; border-radius: 4px; padding-top: 6px; padding-left: 10px; padding-right: 10px; }
.contentWrapper :global(.ant-steps-item-title::after) { position: absolute; top: 55px; left: 36%; display: block; width: 9999px; height: 8px; background: #dadada; content: ''; z-index: 1; border-top: 1px solid #aaaaaa; }
.contentWrapper :global(.ant-steps-item-description) { position: absolute; top: 74px; left: 33%; transform: translateX(-50%); width: 140px; text-align: center; white-space: normal; }
.contentWrapper :global(.ant-steps:not(.ant-steps-vertical) .ant-steps-item-custom .ant-steps-item-icon) { position: absolute; top: 31px; left: 29px; }
.contentWrapper :global(.ant-steps-item-custom > .ant-steps-item-container > .ant-steps-item-icon > .ant-steps-icon) { display: flex; justify-content: center; align-items: center; border-radius: 50%; top: 0px; left: 0.5px; width: 32px; height: 32px; font-size: 15px; line-height: 15px; } .contentWrapper :global(.ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon) { color: #e5ecfa; border: 4px solid #e5ecfa; background-color: #ffffff; } .contentWrapper :global(.ant-steps-item-custom.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon) { color: #ffffff; border: 4px solid #ffffff; background-color: #36c49b; box-shadow: 0 0 4px #f7f7f7, /* 较浅的阴影 / 0 0 8px #eaeaea, / 中间的阴影色 / 0 0 12px #dcdcdc, / 更深一点的阴影色 / 0 0 16px #ffffff; / 最终的颜色 */ } .contentWrapper :global(.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon) { color: #ffffff; }
.contentWrapper :global(.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title) { color: #36c49b; } .contentWrapper :global(.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title) { color: #36c49b; } .contentWrapper :global( .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title > .ant-steps-item-subtitle ) { visibility: visible; } .contentWrapper :global(.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description) { color: #36c49b; } .contentWrapper :global(.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description) { color: #070707; } .contentWrapper :global(.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after) { background-color: #696969; }
