lanxin 3 月之前
父节点
当前提交
b7e1a32dc2

文件差异内容过多而无法显示
+ 58 - 0
src/assets/img/rank-btn.svg


文件差异内容过多而无法显示
+ 3 - 0
src/assets/img/rule-info.svg


文件差异内容过多而无法显示
+ 58 - 0
src/assets/img/start-btn.svg


+ 5 - 3
src/page/home/iindex.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import styles from "./index.module.scss";
 import { useNavigate } from "react-router-dom";
+import StartImg from "../../assets/img/start-btn.svg"
+import RankImg from "../../assets/img/rank-btn.svg"
 
 const Home = () => {
   const navigate = useNavigate();
@@ -21,11 +23,11 @@ const 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 />将在展览结束后赠送文创书签纪念品。
+        {/* 游戏规则:答对更多题目耗时更少的前五名<br />将在展览结束后赠送文创书签纪念品。 */}
       </div>
       <div className="btn-group">
-        <div className="btn-start" onClick={handleStart}>开始游戏</div>
-        <div className="btn-rank" onClick={handleRank}>查看排行榜</div>
+        <img className="btn-start" src={StartImg} alt="开始游戏" onClick={handleStart} />
+        <img className="btn-rank" src={RankImg} alt="查看排行榜" onClick={handleRank} />
       </div>
     </div>
   );

+ 4 - 12
src/page/home/index.module.scss

@@ -30,8 +30,9 @@
       }
     }
     .content {
-      width: 600px;
-      height: 95px;
+      margin-top: 20px;
+      width: 752px;
+      height: 98px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -43,6 +44,7 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -120px);
+      background: url('../../assets/img/rule-info.svg') no-repeat center / contain;
     }
     .btn-group {
       width: 270px;
@@ -59,16 +61,6 @@
       .btn-start, .btn-rank {
         width: 100%;
         height: 80px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: url('../../assets/img/button_bg.png') no-repeat center center;
-        background-size: 100% 100%;
-        font-size: 38px;
-        color: #fff;
-        font-weight: bold;
-        text-align: center;
-        line-height: 80px;
         cursor: pointer;
       }
     }

+ 9 - 1
src/page/question/components/index.tsx

@@ -48,6 +48,14 @@ const Result = ({ timeLeft, rightCount }: ResultProps) => {
 
   const handleRank = () => {
     if (!isShowTips) {
+      const meRank = rankDesc.find(i => i.phone === phone)
+
+      // 自己在榜,优先判断分数,再到时间
+      if (meRank && (meRank.score > rightCount * 10 && meRank.time < exhausetime)) {
+        navigate("/rank", { state: { noRank: true } })
+        return
+      }
+
       saveScore({
         name: nickname,
         phone: phone,
@@ -78,7 +86,7 @@ const Result = ({ timeLeft, rightCount }: ResultProps) => {
       <div className="title">恭喜您!
       </div>
       <div className="content">
-        共答对 <span>{rightCount}</span> 道题,耗时 <span>{exhausetime}</span> 秒。{isShowRank ? "未进入排行榜" : "恭喜您进入当前答题排行榜前十名!"}
+        共答对 <span>{rightCount}</span> 道题,耗时 <span>{exhausetime}</span> 秒。{isShowRank ? "很遗憾您未进入排行榜" : "恭喜您进入当前答题排行榜前十名!"}
       </div>
       <div className="from" style={{ display: isShowRank ? "none" : "flex" }}>
         <input value={nickname} onChange={(e) => setNickname(e.target.value)} onBlur={handleInputChange} type="text" placeholder="请输入昵称,不超过5个字" />

+ 1 - 0
src/utils/API.ts

@@ -17,6 +17,7 @@ export interface RankDescItem {
   score: number;
   time: number;
   rank: number;
+  phone?: string;
   isCurrentUser?: boolean;
 }