react
import React from 'react'
import styles from './TextRunning.less'
import {
NotificationOutlined
} from '@ant-design/icons';
import {Modal} from "antd";
const TextRunning = (props)=>{
const [textArr,setTextArr] = React.useState([
{
title:'1.1111111111111111'
},
{
title:'2222222222222222222222'
}
]);
const [isNewsDetailsShow,setIsNewsDetailsShow] = React.useState(false);
return(
<div className={styles.TextRunning}>
{/*<div className={styles.myMarquee} style={{width:props.collapsed ? `calc( 100vw - 70px - 300px )`:`calc( 100vw - 190px - 300px )`}}>*/}
{/*<div className={styles.myMarquee} style={{width:'35vw'}}>*/}
<div className={styles.myMarquee} style={{width:'50vw'}}>
<span><NotificationOutlined /></span>
<div className={styles.myMarqueeLay}>
<div className={styles.myMarqueeWrap}>
<div className={styles.myMarqueeContent}>
{
textArr.map((a,b)=>(<span key={b} onClick={()=>{setIsNewsDetailsShow(true)}}>{a.title}</span>))
}
{/*<span className={styles.myMarqueeItem} onClick={()=>{}}>1.关于人员岗位变动后,找不到申请单的解决办法</span>*/}
{/*<span className={styles.myMarqueeItem} onClick={()=>{}}><NotificationOutlined/>2.关于人员岗位变动后,找不到申请单的解决办法123</span>*/}
</div>
</div>
</div>
</div>
<Modal
title="公示详情"
visible={isNewsDetailsShow}
onOk={()=>{}}
onCancel={()=>{setIsNewsDetailsShow(false)}}
footer={null}
>
<div className={'newsDetailsHtml'}>
<div dangerouslySetInnerHTML={{__html:` <p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>`}} >
</div>
</div>
</Modal>
</div>
)
}
export default TextRunning
.TextRunning{
/* 跑马灯样式--开始 */
display: inline-block;
.myMarquee {
display: flex;
align-items: center;
//width: calc( 100vh - 200px );
//background-color: #f00;
.myMarqueeLay {
position: relative;
width: 100%;
height: 40px;
margin: 0 8px;
overflow: hidden;
line-height: 40px;
//background: rgba(255, 255, 255, .6);
}
.myMarqueeWrap {
width: 100%;
height: 100%;
animation: cssmarqueeWrapper 30s linear infinite;
&:hover {
cursor: pointer;
animation-play-state: paused;
}
}
.myMarqueeContent {
position: absolute;
top: 0;
left: 0;
height: 100%;
margin: 0;
font-size: 12px;
white-space: nowrap;
text-align: left;
//background: rgba(255, 255, 255, .6);
transform: translateX(0);
animation: cssmarquee 30s linear infinite;
.myMarqueeItem {
margin-right: 12px;
}
&:hover {
cursor: pointer;
animation-play-state: paused;
}
}
@keyframes cssmarqueeWrapper {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes cssmarquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
}
/* 跑马灯样式---结束 */
}