fix: 增加转盘title图片

src/app/[locale]/(navbar)/cashWheel/CashWheelClient.tsx

@@ -7,6 +7,7 @@ import { copyText } from "@/utils/methods";
 import { LuckyWheel } from "@lucky-canvas/react";
 import { useCountDown } from "ahooks";
 import { Popup, Toast } from "antd-mobile";
+import clsx from "clsx";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
@@ -281,23 +282,52 @@ const DrawContent = () => {
     );
 };
 type Dtltype = "left" | "right";
-const Report = () => {
+const LeftListClient = () => {
     const winListData = Array(500).fill("1");
+    return (
+        <>
+            {winListData.length > 0 &&
+                winListData.map((item, index) => {
+                    return (
+                        <div className={styles.item} key={index}>
+                            <span className={`${styles.name} ${styles.omitWrap}`}>
+                                5533******412
+                            </span>
+                            <span className={styles.tipText}> Acabou de saca </span>
+                            <div className={styles.value}>
+                                <span className={styles.addCash}>+100</span>
+                                <span className={styles.unit}> R$</span>
+                            </div>
+                        </div>
+                    );
+                })}
+        </>
+    );
+};
+const Report = () => {
     const [activeTab, setActiveTab] = useState<Dtltype>("left");
 
     const handler = (dtl: Dtltype) => {
         setActiveTab(dtl);
     };
+    const activeClass = clsx(
+        styles.vanTabItem,
+        activeTab === "left" ? styles.vanTabAcriveLeft : styles.vanTabAcriveRight
+    );
+
     return (
         <div className={styles.report}>
             <div className={`${styles.vanTabs} ${styles.vanTabsLine}`}>
                 <div className={styles.vanTabsWrap}>
                     <div className={styles.vanTabsNav}>
-                        <div className={`${styles.vanTabItem}`} onClick={() => handler("left")}>
+                        <div
+                            className={`${styles.vanTabItem} ${activeTab === "left" ? styles.vanTabAcriveRight : ""}`}
+                            onClick={() => handler("left")}
+                        >
                             Relatório
                         </div>
                         <div
-                            className={`${styles.vanTabItem} ${styles.vanTabAcriveLeft}`}
+                            className={`${styles.vanTabItem} ${activeTab === "right" ? styles.vanTabAcriveLeft : ""}`}
                             onClick={() => handler("right")}
                         >
                             Minha Referencia
@@ -310,26 +340,7 @@ const Report = () => {
                             <div
                                 className={`${styles.winList} ${styles.swipernoswiping} ${styles.type2}`}
                             >
-                                {winListData.length > 0 &&
-                                    winListData.map((item, index) => {
-                                        return (
-                                            <div className={styles.item} key={index}>
-                                                <span
-                                                    className={`${styles.name} ${styles.omitWrap}`}
-                                                >
-                                                    5533******412
-                                                </span>
-                                                <span className={styles.tipText}>
-                                                    {" "}
-                                                    Acabou de saca{" "}
-                                                </span>
-                                                <div className={styles.value}>
-                                                    <span className={styles.addCash}>+100</span>
-                                                    <span className={styles.unit}> R$</span>
-                                                </div>
-                                            </div>
-                                        );
-                                    })}
+                                {activeTab === "left" ? <LeftListClient /> : null}
                             </div>
                         </div>
                     </div>
@@ -427,8 +438,12 @@ const DrawMain = () => {
         <div className={"relative"}>
             <WheelWallet />
 
-            <div className={"relative hidden w-[100%] pt-[20px] md:block"}>
+            <div className={"relative hidden w-[100%] pt-[20px] sm:block"}>
                 <img src={"/wheels/wheel-bg.png"} className={"w-[100%]"} />
+                <img
+                    src={"/wheels/title.png"}
+                    className={"absolute left-[13%] top-[53%] z-10 w-[70%] object-cover"}
+                />
                 {/*定位到中心圆*/}
                 <div className={"absolute bottom-[0.0347rem] h-[2.6736rem] w-[100%]"}>
                     <div className={"flex h-[100%] w-[100%] justify-center text-center"}>
@@ -443,8 +458,11 @@ const DrawMain = () => {
                             className={
                                 "mr-[0.07rem] flex h-[2.3rem] w-[2.3rem] " +
                                 " absolute" +
-                                " bottom-[0.2rem]"
+                                " bottom-[0.2rem] z-50 rounded-[50%]"
                             }
+                            style={{
+                                boxShadow: "rgba(255, 255, 255, 1) 0px 0px 60px 12px inset",
+                            }}
                         >
                             {/*<div*/}
                             {/*    className={*/}
@@ -483,8 +501,12 @@ const DrawMain = () => {
                 </div>
             </div>
 
-            <div className={"relative block w-[100%] pt-[20px] md:hidden"}>
+            <div className={"relative block w-[100%] pt-[20px] sm:hidden"}>
                 <img src={"/wheels/wheel-bg.png"} className={"w-[100%]"} />
+                <img
+                    src={"/wheels/title.png"}
+                    className={"absolute left-[13%] top-[53%] z-10 w-[70%] object-cover"}
+                />
                 {/*定位到中心圆*/}
                 <div className={"absolute bottom-[0.0347rem]" + " h-[2.5rem]" + " w-[100%]"}>
                     <div className={"flex h-[100%] w-[100%] justify-center text-center"}>

src/app/[locale]/(navbar)/cashWheel/style.module.scss

@@ -368,31 +368,30 @@
 
         &.vanTabAcriveRight{
           color: #fff;
-          background: #1c1e21;
+          background: red;
           position: relative;
-          border-radius: 15px 0 0 0 ;
+          border-radius: 15px 15px 0   0 ;
           &:before{
             content: '';
             position: absolute;
             width: 60px;
-            height: 60px;
-            background: radial-gradient(circle at 100%  100%, transparent 60px, #1c1e21 61px);
-            top: 0;
+            height: 100%;
+            background: radial-gradient(circle at 100%  0%, transparent 60px, red 62px);
+            bottom: 0;
             right: -60px;
           }
         }
         &.vanTabAcriveLeft{
           color: #fff;
-          border: 1px solid red;
           background: #1c1e21;
           position: relative;
-          border-radius:0 0 0 15px;
+          border-top-right-radius: 15px;
           &:before{
             content: '';
             position: absolute;
             width: 60px;
             height: 60px;
-            background: radial-gradient(circle at 100%  0%, red 60px, #1c1e21 61px);
+            background: radial-gradient(circle at 0%  100%, transparent 60px, #1c1e21 61px);
             top: 0;
             left: -60px;
           }