首页新闻滚动

2026-06-10 08:45:09 +08:00 · 2026-06-10 08:45:09 +08:00 · 822af87855
parent 7441f4de7b
commit 822af87855
2 changed files with 105 additions and 38 deletions
--- a/src/forge/Information/Pages/homepage/component/newsByNSCC.jsx
+++ b/src/forge/Information/Pages/homepage/component/newsByNSCC.jsx
@ -19,6 +19,11 @@ function News(props) {
  const [activeDirId, setActiveDirId] = useState(undefined);
  const [total, setTotal] = useState(0);
  const newsSectionRef = useRef(null);
+  const topBoxRef = useRef(null);
+  const [hasAppended, setHasAppended] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const scrollIndexRef = useRef(0);
+  const scrollTimerRef = useRef(null);

  useEffect(() => {
    let hasAnimated = false; // 标记动画是否已触发
@ -61,7 +66,7 @@ function News(props) {
          setDocListByFirstDir(data)
        })
        
-        getPointsDoc(rows[1].id);
+        getPointsDoc();
      }
    })
  }, [id])
@ -72,8 +77,82 @@ function News(props) {
    }, (data)=>{setTotal(data)})
  }, [activeDirId])

-  async function getPointsDoc(rowId) {
-    let res = await 
+  // 监控topBox高度，当高度>593时复制docListBySecondDir追加到自身
+  useEffect(() => {
+    if (!topBoxRef.current || !docListBySecondDir.length) return;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const height = entry.contentRect.height;
+        if (height > 593 && !hasAppended) {
+          setDocListBySecondDir(prev => [...prev, ...docListBySecondDir]);
+          setHasAppended(true);
+          // 滚动动画由hasAppended变化触发的useEffect自动启动
+        }
+      }
+    });
+
+    observer.observe(topBoxRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [docListBySecondDir, hasAppended])
+
+  // 滚动动画：每隔3秒将下一个docBySecondDir_NSCC元素滚动到topBox顶部
+  useEffect(() => {
+    if (!hasAppended || !topBoxRef.current) return;
+
+    const topBox = topBoxRef.current;
+    scrollIndexRef.current = 0;
+    // 给topBox添加transition实现平滑动画
+    topBox.style.transition = 'transform 0.5s linear';
+
+    scrollTimerRef.current = setInterval(() => {
+      const items = topBox.querySelectorAll('.docBySecondDir_NSCC');
+      if (!items.length) return;
+
+      const targetIndex = scrollIndexRef.current % items.length;
+
+      // 计算目标元素之前所有元素的总高度（含margin），作为translateY偏移量
+      let offset = 0;
+      for (let i = 0; i < targetIndex; i++) {
+        offset += items[i].offsetHeight;
+        const styles = window.getComputedStyle(items[i]);
+        offset += parseFloat(styles.marginBottom) || 0;
+      }
+      topBox.style.transform = `translateY(-${offset}px)`;
+
+      // 滚动到第一个复制元素时，等待动画完成后瞬间重置offset为0，实现无缝循环
+      if (targetIndex === docListBySecondDir.length / 2) {
+        setActiveIndex((targetIndex + 1) % (docListBySecondDir.length / 2));
+        setTimeout(() => {
+          topBox.style.transition = 'none';
+          topBox.style.transform = 'translateY(0)';
+          void topBox.offsetWidth;
+          topBox.style.transition = 'transform 0.5s linear';
+          setActiveIndex(1);
+        }, 500);
+        scrollIndexRef.current = 0;
+      } else {
+        setActiveIndex((targetIndex + 1) % (docListBySecondDir.length / 2));
+      }
+
+      scrollIndexRef.current++;
+    }, 3000);
+
+    return () => {
+      if (scrollTimerRef.current) {
+        clearInterval(scrollTimerRef.current);
+        scrollTimerRef.current = null;
+      }
+      // 清理时恢复topBox样式
+      topBox.style.transition = '';
+      topBox.style.transform = '';
+    };
+  }, [hasAppended])
+
+  function getPointsDoc() {
    getPointsDocList(id).then(result=>{
      let docList = [];
      if(result && Array.isArray(result.data.data) && result.data.data.length){
@ -85,7 +164,6 @@ function News(props) {
          return item;
        });
      }
-
      setDocListBySecondDir(docList);
    });
  }
@ -132,18 +210,28 @@ function News(props) {
        {secondDir && <div className='secondDir_NSCC flex1 ml30'>
          {/* <Divider type="vertical" style={{width: '3px', height: '17px', backgroundColor: "#466aff", marginBottom: '5px'}}/> */}
          {/* <Link to={`/zone/${key}/news/${secondDir.id}`} onClick={()=>{window.scrollTo(0,450)}} className="font-18 font-bd">{secondDir.name}</Link> */}
-          {docListBySecondDir.map(item=>{
-            return <div className='docBySecondDir_NSCC '>
-              <p className='font-16 font-bd task-hide'>
-                <Link to={`/zone/${key}/newdetail/${item.id}`} onClick={()=>{window.scrollTo(0,450)}}>{item.name}</Link>
-              </p>
-              <div className='color5d6 font-14 mt5 mb12 task-hide-2'>
-                {item.summary}
+
+          <div style={{
+            overflow: 'hidden',
+            height: '593px',
+            WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 60px, black calc(100% - 60px), transparent 100%)',
+            maskImage: 'linear-gradient(to bottom, transparent 0%, black 60px, black calc(100% - 60px), transparent 100%)'
+          }}>
+            <div className='topBox' ref={topBoxRef}>
+            {docListBySecondDir.map((item, index)=>{
+              return <div className={`docBySecondDir_NSCC ${index % (docListBySecondDir.length / 2) === activeIndex ? 'active' : ''}`}>
+                <p className='font-16 font-bd task-hide'>
+                  <Link to={`/zone/${key}/newdetail/${item.id}`} onClick={()=>{window.scrollTo(0,450)}}>{item.name}</Link>
+                </p>
+                <div className='color5d6 font-14 mt5 mb12 task-hide-2'>
+                  {item.summary}
+                </div>
+                <Link to={`/zone/${key}/newdetail/${item.id}`} className="font-14">查看详情<i className='iconfont icon-jiantou21 font-12 ml5'></i></Link>
              </div>
-              <Link to={`/zone/${key}/newdetail/${item.id}`} className="font-14">查看详情<i className='iconfont icon-jiantou21 font-12 ml5'></i></Link>
+            })}
            </div>
-          })}
-          {docListBySecondDir && !docListBySecondDir.length && <div style={{margin: '0 auto', maxHeight: '230px'}}><Nodata small _html="暂无数据"/></div>}
+            {docListBySecondDir && !docListBySecondDir.length && <div style={{margin: '0 auto', maxHeight: '230px'}}><Nodata small _html="暂无数据"/></div>}
+          </div>
        </div>}
      </div>
    </div>
--- a/src/forge/Information/Pages/homepage/index.scss
+++ b/src/forge/Information/Pages/homepage/index.scss
@ -895,30 +895,9 @@
    background-blend-mode: multiply;
    padding: 30px 25px;
    max-height:653px;
-    overflow-y: auto;
-    position: relative;
    overflow: hidden;
-    backdrop-filter: blur(12px);
-    &::before{
-      content: '';
-      position: absolute;
-      left: 0; right: 0;
-      height: 60px;
-      z-index: 3;
-      pointer-events: none;
-      top: 0;
-      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
-    }
-    &::after{
-      content: '';
-      position: absolute;
-      left: 0; right: 0;
-      height: 60px;
-      z-index: 3;
-      pointer-events: none;
-      bottom: 0;
-      background: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent);
-    }
+  }
+  .topBox{
  }
  .docBySecondDir_NSCC{
    cursor: pointer;
@ -934,7 +913,7 @@
    a.font-14{
      color: $primary-color;
    }
-    &:hover{
+    &:hover, &.active{
      background-image: url('./image/bkImg7.png');
      background-size: 100% 100%;
      div, a, p{