Bladeren bron

feat: 修改

year 3 maanden geleden
bovenliggende
commit
a3372f376d
2 gewijzigde bestanden met toevoegingen van 33 en 16 verwijderingen
  1. 11 6
      src/app/[locale]/(doings)/continuous/page.module.scss
  2. 22 10
      src/app/[locale]/(doings)/continuous/page.tsx

+ 11 - 6
src/app/[locale]/(doings)/continuous/page.module.scss

@@ -258,21 +258,26 @@
         height: 0.6rem;
         border-radius: 0.1rem;
         background: url("/continuous/rili.png") no-repeat;
-        background-size: 50% auto;
+        background-size: 80% auto;
         background-position: center center;
         background-color: #fff;
         perspective: 100px;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 0.18rem;
+        font-size: 0.2rem;
         font-weight: 700;
         margin-right: 0.1rem;
+        position: relative;
         span {
-            position: relative;
-            top: 0.07rem;
-            left: -0.04rem;
-            transform: rotateY(-46deg) rotateX(6deg);
+            position: absolute;
+            top: 42%;
+            left: 43%;
+            transform: rotateY(0) rotateZ(5deg) rotateX(0) translateX(-50%);
+            transform-origin: 50% 50%;
+            width: 0.3rem;
+            display: block;
+            text-align: center;
         }
     }
     .premioItemBtn {

+ 22 - 10
src/app/[locale]/(doings)/continuous/page.tsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import React from "react";
 import styles from "./page.module.scss";
 
-const DayItem = () => {
+const DayItem = ({ dayColor = "#297fcf", num = 0 }) => {
     return (
         <div>
             <div className="mb-[.1rem] flex flex-row justify-center">
@@ -16,7 +16,7 @@ const DayItem = () => {
             </div>
             <div className={styles.premioItem}>
                 <div className={styles.premioItemDay}>
-                    <span style={{ color: "#12950f" }}>17</span>
+                    <span style={{ color: dayColor }}>{num}</span>
                 </div>
                 <div>
                     <div className="text-[.16rem] font-bold">Recarga contínua por 7 dias</div>
@@ -34,11 +34,21 @@ const DayItem = () => {
 const Page = () => {
     const router = useRouter();
     const dayContainer = React.useRef<HTMLDivElement>(null);
+    const colors = [
+        "#4eb04c",
+        "#297fce",
+        "#ec3b23",
+        "#4eb04c",
+        "#297fce",
+        "#ec3b23",
+        "#4eb04c",
+        "#297fce",
+        "#ec3b23",
+    ];
 
-    const itemInfo = React.useMemo(() => {
-        if (!dayContainer.current) return 47;
-        return dayContainer.current?.getBoundingClientRect().width / 6 - 10;
-    }, []);
+    const goDeposit = () => {
+        router.push("/deposit");
+    };
 
     const cfg1 = React.useMemo(() => {
         return [
@@ -79,7 +89,9 @@ const Page = () => {
             <div className={styles.container}>
                 <div className={styles.top}>
                     <img className={styles.img} src="/continuous/top.png" alt="" />
-                    <div className={styles.recharge}>RECARGA</div>
+                    <div className={styles.recharge} onClick={goDeposit}>
+                        RECARGA
+                    </div>
                 </div>
                 <div className={styles.content}>
                     <div className={styles.tip}>
@@ -147,9 +159,9 @@ const Page = () => {
                                 </div>
                                 <div className={styles.premioContainer}>
                                     <div className={styles.premioContent}>
-                                        <DayItem></DayItem>
-                                        <DayItem></DayItem>
-                                        <DayItem></DayItem>
+                                        <DayItem num={5}></DayItem>
+                                        <DayItem num={15}></DayItem>
+                                        <DayItem num={25}></DayItem>
                                     </div>
                                 </div>
                             </div>