init

src/App.tsx

@@ -19,6 +19,7 @@ import { loadFont } from "@/core/preload.ts";
 
 import DetailPage from "@/pages/DetailPage/DetailPage.tsx";
 import RecordPage from "@/pages/RecordPage/RecordPage.tsx";
+import ResPage from "@/pages/ResPage/ResPage.tsx";
 
 
 @observer
@@ -29,7 +30,7 @@ class App extends Component {
     const defaultPage = {
       myPrize: MyPrize, // TODO 举例子 新宿台奖品页
       index: LoadingDemo,
-    }[skinId] || RecordPage;
+    }[skinId] || ResPage;
     PageCtrl.changePage(defaultPage);
   }
 

src/pages/RecordPage/RecordPage.tsx

 import React from 'react';
 import { observer } from 'mobx-react';
-import styles from './DetailPage.module.less';
+import styles from './RecordPage.module.less';
 import { Button } from "@grace/ui";
 
 @observer

src/pages/ResPage/ResPage.module.less

+@import "../../res.less";
+
+.ResPage {
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
+  overflow: hidden;
+
+  .webpBg("ResPage/bg.png");
+  background-size: 750px 1746px;
+  background-position: left top;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .rankBg {
+    position: absolute;
+    left: 21px;
+    top: 112px;
+    width: 709px;
+    height: 407px;
+    .webpBg("ResPage/rankBg.png");
+
+    .rankTip {
+      position: absolute;
+      background-color: rgb(249, 231, 208);
+      left: 234px;
+      border-radius: 11px;
+      width: 417px;
+      height: 52px;
+
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      padding-left: 21px;
+      box-sizing: border-box;
+
+      font-size: 24px;
+      color: #a3741f;
+      font-weight: bold;
+
+      span {
+        margin-left: 16px;
+        font-weight: normal;
+      }
+
+    }
+
+    .rank1 {
+      top: 109px;
+      background: none;
+
+      span {
+        margin-left: 4px;
+        font-size: 30px;
+        color: #ee4e32;
+        font-weight: bold;
+        height: 40px;
+      }
+    }
+
+    .rank2 {
+      top: 169px;
+    }
+
+    .rank3 {
+      top: 229px;
+    }
+
+    .rank4 {
+      top: 287px;
+    }
+  }
+
+  .backBtn {
+    position: absolute;
+    left: 28px;
+    top: 58px;
+    width: 18px;
+    height: 32px;
+    .webpBg("ResPage/backBtn.png");
+  }
+
+}

src/pages/ResPage/ResPage.tsx

+import React from 'react';
+import { observer } from 'mobx-react';
+import styles from './ResPage.module.less';
+import { Button } from "@grace/ui";
+import classNames from "classnames";
+
+@observer
+class ResPage extends React.Component<any, any> {
+
+    state = {}
+
+    async componentDidMount() {
+
+    }
+
+    clickBack = () => {
+
+    }
+
+    render() {
+        const {} = this.state;
+
+        return <div className={styles.ResPage}>
+            <div className={styles.rankBg}>
+                <div className={classNames(styles.rankTip, styles.rank1)}>
+                    我的收益区间在<span>3000元及以上</span>
+                </div>
+                <div className={classNames(styles.rankTip, styles.rank2)}>
+                    理财资金<span>334556675元</span>
+                </div>
+                <div className={classNames(styles.rankTip, styles.rank3)}>
+                    累计收益<span>2213元</span>
+                </div>
+                <div className={classNames(styles.rankTip, styles.rank4)}>
+                    理财周期<span>2025.06.22-2025.07.22</span>
+                </div>
+
+            </div>
+            <Button className={styles.backBtn} onClick={this.clickBack}/>
+        </div>;
+    }
+}
+
+export default ResPage;