Merge branch 'master' of http://gitlab2.dui88.com/sparkprojects/KWW-520NumberGuessingGame-20250409

mock/project/main.js

@@ -8,34 +8,100 @@ module.exports = {
           "rankInfo": [
             {
               "index": 1,
-              "meFlag": "路人甲",
+              "userName": "路人甲",
               "score": 100,
-              "userName": "false"
+              "meFlag": "false"
             },
             {
               "index": 2,
-              "meFlag": "路人乙",
+              "userName": "路人乙",
               "score": 200,
-              "userName": "false"
+              "meFlag": "false"
             },
             {
               "index": 3,
-              "meFlag": "路人丙",
-              "score": 300,
-              "userName": "false"
+              "userName": "路人丙",
+              "score": 30000,
+              "meFlag": "false"
             },
             {
               "index": 4,
-              "meFlag": "小明",
-              "score": 400,
-              "userName": "true"
+              "userName": "小明",
+              "score": 400000,
+              "meFlag": "true"
             },
             {
               "index": 5,
-              "meFlag": "路人丁",
+              "userName": "路人丁",
+              "score": 300,
+              "meFlag": "false"
+            },
+            {
+              "index": 6,
+              "userName": "路人丁",
+              "score": 300,
+              "meFlag": "false"
+            },
+            {
+              "index": 7,
+              "userName": "路人丁",
+              "score": 300,
+              "meFlag": "false"
+            },
+            {
+              "index": 8,
+              "userName": "路人丁",
+              "score": 300,
+              "meFlag": "false"
+            },
+            {
+              "index": 9,
+              "userName": "路人丁",
               "score": 300,
-              "userName": "false"
-            }
+              "meFlag": "false"
+            },
+            {
+              "index": 10,
+              "userName": "路人丁",
+              "score": 300,
+              "meFlag": "false"
+            },
+            {
+              "index": 11,
+              "userName": "路人丁",
+              "score": 300,
+              "meFlag": "false"
+            },
+            {
+              "index": 12,
+              "userName": "路人丁",
+              "score": 300,
+              "meFlag": "false"
+            },
+            {
+              "index": 13,
+              "userName": "路人丁",
+              "score": 300,
+              "meFlag": "false"
+            },
+            {
+              "index": 14,
+              "userName": "路人丁",
+              "score": 300,
+              "meFlag": "false"
+            },
+            {
+              "index": 15,
+              "userName": "路人丁",
+              "score": 300,
+              "meFlag": "false"
+            },
+            {
+              "index": 100,
+              "userName": "路人丁",
+              "score": 300,
+              "meFlag": "false"
+            },
           ],
           "myRank": {
             "index": 4,
@@ -56,7 +122,7 @@ module.exports = {
               "id": 1,
               "changedType": "+",
               "quantity": 100,
-              "extra": "dolore consectetur",
+              "extra": "完成100分获得青果",
               "createTimestamp": -10558650.718847722,
               "playwayId": "nulla eiusmod deserunt anim",
               "actionId": "labore anim aliqua ad velit"
@@ -64,8 +130,8 @@ module.exports = {
             {
               "id": 2,
               "changedType": "+",
-              "quantity": 100,
-              "extra": "quis aute occaecat irure",
+              "quantity": 10000,
+              "extra": "完成10000分获得青果",
               "createTimestamp": 37304141.000525266,
               "playwayId": "minim nisi velit commodo nulla",
               "actionId": "voluptate elit magna dolor qui"
@@ -73,8 +139,8 @@ module.exports = {
             {
               "id": 3,
               "changedType": "+",
-              "quantity": 100,
-              "extra": "velit ex consequat",
+              "quantity": 100000,
+              "extra": "完成100000分获得青果",
               "createTimestamp": 79460372.33933905,
               "playwayId": "reprehenderit consectetur",
               "actionId": "exercitation veniam tempor magna"
@@ -83,22 +149,103 @@ module.exports = {
               "id": 4,
               "changedType": "+",
               "quantity": 200,
-              "extra": "dolor elit Excepteur fugiat amet",
+              "extra": "完成200分获得青果",
               "createTimestamp": -74285506.14657179,
               "playwayId": "elit id qui labore non",
               "actionId": "Excepteur consectetur"
             },
             {
               "id": 5,
-              "changedType": "-",
+              "changedType": "+",
               "quantity": 100,
-              "extra": "magna exercitation",
+              "extra": "完成100分获得青果",
               "createTimestamp": 84285291.15363145,
               "playwayId": "id ut",
               "actionId": "sed ex enim Duis"
-            }
+            },
+            {
+              "id": 6,
+              "changedType": "+",
+              "quantity": 100,
+              "extra": "完成100分获得青果",
+              "createTimestamp": 84285291.15363145,
+              "playwayId": "id ut",
+              "actionId": "sed ex enim Duis"
+            },
+            {
+              "id":7,
+              "changedType": "+",
+              "quantity": 100,
+              "extra": "完成100分获得青果",
+              "createTimestamp": 84285291.15363145,
+              "playwayId": "id ut",
+              "actionId": "sed ex enim Duis"
+            },
+            {
+              "id": 8,
+              "changedType": "+",
+              "quantity": 100,
+              "extra": "完成100分获得青果",
+              "createTimestamp": 84285291.15363145,
+              "playwayId": "id ut",
+              "actionId": "sed ex enim Duis"
+            },
+            {
+              "id": 9,
+              "changedType": "+",
+              "quantity": 100,
+              "extra": "完成100分获得青果",
+              "createTimestamp": 84285291.15363145,
+              "playwayId": "id ut",
+              "actionId": "sed ex enim Duis"
+            },
+            {
+              "id": 10,
+              "changedType": "+",
+              "quantity": 100,
+              "extra": "完成100分获得青果",
+              "createTimestamp": 84285291.15363145,
+              "playwayId": "id ut",
+              "actionId": "sed ex enim Duis"
+            },
+            {
+              "id": 11,
+              "changedType": "+",
+              "quantity": 200,
+              "extra": "完成200分获得青果",
+              "createTimestamp": -74285506.14657179,
+              "playwayId": "elit id qui labore non",
+              "actionId": "Excepteur consectetur"
+            },
+            {
+              "id": 12,
+              "changedType": "+",
+              "quantity": 200,
+              "extra": "完成200分获得青果",
+              "createTimestamp": -74285506.14657179,
+              "playwayId": "elit id qui labore non",
+              "actionId": "Excepteur consectetur"
+            },
+            {
+              "id": 13,
+              "changedType": "+",
+              "quantity": 200,
+              "extra": "完成200分获得青果",
+              "createTimestamp": -74285506.14657179,
+              "playwayId": "elit id qui labore non",
+              "actionId": "Excepteur consectetur"
+            },
+            {
+              "id": 14,
+              "changedType": "+",
+              "quantity": 9000,
+              "extra": "完成9000分获得青果",
+              "createTimestamp": -74285506.14657179,
+              "playwayId": "elit id qui labore non",
+              "actionId": "Excepteur consectetur"
+            },
           ],
-          "haveMore": true
+          "haveMore": false
         },
         "timeStamp": -87748265.39137948
       }

src/assetList.json

-{"preLoadImg":[],"asyncLoadImg":["detailPage/back.png","detailPage/bg.png","detailPage/border.png","detailPage/headline.png","detailPage/line.png","detailPage/l_bg.png","failPop/bg.png","failPop/close.png","failPop/endbtn.png","failPop/goonbtn.png","homePahe/bardown.png","homePahe/baron.png","homePahe/bg.png","homePahe/box1.png","homePahe/box2.png","homePahe/box3.png","homePahe/box4.png","homePahe/close1.png","homePahe/close2.png","homePahe/close3.png","homePahe/close4.png","homePahe/detail.png","homePahe/gameBarbg.png","homePahe/infobg.png","homePahe/open1.png","homePahe/open2.png","homePahe/open3.png","homePahe/open4.png","homePahe/prizebg.png","homePahe/rank.png","homePahe/rule.png","homePahe/show.png","homePahe/startBtn.png","homePahe/title.png","loading/bardown.png","loading/baron.png","loading/bg.png","loading/ip.png","loading/title.png","LoadingPage/loadingBg.jpg","LoadingPage/loadingFill.png","LoadingPage/loadingIp.png","rankPage/back.png","rankPage/bg.png","rankPage/border.png","rankPage/headnline.png","rankPage/line.png","rankPage/l_bg.png","rankPage/ownbg.png","rulePop/bg.png","rulePop/close.png","successPop/bar.png","successPop/barbg.png","successPop/bg.png","successPop/btn.png","successPop/close.png"]}
\ No newline at end of file
+{"preLoadImg":[],"asyncLoadImg":["LoadingPage/loadingBg.jpg","LoadingPage/loadingFill.png","LoadingPage/loadingIp.png","detailPage/back.png","detailPage/bg.png","detailPage/border.png","detailPage/headline.png","detailPage/l_bg.png","detailPage/line.png","failPop/bg.png","failPop/close.png","failPop/endbtn.png","failPop/goonbtn.png","homePahe/bardown.png","homePahe/baron.png","homePahe/bg.png","homePahe/box1.png","homePahe/box2.png","homePahe/box3.png","homePahe/box4.png","homePahe/close1.png","homePahe/close2.png","homePahe/close3.png","homePahe/close4.png","homePahe/detail.png","homePahe/gameBarbg.png","homePahe/infobg.png","homePahe/open1.png","homePahe/open2.png","homePahe/open3.png","homePahe/open4.png","homePahe/prizebg.png","homePahe/rank.png","homePahe/rule.png","homePahe/show.png","homePahe/startBtn.png","homePahe/title.png","loading/bardown.png","loading/baron.png","loading/bg.png","loading/ip.png","loading/title.png","rankPage/back.png","rankPage/bg.png","rankPage/border.png","rankPage/headnline.png","rankPage/l_bg.png","rankPage/line.png","rankPage/ownbg.png","rulePop/bg.png","rulePop/close.png","successPop/bar.png","successPop/barbg.png","successPop/bg.png","successPop/btn.png","successPop/close.png"]}
\ No newline at end of file

src/pages/detailpage/detailpage.jsx

@@ -15,49 +15,76 @@ class Detailpage extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      detailInfo: {}
+      logList: [],        // 列表数据
+      isSearching: false // 是否在请求列表中
     }
+    this.pageNum = 1; // 页码
+    this.pageSize = 10; // 每页条数
+    this.isLoadedAll = false; // 是否加载完所有数据
   }
 
   componentDidMount() {
     this.getDetail();
   }
 
-  // 明细
-  getDetail = async() => {
-    const { success, data } = await API.getQGDetails();
+  // 明细 获取列表数据
+  getDetail = async () => {
+    if (this.state.isSearching) return;
+    if (this.isLoadedAll) return;
+    this.setState({ isSearching: true })
+    const params = {
+      pageNum: this.pageNum, // 页数，默认1
+      pageSize: this.pageSize, // 查询数量，默认10
+    }
+
+    const { success, data } = await API.getQGDetails(params);
     if (success) {
+      const _list = this.state.logList.concat(data?.list || [])
       this.setState({
-        detailInfo: data || {}
-      })
+        isSearching: false,
+        logList: _list,
+      });
+      this.isLoadedAll = !data?.haveMore
+      this.pageNum++;
     }
   }
 
+  // 监听滚动事件
+  handScroll = (e) => {
+    if (
+      e.target.scrollTop + e.target.clientHeight + 10 >=
+      e.target.scrollHeight
+    ) {
+      this.getDetail();
+    }
+  };
+
+
   back = _asyncThrottle(() => {
     store.changePage(PAGE_MAP.HOME_PAGE)
   })
 
   render() {
-    const list = this.state.detailInfo.list || [];
+    const { logList } = this.state;
     return (
-      <div className="detailpage modal_center">
+      <div className="detailpage" onScroll={this.handScroll}>
         <span className="bg"></span>
         <Button className="back" onClick={this.back} />
         <div className="list">
-          <span className="border"></span>
-          <span className="l_bg"></span>
-          {Array.isArray(list) && list.length > 0 ? list.map((item, index) => {
-            const{ changedType, quantity, createTimestamp } = item;
-            return (
-              <div className="sample" key={index}>
-                <span className="name">完成{quantity}分获得青果</span>
-                <span className="time">{dateFormatter(createTimestamp, "yyyy-MM-dd")}</span>
-                <span className="receive">+1000000000</span>
-                <span className="line"></span>
-              </div>
-            )
-          }) : null}
-
+          <span className="listbg"></span>
+          <div className="l_bg">
+            {Array.isArray(logList) && logList.length > 0 ? logList.map((item, index) => {
+              const { changedType, quantity, extra, createTimestamp } = item;
+              return (
+                <div className="sample" key={index}>
+                  <span className="name">{extra}</span>
+                  <span className="time">{dateFormatter(createTimestamp, "yyyy-MM-dd")}</span>
+                  <span className="receive">{changedType}{quantity}</span>
+                  {index != logList.length - 1 && <span className="line"></span>}
+                </div>
+              )
+            }) : <span className="nodata">暂无数据</span>}
+          </div>
         </div>
         <span className="headline"></span>
       </div>

src/pages/detailpage/detailpage.less

 @import "../../res.less";
+
 .detailpage {
   width: 750px;
   height: 1624px;
   left: 0px;
   top: 0px;
   position: absolute;
+
   .bg {
     width: 750px;
     height: 1624px;
@@ -13,6 +15,7 @@
     position: absolute;
     .sparkBg("detailPage/bg.png");
   }
+
   .back {
     width: 94px;
     height: 49px;
@@ -21,13 +24,15 @@
     position: absolute;
     .sparkBg("detailPage/back.png");
   }
+
   .list {
     width: 724px;
     height: 1351px;
     left: 12px;
     top: 240px;
     position: absolute;
-    .border {
+
+    .listbg {
       width: 724px;
       height: 1351px;
       left: 0px;
@@ -35,71 +40,94 @@
       position: absolute;
       .sparkBg("detailPage/border.png");
     }
+
     .l_bg {
       width: 674px;
-      height: 1298px;
-      left: 24px;
-      top: 34px;
-      position: absolute;
-      .sparkBg("detailPage/l_bg.png");
-    }
-    .sample {
-      width: 623px;
-      height: 95px;
-      left: 51px;
-      top: 79px;
-      margin-top: 15px;
-      position: relative;
-      .name {
-        width: 460px;
-        height: 34px;
-        left: 3px;
-        top: 0px;
-        position: absolute;
-        font-size: 30px;
-        line-height: 30px;
-        color: rgba(255, 255, 255, 1);
-        .lineClamp1();
-      }
-      .time {
-        width: 360px;
-        height: 30px;
-        left: 4px;
-        top: 47px;
-        position: absolute;
-        font-size: 26px;
-        line-height: 26px;
-        color: rgba(183, 183, 183, 1);
-        .lineClamp1();
-      }
-      .receive {
-        width: 99px;
-        height: 34px;
-        left: 530px;
-        top: 14px;
+      height: auto;
+      left: 38px;
+      bottom: 52px;
+      top: 274px;
+      position: fixed;
+      overflow-y: auto;
+      overflow-x: hidden;
+
+      .nodata {
+        width: 674px;
+        height: 60px;
+        left: 0px;
+        top: 50px;
         position: absolute;
+        text-align: center;
         font-size: 30px;
         line-height: 30px;
         color: rgba(255, 255, 255, 1);
-        .lineClamp1();
       }
-      .line {
+
+      .sample {
         width: 623px;
-        height: 4px;
-        left: 0px;
-        top: 91px;
-        position: absolute;
-        opacity: 0.62;
-        .sparkBg("detailPage/line.png");
+        height: 95px;
+        left: 25px;
+        top: 25px;
+        margin-top: 20px;
+        position: relative;
+
+        .name {
+          width: 460px;
+          height: 34px;
+          left: 3px;
+          top: 0px;
+          position: absolute;
+          font-size: 30px;
+          line-height: 30px;
+          color: rgba(255, 255, 255, 1);
+          .lineClamp1();
+        }
+
+        .time {
+          width: 360px;
+          height: 30px;
+          left: 4px;
+          top: 47px;
+          position: absolute;
+          font-size: 26px;
+          line-height: 26px;
+          color: rgba(183, 183, 183, 1);
+          .lineClamp1();
+        }
+
+        .receive {
+          // width: 99px;
+          width: 120px;
+          height: 34px;
+          left: 520px;
+          top: 14px;
+          position: absolute;
+          font-size: 30px;
+          line-height: 30px;
+          color: rgba(255, 255, 255, 1);
+          .lineClamp1();
+          text-align: left;
+        }
+
+        .line {
+          width: 623px;
+          height: 4px;
+          left: 0px;
+          top: 91px;
+          position: absolute;
+          opacity: 0.62;
+          .sparkBg("detailPage/line.png");
+        }
       }
     }
   }
+
   .headline {
     width: 464px;
     height: 140px;
-    left: 141px;
+    left: 143px;
     top: 93px;
     position: absolute;
     .sparkBg("detailPage/headline.png");
   }
-}
+}
\ No newline at end of file

src/pages/rankpage/rankpage.jsx

@@ -7,11 +7,29 @@ import { Button } from '@src/components/Button';
 import { _asyncThrottle } from '@src/utils/utils';
 import store from '@src/store';
 import { PAGE_MAP } from '@src/utils/constants';
+import API from '@src/api';
 
 @observer
 class Rankpage extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      info: {}
+    }
+  }
+
+  componentDidMount() {
+    this.getRank();
+  }
+
+  // 明细
+  getRank = async () => {
+    const { success, data } = await API.getRankInfo();
+    if (success) {
+      this.setState({
+        info: data || {}
+      })
+    }
   }
 
   back = _asyncThrottle(() => {
@@ -19,27 +37,56 @@ class Rankpage extends React.Component {
   })
 
   render() {
+    const { rankInfo = [], myRank = {} } = this.state?.info;
+    const hasRankData = rankInfo.length > 0;
     return (
-      <div className="rankpage modal_center">
+      <div className="rankpage">
         <span className="bg"></span>
         <span className="headnline"></span>
         <span className="tip">该成绩仅为游戏当日分数</span>
-        <Button className="back" onClick={this.back}/>
+        <Button className="back" onClick={this.back} />
         <div className="list">
-          <span className="border"></span>
-          <span className="l_bg"></span>
+          <span className="listbg"></span>
           <div className="own">
             <span className="ownbg"></span>
-            <span className="ownrank">99</span>
-            <span className="ownname">用户昵称12345(我)</span>
-            <span className="ownscore">200</span>
-          </div>
-          <div className="sample">
-            <span className="userrank">99</span>
-            <span className="username">用户昵称12345(他)</span>
-            <span className="userscore">200</span>
-            <span className="line"></span>
+            <span className="ownrank">
+              {myRank.index === -1
+                ? '—'
+                : myRank.index > 100
+                  ? '100+'
+                  : myRank.index
+              }
+            </span>
+            <span className="ownname">{myRank.userName || '口味王用户'}</span>
+            <span className="ownscore">
+              {myRank.index === -1 ? 0 : (myRank.score || 0)}
+            </span>
           </div>
+          {hasRankData ? (
+            <>
+              <div className="l_bg">
+                {Array.isArray(rankInfo) && rankInfo.length > 0 &&
+                  rankInfo.map((item) => (
+                    <div className="sample" key={item.index}>
+                      <span className="userrank">
+                        {item.index === -1
+                          ? '—'
+                          : item.index > 100
+                            ? '100+'
+                            : item.index
+                        }
+                      </span>
+                      <span className="username">{item.userName || '口味王用户'}</span>
+                      <span className="userscore">
+                        {item.index === -1 ? 0 : (item.score || 0)}
+                      </span>
+                      <span className="line"></span>
+                    </div>
+                  ))
+                }
+              </div>
+            </>
+          ) : <span className='nodata'>暂无数据</span>}
           <span className="rank">排名</span>
           <span className="name">用户昵称</span>
           <span className="score">获得分数</span>

src/pages/rankpage/rankpage.less

 @import "../../res.less";
+
 .rankpage {
   width: 750px;
   height: 1624px;
   left: 0px;
   top: 0px;
   position: absolute;
+
   .bg {
     width: 750px;
     height: 1624px;
@@ -13,6 +15,7 @@
     position: absolute;
     .sparkBg("rankPage/bg.png");
   }
+
   .headnline {
     width: 464px;
     height: 140px;
@@ -21,6 +24,7 @@
     position: absolute;
     .sparkBg("rankPage/headnline.png");
   }
+
   .tip {
     width: 392px;
     height: 33px;
@@ -31,6 +35,7 @@
     line-height: 33px;
     color: rgba(255, 255, 255, 1);
   }
+
   .back {
     width: 94px;
     height: 49px;
@@ -39,13 +44,15 @@
     position: absolute;
     .sparkBg("rankPage/back.png");
   }
+
   .list {
     width: 750px;
     height: 1351px;
     left: 0px;
     top: 240px;
     position: absolute;
-    .border {
+
+    .listbg {
       width: 724px;
       height: 1351px;
       left: 12px;
@@ -53,29 +60,36 @@
       position: absolute;
       .sparkBg("rankPage/border.png");
     }
-    .l_bg {
-      width: 674px;
-      height: 1298px;
-      left: 36px;
-      top: 34px;
+
+    .nodata {
+      width: 724px;
+      height: 60px;
+      // left: 12px;
+      top: 500px;
       position: absolute;
-      .sparkBg("rankPage/l_bg.png");
-      overflow-y: auto;
+      text-align: center;
+      font-size: 30px;
+      line-height: 30px;
+      color: rgba(255, 255, 255, 1);
     }
+
     .own {
       width: 750px;
       height: 139px;
-      left: 0px;
-      top: 120px;
+      left: 0;
+      top: 121px;
       position: absolute;
+
       .ownbg {
         width: 750px;
         height: 139px;
         left: 0px;
         top: 0px;
         position: absolute;
+        display: block;
         .sparkBg("rankPage/ownbg.png");
       }
+
       .ownrank {
         width: 100px;
         height: 26px;
@@ -88,6 +102,7 @@
         .lineClamp1();
         text-align: center;
       }
+
       .ownname {
         width: 273px;
         height: 34px;
@@ -100,6 +115,7 @@
         .lineClamp1();
         text-align: center;
       }
+
       .ownscore {
         width: 100px;
         height: 26px;
@@ -113,87 +129,107 @@
         text-align: center;
       }
     }
-    .sample {
-      width: 623px;
-      height: 75px;
-      left: 63px;
-      top: 274px;
-      position: absolute;
-      .userrank {
-        width: 100px;
-        height: 28px;
-        left: -5px;
+
+    .l_bg {
+      width: 674px;
+      height: auto;
+      left: 36px;
+      top: 465px;
+      bottom: 52px;
+      position: fixed;
+      overflow-y: auto;
+      overflow-x: hidden;
+
+      .sample {
+        width: 623px;
+        height: 75px;
+        left: 28px;
         top: 0px;
-        position: absolute;
-        font-size: 28px;
-        line-height: 26px;
-        color: rgba(255, 255, 255, 1);
-        .lineClamp1();
-        text-align: center;
+        position: relative;
+        margin-top: 15px;
+
+        .userrank {
+          width: 100px;
+          height: 28px;
+          left: -5px;
+          top: 16px;
+          position: absolute;
+          font-size: 28px;
+          line-height: 26px;
+          color: rgba(255, 255, 255, 1);
+          .lineClamp1();
+          text-align: center;
+        }
+
+        .username {
+          width: 273px;
+          height: 30px;
+          left: 160px;
+          top: 15px;
+          position: absolute;
+          font-size: 28px;
+          line-height: 28px;
+          color: rgba(255, 255, 255, 1);
+          .lineClamp1();
+          text-align: center;
+        }
+
+        .userscore {
+          width: 100px;
+          height: 32px;
+          left: 495px;
+          top: 15px;
+          position: absolute;
+          font-size: 28px;
+          line-height: 30px;
+          color: rgba(255, 255, 255, 1);
+          .lineClamp1();
+          text-align: center;
+        }
+
+        .line {
+          width: 623px;
+          height: 4px;
+          left: 0px;
+          top: 71px;
+          position: absolute;
+          opacity: 0.62;
+          .sparkBg("rankPage/line.png");
+        }
       }
-      .username {
-        width: 273px;
-        height: 30px;
-        left: 160px;
-        top: -4px;
+    }
+
+      .rank {
+        width: 66px;
+        height: 28px;
+        left: 79px;
+        top: 68px;
         position: absolute;
-        font-size: 28px;
+        font-size: 30px;
         line-height: 28px;
         color: rgba(255, 255, 255, 1);
-        .lineClamp1();
-        text-align: center;
       }
-      .userscore {
-        width: 100px;
-        height: 32px;
-        left: 495px;
-        top: -4px;
+
+      .name {
+        width: 132px;
+        height: 28px;
+        left: 296px;
+        top: 68px;
         position: absolute;
-        font-size: 28px;
-        line-height: 30px;
+        font-size: 30px;
+        line-height: 28px;
         color: rgba(255, 255, 255, 1);
-        .lineClamp1();
-        text-align: center;
       }
-      .line {
-        width: 623px;
-        height: 4px;
-        left: 0px;
-        top: 71px;
+
+      .score {
+        width: 131px;
+        height: 28px;
+        left: 546px;
+        top: 68px;
         position: absolute;
-        opacity: 0.62;
-        .sparkBg("rankPage/line.png");
+        font-size: 30px;
+        line-height: 28px;
+        color: rgba(255, 255, 255, 1);
       }
-    }
-    .rank {
-      width: 66px;
-      height: 28px;
-      left: 79px;
-      top: 68px;
-      position: absolute;
-      font-size: 30px;
-      line-height: 28px;
-      color: rgba(255, 255, 255, 1);
-    }
-    .name {
-      width: 132px;
-      height: 28px;
-      left: 282px;
-      top: 68px;
-      position: absolute;
-      font-size: 30px;
-      line-height: 28px;
-      color: rgba(255, 255, 255, 1);
-    }
-    .score {
-      width: 131px;
-      height: 28px;
-      left: 546px;
-      top: 68px;
-      position: absolute;
-      font-size: 30px;
-      line-height: 28px;
-      color: rgba(255, 255, 255, 1);
-    }
   }
-}
+}
\ No newline at end of file