diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/icon_camera.png b/code/VideoAccess-VCMP/web/client/assets/images/background/icon_camera.png index 4464f9f..bcdf530 100644 Binary files a/code/VideoAccess-VCMP/web/client/assets/images/background/icon_camera.png and b/code/VideoAccess-VCMP/web/client/assets/images/background/icon_camera.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/icon_email.png b/code/VideoAccess-VCMP/web/client/assets/images/background/icon_email.png index 184799f..7cc0dbe 100644 Binary files a/code/VideoAccess-VCMP/web/client/assets/images/background/icon_email.png and b/code/VideoAccess-VCMP/web/client/assets/images/background/icon_email.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/icon_phone.png b/code/VideoAccess-VCMP/web/client/assets/images/background/icon_phone.png index 770340a..672c334 100644 Binary files a/code/VideoAccess-VCMP/web/client/assets/images/background/icon_phone.png and b/code/VideoAccess-VCMP/web/client/assets/images/background/icon_phone.png differ diff --git a/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx b/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx index 2a4d2af..2055c63 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx @@ -3,77 +3,80 @@ import moment from 'moment' import './textScroll.less' function TextScroll (props) { - const { content, duration,roll } = props - const [showContent, setShowContent] = useState('') - const showIndex = useRef(0) - const initialization = useRef(false) - const cancel = useRef(false) - useEffect(() => { - if (content.length) { - if(roll){ - let contentParent = document.getElementById('marquee_box') - document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' - const contentP = document.getElementById('contentP') - contentP.style.visibility = 'visible' - setShowContent(content[0]) - window.cancelAnimationFrame(cancel.current) - contentParent.scrollLeft = 0 - initialization.current=false - showIndex.current = 0 - } - else{ - let repeatTime = moment() - let refreshTime = moment() - const scroll = () => { - let contentParent = document.getElementById('marquee_box') - document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' - //初始化 - // if(!showContent&&!initialization.current){ - if(!initialization.current){ + const { content, duration, roll } = props + console.log(content, roll); + const [showContent, setShowContent] = useState('') + const showIndex = useRef(0) + const initialization = useRef(false) + const cancel = useRef(false) + useEffect(() => { + if (content.length) { + if (roll) { + let contentParent = document.getElementById('marquee_box') + console.log(document.getElementById('contentPMakeUp')); + document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' const contentP = document.getElementById('contentP') - contentParent.scrollLeft = 0 - setShowContent(content[showIndex.current]) - showIndex.current = (showIndex.current + 1) % content.length contentP.style.visibility = 'visible' - initialization.current=true + setShowContent(content[0]) + window.cancelAnimationFrame(cancel.current) + contentParent.scrollLeft = 0 + initialization.current = false + showIndex.current = 0 + } + else { + let repeatTime = moment() + let refreshTime = moment() + const scroll = () => { + let contentParent = document.getElementById('marquee_box') + console.log(document.getElementById('contentPMakeUp')); + document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' + //初始化 + // if(!showContent&&!initialization.current){ + if (!initialization.current) { + const contentP = document.getElementById('contentP') + contentParent.scrollLeft = 0 + setShowContent(content[showIndex.current]) + showIndex.current = (showIndex.current + 1) % content.length + contentP.style.visibility = 'visible' + initialization.current = true + } + // 控制频率 + if (moment().diff(refreshTime) > 1000 / 60) { + const contentP = document.getElementById('contentP') + // 静态等待时间 + if (moment().diff(repeatTime) > 1000 * 1.5) { + contentP.style.visibility = 'visible' + } + // 滚动 + if (moment().diff(repeatTime) > 1000 * 3) { + contentParent.scrollLeft = contentParent.scrollLeft + 1 + } + // 滚完 重置 + if (contentParent.scrollLeft >= contentP.clientWidth + 24) { + contentParent.scrollLeft = 0 + repeatTime = moment() + setShowContent(content[showIndex.current]) + showIndex.current = (showIndex.current + 1) % content.length + contentP.style.visibility = 'hidden' + } + refreshTime = moment() + } + let text = null + text = window.requestAnimationFrame(scroll) + cancel.current = text } - // 控制频率 - if (moment().diff(refreshTime) > 1000 / 60) { - const contentP = document.getElementById('contentP') - // 静态等待时间 - if (moment().diff(repeatTime) > 1000 * 1.5) { - contentP.style.visibility = 'visible' - } - // 滚动 - if (moment().diff(repeatTime) > 1000 * 3) { - contentParent.scrollLeft = contentParent.scrollLeft + 1 - } - // 滚完 重置 - if (contentParent.scrollLeft >= contentP.clientWidth + 24) { - contentParent.scrollLeft = 0 - repeatTime = moment() - setShowContent(content[showIndex.current]) - showIndex.current = (showIndex.current + 1) % content.length - contentP.style.visibility = 'hidden' - } - refreshTime = moment() + window.requestAnimationFrame(scroll) } - let text = null - text=window.requestAnimationFrame(scroll) - cancel.current=text - } - window.requestAnimationFrame(scroll) } - } - }, [content,roll]) - return ( -
-
{showContent}
- - -