fix: 弹窗修改

src/app/[locale]/(TabBar)/[[...share]]/@popupWidget/ActivityMask.tsx

@@ -1,13 +1,13 @@
 "use client";
 import { useWalletStore } from "@/stores/useWalletStore";
 import { Mask } from "antd-mobile";
+import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
-
+import styles from "./style.module.scss";
 const ActivityMask = () => {
     const [visible, setVisible] = useState<boolean>(false);
 
     const wallet = useWalletStore((state) => state.wallet);
-    console.log(`🚀🚀🚀🚀🚀-> in ActivityMask.tsx on 10`, wallet);
     useEffect(() => {
         if (wallet?.notice?.lose_score > 0) {
             setVisible(true);
@@ -22,31 +22,70 @@ const ActivityMask = () => {
             {/*>*/}
             {/*    <span className={"iconfont icon-guanbi"}></span>*/}
             {/*</div>*/}
-            <div className={"absolute top-[20%] z-50"}>
-                <div className={"h-[4.2rem] w-[100%]"}>
-                    <div
-                        className={"iconfont icon-guanbi absolute right-[30px]"}
-                        onClick={() => setVisible(false)}
-                    ></div>
-                    <img src={"/doings/activity.png"} className={"h-[4.1667rem] object-contain"} />
+            <div className={"absolute top-[18%] z-50 w-[100%]"} onClick={() => setVisible(false)}>
+                <div className={"relative flex h-[4.4653rem] w-[100%] justify-center"}>
+                    <img
+                        src={"/doings/activity.png"}
+                        className={"h-[100%]" + " object-contain" + " absolute"}
+                    />
+
+                    <motion.div
+                        className={"absolute -top-[13%] -z-10 flex h-[4.1667rem] items-center"}
+                        animate={{
+                            rotate: [0, 90, 180],
+                        }}
+                        transition={{
+                            duration: 10,
+                            ease: "linear",
+                            repeat: Infinity,
+                        }}
+                    >
+                        <img src="/img/light.png" alt="" />
+                    </motion.div>
+
+                    <motion.div
+                        className={"absolute -top-[23%] -z-[9] flex h-[4.1667rem] items-center"}
+                        animate={{
+                            rotate: [0, 90, 180],
+                        }}
+                        transition={{
+                            duration: 20,
+                            ease: "linear",
+                            repeat: Infinity,
+                        }}
+                    >
+                        <img src="/img/light-1.png" alt="" />
+                    </motion.div>
 
                     <div
                         className={
-                            "absolute -left-[8%] top-[28%] h-[2.0833rem] w-[56%]" +
-                            " translate-x-1/2" +
-                            " p-[0.0694rem] text-[#000]"
+                            "absolute left-[50%] top-[28%] h-[2.8rem] w-[56%]" +
+                            " -translate-x-1/2 p-[0.0694rem]"
                         }
                     >
-                        <div className={"text-center font-bold"}>Um presente</div>
-                        <div className={"mt-[0.0294rem] text-center"}>
-                            <span>Não tive sorte hoje,</span>
-                            <span>Continue com o bom trabalho</span>
+                        <div className={"mt-[0.35rem] text-center font-[Arial]"}>
+                            <div
+                                className={styles.ActivityShadow}
+                                // @ts-ignore
+                                style={{ "--font-size": "0.2583rem" }}
+                                data-text={"PRESENTE"}
+                            >
+                                PRESENTE
+                            </div>
+
+                            <div
+                                className={`${styles.ActivityShadow} -mt-[0.1389rem]`}
+                                // @ts-ignore
+                                style={{ "--font-size": "0.4167rem" }}
+                                data-text={`R$${wallet?.notice?.lose_score}`}
+                            >
+                                R${wallet?.notice?.lose_score}
+                            </div>
                         </div>
-                        <div className={"mt-[0.4167rem] flex items-center justify-center"}>
-                            <span className={"mr-[0.0694rem]"}>presente: </span>
-                            <span className={"text-[0.2083rem] font-bold"}>
-                                {wallet?.notice?.lose_score}
-                            </span>
+
+                        <div className={"absolute bottom-0 text-center text-[#663f23]"}>
+                            <p>Não tive sorte hoje,</p>
+                            <p>Continue com o bom trabalho</p>
                         </div>
                     </div>
                 </div>

src/app/[locale]/(TabBar)/[[...share]]/@popupWidget/style.module.scss

@@ -0,0 +1,20 @@
+
+.ActivityShadow {
+  font-weight: 900;
+  font-size: var(--font-size, 0.2778rem);
+  text-shadow: 0 1px 0 #fff;
+  color: #fbce72;
+  &::before {
+    content: attr(data-text);
+    font-weight: 900;
+    font-size: var(--font-size, 0.2778rem);
+    position: absolute;
+    z-index: 10;
+    background: linear-gradient(to bottom, #fbd68f, #ed7d03);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: none;
+  }
+
+}

src/app/[locale]/(TabBar)/[[...share]]/_home/HomePromotion.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { PromotionRep } from "@/api/home";
 import Box from "@/components/Box";
-import { CenterPopup } from "antd-mobile";
+import { Mask } from "antd-mobile";
 import { FC, useEffect, useState } from "react";
 
 import dayjs from "dayjs";
@@ -51,13 +51,18 @@ const HomePromotion: FC<Props> = (props) => {
     if (data && data.length === 0) return null;
     return (
         <div>
-            <CenterPopup visible={visible} onMaskClick={closeHandler}>
-                <div className={"promotion-swiper relative max-w-[3.139rem]"}>
+            <Mask visible={visible} onMaskClick={closeHandler}>
+                <div
+                    className={
+                        "promotion-swiper absolute left-1/2 top-[18%] max-w-[3.139rem]" +
+                        " -translate-x-1/2"
+                    }
+                >
                     <div
                         onClick={closeHandler}
                         className={
-                            "iconfont icon-guanbi absolute right-[0.1389rem] top-[0.0347rem]" +
-                            " z-20"
+                            "iconfont icon-guanbi absolute right-[0.2389rem] top-[0.1347rem]" +
+                            " z-20 text-[0.1389rem]"
                         }
                     ></div>
                     <Swiper
@@ -69,21 +74,16 @@ const HomePromotion: FC<Props> = (props) => {
                         slidesPerView={1}
                         grabCursor={true}
                         navigation={true}
-                        className={"min-h-[2.8472rem] rounded-[0.0694rem] bg-[#1c1c1c]"}
+                        className={"min-h-[3.8rem]"}
                     >
                         {data?.map((promotion, index) => (
                             <SwiperSlide key={index}>
-                                <div className={"h-[0.2778rem] px-[0.12rem]"}>
-                                    <header className={"truncate leading-[0.2778rem]"}>
-                                        {promotion.content.title}
-                                    </header>
-                                </div>
                                 <Box
                                     action={promotion.action_type}
                                     actionData={promotion.action_params}
                                 >
                                     <img
-                                        className={"h-[2.3rem] w-[100%] pb-[0.1111rem]"}
+                                        className={"h-[3.4722rem] w-[100%] rounded-[0.1389rem]"}
                                         src={promotion.content.image}
                                         alt={promotion.content.title}
                                     />
@@ -92,7 +92,7 @@ const HomePromotion: FC<Props> = (props) => {
                         ))}
                     </Swiper>
                 </div>
-            </CenterPopup>
+            </Mask>
         </div>
     );
 };

tailwind.config.ts

@@ -1,5 +1,5 @@
 import type { Config } from "tailwindcss";
-
+const plugin = require("tailwindcss/plugin");
 const MAX_WIDTH = 1440;
 const toRem = (px: number) => {
     return `${((4 * px) / (MAX_WIDTH / 10)).toFixed(2)}rem`;
@@ -33,12 +33,21 @@ const config: Config = {
                 "gradient-conic":
                     "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
             },
+            textShadow: {},
         },
         colors: {
             "primary-color": "var(--primary-color)",
             "linear-color": "linear-gradient(180deg, #ffaa30, #ffe6be)",
         },
     },
-    plugins: [],
+    plugins: [
+        plugin(function ({ addUtilities }: any) {
+            addUtilities({
+                "text-stroke": {
+                    webkitTextStroke: "1px #fff",
+                },
+            });
+        }),
+    ],
 };
 export default config;