父组件
<NewOrderRoll orderGroup={orderGroup} />
组件
import './newOrderRoll.less';const newOrderRoll = (orderGroup: any) => {const handle = (data: String): String[] => {return data.split(':');}return (<><div className="scroll_page"><ul className='scroll_page-head'><li>订单编号</li><li>销售员</li><li>用户</li><li>销售额(元)</li><li>下单日期</li></ul><div className="ul-wrapper"><ul className="scroll_page-item">{orderGroup?.orderGroup.map((order: String, index: any) => {const tempData = handle(order);return <ul key={index} className='scroll_page-item-ul flex-center'>{tempData.map((item: String, key: any) => {return <li key={key}>{item}</li>})}</ul>})}</ul></div></div></>)
}export default newOrderRoll;
.scroll_page {margin: 0;padding: 2px 0;list-style: none;overflow: hidden;border: 1px #5d70ea solid;font-size: 16px;text-align: center;// background-color: #5d70ea;opacity: 0.5;// height: ~'calc(299px / 1920px * 100%)';height: 20vh;&-head {display: flex;justify-content: space-between;align-items: center;height: 30px;&>li {text-align: center;background: rgba(255, 255, 255, 0.14);width: 20%;font-size: 11px;font-weight: 500;color: #96D3FE;line-height: 32px;}}.ul-wrapper {position: relative;height: 100%;overflow: hidden;}&-item:hover {// 鼠标经过暂停animation-play-state: paused;}&-item {// infinite 无限滚动 linear匀速 anim 名称 normal默认值（结束后再从头开始）height: 100%;animation: 15s anim linear infinite normal;&-ul {width: 100%;justify-content: space-between;&>li {width: 25%;text-align: center;margin: 0;padding: 0 4px;font-size: 11px;height: 30px;line-height: 30px;color: #96D3FE;}}}
}@keyframes anim {0% {transform: translateY(-0%);}100% {transform: translateY(-100%);}
}
