feat: notice

src/App.tsx

@@ -73,7 +73,7 @@ function App() {
   }, [state, currentScene, handleScene]);
 
   const goToScene = (m: string) => {
-    window.location.href = `https://houseoss.4dkankan.com/project/ZHCHXS/scene/index.html#/?m=${m}&showBack=1`;
+    window.location.href = `https://houseoss.4dkankan.com/project/ZHCHXS/scene/index.html#/?m=${m}&showBack=1&t=${new Date().getTime()}`;
   };
 
   const handleHotspotClick = (item: any) => {

src/pages/home/index.scss

@@ -21,4 +21,49 @@
       opacity: 1;
     }
   }
+
+  .notice {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    color: white;
+    background: rgba(36, 52, 114, 0.9);
+    z-index: 3;
+
+    &__content {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      position: relative;
+      width: 1300px;
+      margin: 0 auto;
+
+      > span {
+        font-weight: bold;
+      }
+      div {
+        flex: 1;
+        width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+
+        p {
+          width: fit-content;
+          font-size: 14px;
+          transition-timing-function: linear;
+        }
+      }
+      i {
+        cursor: pointer;
+      }
+      &__close {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+      }
+    }
+  }
 }

src/pages/home/index.tsx

@@ -1,10 +1,69 @@
-import { FC } from "react";
+import { FC, useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router";
 import HoverImg from "./images/map-hover-min.png";
+import CloseIcon from "./images/close.png";
 import "./index.scss";
 
 const HomePage: FC = () => {
   const navigate = useNavigate();
+  const noticeBarRef = useRef<any>();
+  const contentRef = useRef<any>();
+  const time = useRef(0);
+  const timer = useRef<NodeJS.Timer>();
+  const [noticeVisible, setNoticeVisible] = useState(true);
+  const [contentWidth, setContentWidth] = useState(0);
+  const [contentStyle, setContentStyle] = useState({
+    transitionDuration: "0s",
+    transform: "translateX(0px)",
+  });
+
+  const startAnimate = useCallback(() => {
+    setContentStyle({
+      transitionDuration: "0s",
+      transform: `translateX(${noticeBarRef.current.offsetWidth}px)`,
+    });
+    setTimeout(() => {
+      setContentStyle({
+        transitionDuration: `${time.current}s`,
+        transform: `translateX(-${contentWidth}px)`,
+      });
+    }, 50);
+  }, [contentWidth]);
+
+  const openCycle = useCallback(
+    (width: number) => {
+      time.current = width / 70;
+      startAnimate();
+      timer.current = setInterval(() => {
+        startAnimate();
+      }, time.current * 1000);
+    },
+    [startAnimate]
+  );
+
+  const initNotice = useCallback(() => {
+    const barWidth = noticeBarRef.current.offsetWidth;
+    const contentWidth = contentRef.current.offsetWidth;
+    if (contentWidth >= barWidth) {
+      setContentWidth(contentWidth);
+      setNoticeVisible(true);
+      openCycle(contentWidth);
+    }
+  }, [noticeBarRef, contentRef, openCycle]);
+
+  const closeNotice = () => {
+    setNoticeVisible(false);
+    clearInterval(timer.current);
+    timer.current = undefined;
+  };
+
+  useEffect(() => {
+    initNotice();
+
+    return () => {
+      closeNotice();
+    };
+  }, []);
 
   return (
     <div className="home">
@@ -15,6 +74,25 @@ const HomePage: FC = () => {
         alt=""
         onClick={() => navigate("/scene")}
       />
+
+      {noticeVisible && (
+        <div className="notice">
+          <div className="notice__content">
+            <span>注：</span>
+            <div ref={noticeBarRef}>
+              <p ref={contentRef} style={contentStyle}>
+                本区位图仅对项目周边大致情况的效果进行展示，非实景图，也非严格意义的地图，不反映各部分之间的实际距离。本公司对区位图内容不提供任何承诺和保证，也不作为交付标准，最终均以政府部门核准的规划文件为准。
+              </p>
+            </div>
+            <img
+              alt=""
+              className="notice__content__close"
+              src={CloseIcon}
+              onClick={closeNotice}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };