init

src/pages/ResPage/ResPage.module.less

@@ -6,16 +6,25 @@
   left: 0;
   top: 0;
   position: absolute;
-  overflow: hidden;
-
-  .webpBg("ResPage/bg.png");
-  background-size: 750px 1746px;
-  background-position: left top;
+  overflow-x: hidden;
+  overflow-y: auto;
 
   display: flex;
   align-items: center;
   justify-content: center;
 
+  .bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 1624px;
+
+    .webpBg("ResPage/bg.png");
+    background-size: 750px 1746px;
+    background-position: left top;
+  }
+
   .rankBg {
     position: absolute;
     left: 21px;
@@ -85,6 +94,38 @@
     }
   }
 
+  .tab {
+    position: absolute;
+    left: 19px;
+    top: 536px;
+    width: 713px;
+    height: 1041px;
+
+    &.tab1 {
+      .webpBg("ResPage/bg1.png");
+    }
+
+    &.tab2 {
+      .webpBg("ResPage/bg2.png");
+    }
+
+    .tabBtn1 {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 50%;
+      height: 80px;
+    }
+
+    .tabBtn2 {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      width: 50%;
+      height: 80px;
+    }
+  }
+
   .backBtn {
     position: absolute;
     left: 28px;

src/pages/ResPage/ResPage.tsx

@@ -7,7 +7,9 @@ import classNames from "classnames";
 @observer
 class ResPage extends React.Component<any, any> {
 
-    state = {}
+    state = {
+        tab: 1,
+    }
 
     async componentDidMount() {
 
@@ -17,10 +19,20 @@ class ResPage extends React.Component<any, any> {
 
     }
 
+    changeTab = (tab) => {
+        this.setState({ tab, });
+    }
+
     render() {
-        const {} = this.state;
+        const { tab } = this.state;
+
+        const tabCls = classNames(styles.tab, {
+            [styles.tab1]: tab === 1,
+            [styles.tab2]: tab === 2,
+        });
 
         return <div className={styles.ResPage}>
+            <div className={styles.bg}/>
             <div className={styles.rankBg}>
                 <div className={styles.rankImg}/>
                 <div className={classNames(styles.rankTip, styles.rank1)}>
@@ -35,6 +47,12 @@ class ResPage extends React.Component<any, any> {
                 <div className={classNames(styles.rankTip, styles.rank4)}>
                     理财周期<span>2025.06.22-2025.07.22</span>
                 </div>
+            </div>
+            <div className={tabCls}>
+                <div className={styles.tabBtn1} onClick={() => this.changeTab(1)}/>
+                <div className={styles.tabBtn2} onClick={() => this.changeTab(2)}/>
+
+
             </div>
             <Button className={styles.backBtn} onClick={this.clickBack}/>
         </div>;