fix:页面样式冲突，滑块千位制

package-lock.json

@@ -18,7 +18,10 @@
         "next-intl": "^3.17.0",
         "next-themes": "^0.3.0",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "sass": "^1.77.8",
+        "swiper": "^11.1.5",
+        "tailwind-merge": "^2.4.0"
       },
       "devDependencies": {
         "@types/node": "^20.14.10",
@@ -1543,6 +1546,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/@nextui-org/theme/node_modules/tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmmirror.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/@nextui-org/tooltip": {
       "version": "2.0.37",
       "resolved": "https://registry.npmmirror.com/@nextui-org/tooltip/-/tooltip-2.0.37.tgz",
@@ -5191,6 +5203,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -7043,6 +7060,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sass": {
+      "version": "1.77.8",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.2.tgz",
@@ -7443,10 +7476,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.5",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.5.tgz",
+      "integrity": "sha512-JJQWFXdxiMGC2j6ZGTYat5Z7NN9JORJBgHp0/joX9uPod+cRj0wr5H5VnWSNIz9JeAamQvYKaG7aFrGHIF9OEg==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwind-merge": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmmirror.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
-      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/tailwind-merge/-/tailwind-merge-2.4.0.tgz",
+      "integrity": "sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"
@@ -7467,6 +7518,15 @@
         "tailwindcss": "*"
       }
     },
+    "node_modules/tailwind-variants/node_modules/tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmmirror.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.4",
       "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.4.4.tgz",

src/app/[locale]/affiliate/faq/page.css → src/app/[locale]/affiliate/faq/page.scss

@@ -1,4 +1,5 @@
-.vux-drawer {
+.vux-drawer-faq{
+.vux-drawer-faq {
     display: block;
     position: relative;
     top: 0;
@@ -6,7 +7,7 @@
     width: 100%;
     min-height: 100vh;
 }
-.vux-drawer>.vux-drawer-body {
+.vux-drawer-faq>.vux-drawer-body {
     height: 100%;
     position: absolute;
     top: 0;
@@ -19,10 +20,10 @@
     transition: transform .38s ease-in-out, visibility .38s;
     transition: transform .38s ease-in-out, visibility .38s, -webkit-transform .38s ease-in-out;
 }
-#app, .router-view {
+.router-view {
     max-width: 4.02rem;
 }
-#app .router-view {
+.router-view {
     width: 100vw;
     height: 100%;
     overflow-y: auto;
@@ -155,24 +156,17 @@ body .van-tabs.alginLeft .van-tab {
     font-size: .13rem;
     color: grey;
 }
-#app .router-view {
-    width: 100vw;
-    height: 100%;
-    overflow-y: auto;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
 
-#app {
-    font-size: 0.14rem;
-    width: 100vw;
-    height: 100%;
-    background-color: #000;
-    margin: 0 auto;
-    min-height: 100%;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
+// #app {
+//     font-size: 0.14rem;
+//     width: 100vw;
+//     height: 100%;
+//     background-color: #000;
+//     margin: 0 auto;
+//     min-height: 100%;
+//     -webkit-box-sizing: border-box;
+//     box-sizing: border-box;
+// }
 .tabs .van-tabs__line {
     width: .3rem;
     height: .01rem;
@@ -181,6 +175,8 @@ body .van-tabs.alginLeft .van-tab {
     background: -o-linear-gradient(top, #ff9323, #ff6a01);
     background: linear-gradient(180deg, #ff9323, #ff6a01);
     bottom: .22rem;
+    transform: translateX(442px) translateX(-50%); 
+    transition-duration: 0.3s;
 }
 .van-tabs__line{
     position: absolute;
@@ -192,10 +188,10 @@ body .van-tabs.alginLeft .van-tab {
     background-color: #ee0a24;
     border-radius: 3px;
 }
-.vux-drawer>.vux-drawer-body>.drawer-mask, .vux-drawer>.vux-drawer-content {
+.vux-drawer-faq>.vux-drawer-body>.drawer-mask, .vux-drawer-faq>.vux-drawer-content {
     height: 100vh;
 }
-.vux-drawer>.vux-drawer-body>.drawer-mask {
+.vux-drawer-faq>.vux-drawer-body>.drawer-mask {
     z-index: 9999;
     position: absolute;
     top: 0;
@@ -361,4 +357,5 @@ ul.rules li {
     font-size: 14px;
     line-height: 20px;
     cursor: pointer;
+}
 }

src/app/[locale]/affiliate/faq/page.tsx

@@ -1,7 +1,7 @@
 'use client'
-import { FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren ,useRef, useState } from "react";
 import { useRouter } from "@/i18n";
-import './page.css'
+import './page.scss'
 
 interface Props { }
 const App: FC<PropsWithChildren<Props>> = (props) =>{
@@ -20,8 +20,35 @@ const App: FC<PropsWithChildren<Props>> = (props) =>{
         }
         router.back()
     }
+    const sliderRef = useRef<HTMLDivElement>(null)
+    const [num,setNum] = useState(100)
+    const [money,setMoney] = useState('5000')
+    const handleSlide:any =(e:React.MouseEvent<HTMLDivElement,MouseEvent>)=>{
+        if(sliderRef.current){
+            const startX = sliderRef.current.getBoundingClientRect().x
+            const x = e.clientX - startX
+            const xRem = x/(144*0.6)
+            const intNum = Math.round(10000*xRem)-Math.round(10000*xRem%10)
+            setNum(intNum)
+            const m = intNum*50
+            let r = ''
+            const arr = m.toString().split('')
+            arr.forEach((item,i)=>{
+                if(i!==arr.length&&(arr.length-i-1)%3===0){
+                    r += item + ','
+                }else{
+                    r += item
+                }
+            })
+            
+            setMoney(r)
+
+            const scale = ((Math.round((xRem * 10000)))/100.00).toFixed(2) + '%';
+            sliderRef.current.style.width = scale
+        }
+    }
     return (
-        <div className="vux-drawer">
+        <div className="vux-drawer-faq">
             <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                 <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                     <div className="headerBack">
@@ -57,7 +84,7 @@ const App: FC<PropsWithChildren<Props>> = (props) =>{
                                 <div className="van-tab">
                                     <span className="van-tab__text">TUTORIAL</span>
                                 </div>
-                                <div className="van-tabs__line" style={{transform: "translateX(442px) translateX(-50%); transition-duration: 0.3s"}}></div>
+                                <div className="van-tabs__line"></div>
                             </div>
                         </div>
                     </div>
@@ -90,12 +117,12 @@ const App: FC<PropsWithChildren<Props>> = (props) =>{
                             <div className="imgContent rowReverse">
                                 <img src="/img/cash.png" alt="" />
                                 <div>
-                                    Número de indicações > 100
+                                    Número de indicações > {num}
                                     <br />
-                                    Comissão > R$ 5,000 todo mês!
+                                    Comissão > R$ {money} todo mês!
                                 </div>
-                                <div className="slider van-slider" style={{height: "0.02rem"}}>
-                                    <div className="van-slider__bar" style={{width: "0.900901%", background: "rgb(0, 157, 128)"}}>
+                                <div className="slider van-slider" style={{height: "0.02rem"}} onClick={handleSlide}>
+                                    <div className="van-slider__bar" style={{width: "0.900901%", background: "rgb(0, 157, 128)"}} ref={sliderRef}>
                                         <div role="slider" className="van-slider__button-wrapper">
                                             <div className="img"></div>
                                         </div>

src/app/[locale]/affiliate/payments/page.css → src/app/[locale]/affiliate/payments/page.scss

@@ -1,4 +1,5 @@
-.vux-drawer {
+.vux-drawer-payments{
+.vux-drawer-payments {
     display: block;
     position: relative;
     top: 0;
@@ -6,7 +7,7 @@
     width: 100%;
     min-height: 100vh;
 }
-.vux-drawer>.vux-drawer-body {
+.vux-drawer-payments>.vux-drawer-body {
     height: 100%;
     position: absolute;
     top: 0;
@@ -19,10 +20,10 @@
     transition: transform .38s ease-in-out, visibility .38s;
     transition: transform .38s ease-in-out, visibility .38s, -webkit-transform .38s ease-in-out;
 }
-#app, .router-view {
+.router-view {
     max-width: 4.02rem;
 }
-#app .router-view {
+.router-view {
     width: 100vw;
     height: 100%;
     overflow-y: auto;
@@ -155,24 +156,18 @@ body .van-tabs.alginLeft .van-tab {
     font-size: .13rem;
     color: grey;
 }
-#app .router-view {
-    width: 100vw;
-    height: 100%;
-    overflow-y: auto;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
 
-#app {
-    font-size: 0.14rem;
-    width: 100vw;
-    height: 100%;
-    background-color: #000;
-    margin: 0 auto;
-    min-height: 100%;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
+
+// #app {
+//     font-size: 0.14rem;
+//     width: 100vw;
+//     height: 100%;
+//     background-color: #000;
+//     margin: 0 auto;
+//     min-height: 100%;
+//     -webkit-box-sizing: border-box;
+//     box-sizing: border-box;
+// }
 .tabs .van-tabs__line {
     width: .3rem;
     height: .01rem;
@@ -181,6 +176,8 @@ body .van-tabs.alginLeft .van-tab {
     background: -o-linear-gradient(top, #ff9323, #ff6a01);
     background: linear-gradient(180deg, #ff9323, #ff6a01);
     bottom: .22rem;
+    transform: translateX(358px) translateX(-50%); 
+    transition-duration: 0.3s;
 }
 .van-tabs__line{
     position: absolute;
@@ -192,10 +189,10 @@ body .van-tabs.alginLeft .van-tab {
     background-color: #ee0a24;
     border-radius: 3px;
 }
-.vux-drawer>.vux-drawer-body>.drawer-mask, .vux-drawer>.vux-drawer-content {
+.vux-drawer-payments>.vux-drawer-body>.drawer-mask, .vux-drawer-payments>.vux-drawer-content {
     height: 100vh;
 }
-.vux-drawer>.vux-drawer-body>.drawer-mask {
+.vux-drawer-payments>.vux-drawer-body>.drawer-mask {
     z-index: 9999;
     position: absolute;
     top: 0;
@@ -292,4 +289,5 @@ body .van-list__finished-text {
     font-size: 14px;
     line-height: 20px;
     cursor: pointer;
+}
 }

src/app/[locale]/affiliate/payments/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { FC, PropsWithChildren } from "react";
 import { useRouter } from "@/i18n";
-import './page.css'
+import './page.scss'
 
 interface Props { }
 const App: FC<PropsWithChildren<Props>> = (props) =>{
@@ -21,7 +21,7 @@ const App: FC<PropsWithChildren<Props>> = (props) =>{
         router.back()
     }
     return (
-        <div className="vux-drawer">
+        <div className="vux-drawer-payments">
             <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                 <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                     <div className="headerBack">
@@ -57,7 +57,7 @@ const App: FC<PropsWithChildren<Props>> = (props) =>{
                                 <div className="van-tab">
                                     <span className="van-tab__text">TUTORIAL</span>
                                 </div>
-                                <div className="van-tabs__line" style={{transform: "translateX(358px) translateX(-50%); transition-duration: 0.3s"}}></div>
+                                <div className="van-tabs__line"></div>
                             </div>
                         </div>
                         <div className="van-tabs__content"></div>

src/app/[locale]/affiliate/referrals/page.css → src/app/[locale]/affiliate/referrals/page.scss

@@ -1,4 +1,5 @@
-.vux-drawer {
+.vux-drawer-referrals{
+.vux-drawer-referrals {
     display: block;
     position: relative;
     top: 0;
@@ -6,7 +7,7 @@
     width: 100%;
     min-height: 100vh;
 }
-.vux-drawer>.vux-drawer-body {
+.vux-drawer-referrals>.vux-drawer-body {
     height: 100%;
     position: absolute;
     top: 0;
@@ -19,10 +20,10 @@
     transition: transform .38s ease-in-out, visibility .38s;
     transition: transform .38s ease-in-out, visibility .38s, -webkit-transform .38s ease-in-out;
 }
-#app, .router-view {
+.router-view {
     max-width: 4.02rem;
 }
-#app .router-view {
+.router-view {
     width: 100vw;
     height: 100%;
     overflow-y: auto;
@@ -155,24 +156,18 @@ body .van-tabs.alginLeft .van-tab {
     font-size: .13rem;
     color: grey;
 }
-#app .router-view {
-    width: 100vw;
-    height: 100%;
-    overflow-y: auto;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
 
-#app {
-    font-size: 0.14rem;
-    width: 100vw;
-    height: 100%;
-    background-color: #000;
-    margin: 0 auto;
-    min-height: 100%;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
+
+// #app {
+//     font-size: 0.14rem;
+//     width: 100vw;
+//     height: 100%;
+//     background-color: #000;
+//     margin: 0 auto;
+//     min-height: 100%;
+//     -webkit-box-sizing: border-box;
+//     box-sizing: border-box;
+// }
 .tabs .van-tabs__line {
     width: .3rem;
     height: .01rem;
@@ -181,6 +176,7 @@ body .van-tabs.alginLeft .van-tab {
     background: -o-linear-gradient(top, #ff9323, #ff6a01);
     background: linear-gradient(180deg, #ff9323, #ff6a01);
     bottom: .22rem;
+    transform: translateX(134.5px) translateX(-50%); transition-duration: 0.3s;
 }
 .van-tabs__line{
     position: absolute;
@@ -192,10 +188,10 @@ body .van-tabs.alginLeft .van-tab {
     background-color: #ee0a24;
     border-radius: 3px;
 }
-.vux-drawer>.vux-drawer-body>.drawer-mask, .vux-drawer>.vux-drawer-content {
+.vux-drawer-referrals>.vux-drawer-body>.drawer-mask, .vux-drawer-referrals>.vux-drawer-content {
     height: 100vh;
 }
-.vux-drawer>.vux-drawer-body>.drawer-mask {
+.vux-drawer-referrals>.vux-drawer-body>.drawer-mask {
     z-index: 9999;
     position: absolute;
     top: 0;
@@ -360,4 +356,5 @@ body .van-list__finished-text {
     font-size: 14px;
     line-height: 20px;
     cursor: pointer;
+}
 }

src/app/[locale]/affiliate/referrals/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { FC, PropsWithChildren } from "react";
 import { useRouter } from "@/i18n";
-import './page.css'
+import './page.scss'
 
 interface Props { }
 const App: FC<PropsWithChildren<Props>> = (props) =>{
@@ -22,7 +22,7 @@ const App: FC<PropsWithChildren<Props>> = (props) =>{
     }
 
     return (
-        <div className="vux-drawer">
+        <div className="vux-drawer-referrals">
             <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                 <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                     <div className="headerBack">
@@ -58,7 +58,7 @@ const App: FC<PropsWithChildren<Props>> = (props) =>{
                                 <div className="van-tab">
                                     <span className="van-tab__text">TUTORIAL</span>
                                 </div>
-                                <div className="van-tabs__line" style={{transform: "translateX(134.5px) translateX(-50%)", transitionDuration:"0.3s"}}></div>
+                                <div className="van-tabs__line"></div>
                             </div>
                         </div>
                     </div>

src/app/[locale]/affiliate/report/page.css → src/app/[locale]/affiliate/report/page.scss

@@ -1,4 +1,5 @@
-.vux-drawer {
+.vux-drawer-report{
+.vux-drawer-report {
     display: block;
     position: relative;
     top: 0;
@@ -6,7 +7,7 @@
     width: 100%;
     min-height: 100vh;
 }
-.vux-drawer>.vux-drawer-body {
+.vux-drawer-report>.vux-drawer-body {
     height: 100%;
     position: absolute;
     top: 0;
@@ -19,10 +20,10 @@
     transition: transform .38s ease-in-out, visibility .38s;
     transition: transform .38s ease-in-out, visibility .38s, -webkit-transform .38s ease-in-out;
 }
-#app, .router-view {
+.router-view {
     max-width: 4.02rem;
 }
-#app .router-view {
+.router-view {
     width: 100vw;
     height: 100%;
     overflow-y: auto;
@@ -155,24 +156,17 @@ body .van-tabs.alginLeft .van-tab {
     font-size: .13rem;
     color: grey;
 }
-#app .router-view {
-    width: 100vw;
-    height: 100%;
-    overflow-y: auto;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
 
-#app {
-    font-size: 0.14rem;
-    width: 100vw;
-    height: 100%;
-    background-color: #000;
-    margin: 0 auto;
-    min-height: 100%;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
+// #app {
+//     font-size: 0.14rem;
+//     width: 100vw;
+//     height: 100%;
+//     background-color: #000;
+//     margin: 0 auto;
+//     min-height: 100%;
+//     -webkit-box-sizing: border-box;
+//     box-sizing: border-box;
+// }
 .tabs .van-tabs__line {
     width: .3rem;
     height: .01rem;
@@ -181,6 +175,8 @@ body .van-tabs.alginLeft .van-tab {
     background: -o-linear-gradient(top, #ff9323, #ff6a01);
     background: linear-gradient(180deg, #ff9323, #ff6a01);
     bottom: .22rem;
+    transform: translateX(246px) translateX(-50%); 
+    transition-duration: 0.3s;
 }
 .van-tabs__line{
     position: absolute;
@@ -192,10 +188,10 @@ body .van-tabs.alginLeft .van-tab {
     background-color: #ee0a24;
     border-radius: 3px;
 }
-.vux-drawer>.vux-drawer-body>.drawer-mask, .vux-drawer>.vux-drawer-content {
+.vux-drawer-report>.vux-drawer-body>.drawer-mask, .vux-drawer-report>.vux-drawer-content {
     height: 100vh;
 }
-.vux-drawer>.vux-drawer-body>.drawer-mask {
+.vux-drawer-report>.vux-drawer-body>.drawer-mask {
     z-index: 9999;
     position: absolute;
     top: 0;
@@ -292,4 +288,5 @@ body .van-list__finished-text {
     font-size: 14px;
     line-height: 20px;
     cursor: pointer;
+}
 }

src/app/[locale]/affiliate/report/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { FC, PropsWithChildren } from "react";
 import {useRouter} from '@/i18n'
-import './page.css'
+import './page.scss'
 
 interface Props { }
 const App: FC<PropsWithChildren<Props>> = (props) =>{
@@ -21,7 +21,7 @@ const App: FC<PropsWithChildren<Props>> = (props) =>{
         router.back()
     }
     return (
-        <div className="vux-drawer">
+        <div className="vux-drawer-report">
             <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                 <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                     <div className="headerBack">
@@ -57,7 +57,7 @@ const App: FC<PropsWithChildren<Props>> = (props) =>{
                                 <div className="van-tab">
                                     <span className="van-tab__text">TUTORIAL</span>
                                 </div>
-                                <div className="van-tabs__line" style={{transform: "translateX(246px) translateX(-50%)",transitionDuration: "0.3s"}}></div>
+                                <div className="van-tabs__line"></div>
                             </div>
                         </div>
                     </div>

src/app/[locale]/affiliate/summary/page.css → src/app/[locale]/affiliate/summary/page.scss

@@ -1,3 +1,4 @@
+.vux-drawer-summary{
 .router-view{
     max-width: 4.02rem;
     width: 100vw;
@@ -6,7 +7,7 @@
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
-.vux-drawer {
+.vux-drawer-summary {
     display: block;
     position: relative;
     top: 0;
@@ -14,7 +15,7 @@
     width: 100%;
     min-height: 100vh;
 }
-.vux-drawer>.vux-drawer-body {
+.vux-drawer-summary>.vux-drawer-body {
     height: 100%;
     position: absolute;
     top: 0;
@@ -27,16 +28,16 @@
     transition: transform .38s ease-in-out, visibility .38s;
     transition: transform .38s ease-in-out, visibility .38s, -webkit-transform .38s ease-in-out;
 }
-.vux-drawer>.vux-drawer-body>.drawer-mask, .vux-drawer>.vux-drawer-content {
+.vux-drawer-summary>.vux-drawer-body>.drawer-mask, .vux-drawer-summary>.vux-drawer-content {
     height: 100vh;
 }
-.vux-drawer>.drawer-left {
+.vux-drawer-summary>.drawer-left {
     left: 0;
     -webkit-transform: translateX(-100%);
     -ms-transform: translateX(-100%);
     transform: translateX(-100%);
 }
-.vux-drawer>.vux-drawer-content {
+.vux-drawer-summary>.vux-drawer-content {
     background-color: #fff;
     position: absolute;
     top: 0;
@@ -51,10 +52,10 @@
     transition: transform .38s ease-in-out, visibility .38s, -webkit-transform .38s ease-in-out;
     will-change: none;
 }
-.vux-drawer>.vux-drawer-body>.drawer-mask{
+.vux-drawer-summary>.vux-drawer-body>.drawer-mask{
     height: 100vh;
 }
-.vux-drawer>.vux-drawer-body>.drawer-mask {
+.vux-drawer-summary>.vux-drawer-body>.drawer-mask {
     z-index: 9999;
     position: absolute;
     top: 0;
@@ -608,7 +609,9 @@ ul.rules li {
     background: -webkit-linear-gradient(top, #ff9323, #ff6a01);
     background: -o-linear-gradient(top, #ff9323, #ff6a01);
     background: linear-gradient(180deg, #ff9323, #ff6a01);
-    bottom: .22rem
+    bottom: .22rem;
+    transform: translateX(40px) translateX(-50%); 
+    transition-duration: 0.3s;
 }
 .van-tabs__line {
     position: absolute;
@@ -634,4 +637,5 @@ ul.rules li {
     background-color: #fff;
     -webkit-user-select: none;
     user-select: none;
+}
 }

src/app/[locale]/affiliate/summary/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { FC, PropsWithChildren, useRef, useState } from "react";
-import './page.css'
+import './page.scss'
 import { useRouter } from "@/i18n"
 
 interface Props { }
@@ -23,6 +23,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
     }
     const sliderRef = useRef<HTMLDivElement>(null)
     const [num,setNum] = useState(100)
+    const [money,setMoney] = useState('5000')
     const handleSlide:any =(e:React.MouseEvent<HTMLDivElement,MouseEvent>)=>{
         if(sliderRef.current){
             const startX = sliderRef.current.getBoundingClientRect().x
@@ -30,12 +31,24 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
             const xRem = x/(144*0.6)
             const intNum = Math.round(10000*xRem)-Math.round(10000*xRem%10)
             setNum(intNum)
+            const m = intNum*50
+            let r = ''
+            const arr = m.toString().split('')
+            arr.forEach((item,i)=>{
+                if(i!==arr.length&&(arr.length-i-1)%3===0){
+                    r += item + ','
+                }else{
+                    r += item
+                }
+            })
+            
+            setMoney(r)
             const scale = ((Math.round((xRem * 10000)))/100.00).toFixed(2) + '%';
             sliderRef.current.style.width = scale
         }
     }
     return (
-            <div className="vux-drawer">
+            <div className="vux-drawer-summary">
                 <div className="vux-drawer-body" style={{ transform: "translate3d(0px,0px,0px)" }}>
                     <div className="referral router-view" id="id-router-view" style={{ backgroundColor: "rgb(237, 237, 237)" }}>
                         <div className="headerBack">
@@ -71,7 +84,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                     <div role="tab" className="van-tab">
                                         <span className="van-tab__text">TUTORIAL</span>
                                     </div>
-                                    <div className="van-tabs__line" style={{transform: "translateX(40px) translateX(-50%);transition-duration: 0.3s"}}></div>
+                                    <div className="van-tabs__line"></div>
                                 </div>
                             </div>
                         </div>
@@ -265,7 +278,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                             <div>
                                                 Número de indicações > {num}
                                                 <br />
-                                                Comissão > R$ {num*50} todo mês!
+                                                Comissão > R$ {money} todo mês!
                                             </div>
                                             <div className="slider van-slider" style={{height: "0.02rem"}} onClick={handleSlide}>
                                                 <div className="van-slider__bar" style={{width: "0.900901%",background: "rgb(0, 157, 128)"}} ref={sliderRef}>