fix

src/index.css

@@ -5,6 +5,10 @@
   background-size: 100% 100%;
   position: relative;
 }
+@font-face {
+  font-family: 'SourceHanSerifCN';
+  src: url('./assets/font/sy.otf') format('opentype');
+}
 body {
   /* width: 100%;
   height: 100%; */
@@ -13,4 +17,5 @@ body {
   padding: 0;
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
+  font-family: 'SourceHanSerifCN';
 }

src/page/home/iindex.tsx

@@ -8,20 +8,23 @@ const Home = () => {
     window.parent.postMessage('back', '*');
     console.log('传递了back');
   }
+
+  const handleStart = () => {
+    navigate('/question');
+  }
+  const handleRank = () => {
+    navigate('/rank');
+  }
   return (
     <div className={styles.home}>
       <div className="back" onClick={handleBack}><img src={require('../../assets/img/back.png')} alt="" /></div>
       <div className="title"><img src={require('../../assets/img/home_title.png')} alt="" /></div>
       <div className="content">
-        游戏规则：答对更多题目耗时更少的前五名 将在展览结束后赠送文创书签纪念品。
+        游戏规则：答对更多题目耗时更少的前五名<br />将在展览结束后赠送文创书签纪念品。
       </div>
       <div className="btn-group">
-        <div className="btn-start" onClick={() => {
-          navigate('/question');
-        }}>开始游戏</div>
-        <div className="btn-rank" onClick={() => {
-          navigate('/rank');
-        }}>查看排行榜</div>
+        <div className="btn-start" onClick={handleStart}>开始游戏</div>
+        <div className="btn-rank" onClick={handleRank}>查看排行榜</div>
       </div>
     </div>
   );

src/page/home/index.module.scss

@@ -30,7 +30,6 @@
       }
     }
     .content {
-      font-family: '宋体';
       width: 600px;
       height: 95px;
       display: flex;
@@ -47,7 +46,7 @@
     }
     .btn-group {
       width: 270px;
-      height: 180px;
+      height: 200px;
       position: absolute;
       top: 50%;
       left: 50%;
@@ -58,7 +57,6 @@
       justify-content: center;
       gap: 35px;
       .btn-start, .btn-rank {
-        font-family: 'STKaiti-Regular';
         width: 100%;
         height: 80px;
         display: flex;
@@ -70,7 +68,7 @@
         color: #fff;
         font-weight: bold;
         text-align: center;
-        line-height: 180px;
+        line-height: 80px;
         cursor: pointer;
       }
     }

src/page/question/components/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import styles from "./index.module.scss";
 import { useNavigate } from "react-router-dom";
 import { getRankList, RankItem, RankDescItem, saveScore } from "../../../utils/API";
@@ -64,13 +64,15 @@ const Result = ({ timeLeft, rightCount }: ResultProps) => {
       const rankDescResult = getRankDesc(res.data.data, rightCount, 180 - timeLeft)
       setRankDesc(rankDescResult)
     })
-  }, [])
+  }, [rightCount, timeLeft])
+
+  const currentRank = useMemo(() => rankDesc.find(item => item.isCurrentUser)?.rank || 0, [rankDesc])
   return (
     <div className={styles.infomation}>
       <div className="title">恭喜您！
       </div>
       <div className="content">
-        恭喜您！ 共答对 <span>{rightCount}</span> 道题，耗时 <span>{exhausetime}</span> 秒。当前排名第<span>{rankDesc.find(item => item.isCurrentUser)?.rank}</span>
+        共答对 <span>{rightCount}</span> 道题，耗时 <span>{exhausetime}</span> 秒。{currentRank > 10 ? "当前排名第" + currentRank + "名" : "恭喜您进入当前答题排行榜前十名！"}
       </div>
       <div className="from">
         <input value={nickname} onChange={(e) => setNickname(e.target.value)} onBlur={handleInputChange} type="text" placeholder="请输入昵称，不超过5个字" />

src/page/rank/index.module.scss

@@ -23,7 +23,7 @@
         width: 80%;
         height: 73%;
         display: flex;
-        justify-content: flex-start;
+
         align-items: center;
         overflow: auto;
         scrollbar-width: none;
@@ -117,15 +117,11 @@
           }
         }
       } 
-      .left {
-        width: 5%;
-        height: 8%;
-        object-fit: contain;
-      }
-      .right {
+      .left, .right {
         width: 5%;
         height: 8%;
         object-fit: contain;
+        cursor: pointer;
       }
     }
     .btn-group {

src/page/rank/index.tsx

@@ -37,39 +37,40 @@ const Rank = () => {
       setCurrentUser(res.data.data.find((item: RankItem) => item.id === res.data.data.length)!.id);
     });
     // 一开始就滚到当前用户
-    const container = document.querySelector(".rank-item-active");
-    if (container) {
-      container.scrollIntoView({ behavior: "smooth", inline: "start" });
-    }
+
+    setTimeout(() => {
+      console.log(document.querySelector(".rank-item-active"));
+      const container = document.querySelector(".rank-item-active");
+      if (container) {
+        console.log(container);
+        container.scrollIntoView({ behavior: "smooth", inline: "end", block: "nearest" });
+      }
+    }, 200);
+
+    containerRef.current = document.querySelector(".container")!;
   }, []);
 
   // 滚轮让x轴滚动
   const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
     if (containerRef.current) {
-      containerRef.current.scrollTo({
-        left: containerRef.current.scrollLeft + event.deltaY,
-        behavior: "smooth",
-      });
+      containerRef.current.scrollLeft = containerRef.current.scrollLeft + event.deltaY;
     }
   };
 
   // 移动端触摸滚动
-  let startX: number;
+  const [startX, setStartX] = useState<number>(0);
 
   const touchStart = (event: React.TouchEvent<HTMLDivElement>) => {
     if (containerRef.current) {
-      startX = event.touches[0].clientX; // 记录触摸开始的X坐标
+      setStartX(event.touches[0].clientX); // 记录触摸开始的X坐标
     }
   };
 
   const touchMove = (event: React.TouchEvent<HTMLDivElement>) => {
     if (containerRef.current) {
       const moveX = event.touches[0].clientX - startX;
-      containerRef.current.scrollTo({
-        left: containerRef.current.scrollLeft - moveX,
-        behavior: "smooth",
-      });
-      startX = event.touches[0].clientX;
+      containerRef.current.scrollLeft = containerRef.current.scrollLeft - moveX;
+      setStartX(event.touches[0].clientX);
     }
   };
 
@@ -80,7 +81,7 @@ const Rank = () => {
       if (containerRef.current) {
         const target = containerRef.current.querySelector(".rank-item-active");
         if (target) {
-          target.scrollIntoView({ behavior: "smooth", inline: "end" });
+          target.scrollIntoView({ behavior: "smooth", inline: "end", block: "nearest" });
         }
       }
     }
@@ -92,7 +93,7 @@ const Rank = () => {
       if (containerRef.current) {
         const target = containerRef.current.querySelector(".rank-item-active");
         if (target) {
-          target.scrollIntoView({ behavior: "smooth", inline: "start" });
+          target.scrollIntoView({ behavior: "smooth", inline: "start", block: "nearest" });
         }
       }
     }
@@ -103,7 +104,7 @@ const Rank = () => {
       <img className="title" src={require("../../assets/img/rank_title.png")} alt="rank_title" />
       <div className="content">
         <img className="left" onClick={handleLeft} src={require("../../assets/img/rank_left.png")} alt="rank_left" />
-        <div className="container" onWheel={handleWheel} onTouchStart={touchStart} onTouchMove={touchMove} >
+        <div className="container" onWheel={handleWheel}>
           <div className="container-item">
             {rankList.map((item, index) => (
               <div className={`rank-item ${item.id === currentUser ? "rank-item-active" : ""}`} key={index} >