feat: 修改样式

src/app/[locale]/(doings)/deliver/page.tsx

@@ -82,9 +82,11 @@ const Deliver: React.FC = () => {
                     </div>
                     <div className={styles.text}>Valor a ser arrecadado hoje</div>
                     <div className={clsx("text-center", styles.moneyContainer)}>
-                        <span className={clsx(styles.moneyText, "text-[.2rem]")}>R$ </span>
-                        <span className={clsx(styles.moneyText, "relative text-[.6rem]")}>
-                            50.00
+                        <span className={clsx(styles.moneyText, "text-[.2rem]")}>
+                            <span className={clsx(styles.moneyText, styles.icon)}>R$ </span>
+                        </span>
+                        <span className={clsx("relative text-[.6rem]")}>
+                            <span className={clsx(styles.moneyText, styles.money)}>50.00</span>
                             <div className={styles.numShadow}></div>
                         </span>
                     </div>

src/app/[locale]/(doings)/deliver/style.module.scss

@@ -57,31 +57,36 @@
         }
         .moneyText {
             font-weight: bold;
-            background: linear-gradient(to bottom, #fffab6, #ec8d19); // 添加水平渐变背景
-            -webkit-background-clip: text; // 将背景裁剪到文字
+            background: linear-gradient(to bottom, #fffab6, #ec8d19);
+            -webkit-background-clip: text;
             background-clip: text;
             -webkit-text-fill-color: transparent;
-            filter: drop-shadow(-1px -1px 0 #fff) drop-shadow(1px -1px 0 #fff)
-                drop-shadow(-1px 1px 0 #fff) drop-shadow(1px 1px 0 #fff);
-        }
-    }
-    .moneyContainer {
-        border-bottom: 6px solid #99eef4;
-        border-radius: 4px;
-        position: relative;
-        perspective: 1000px;
-        span {
-            position: relative;
-            z-index: 1;
+            &.money {
+                filter: drop-shadow(-1px -1px 0 #fff) drop-shadow(1px -1px 0 #fff)
+                    drop-shadow(-1px 1px 0 #fff) drop-shadow(1px 1px 0 #fff)
+                    drop-shadow(-5px -5px 0 rgba(0, 0, 0, 0.1))
+                    drop-shadow(5px -5px 0 rgba(0, 0, 0, 0.1))
+                    drop-shadow(-5px 5px 0 rgba(0, 0, 0, 0.1))
+                    drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.1));
+            }
+            &.icon {
+                filter: drop-shadow(-1px -1px 0 #fff) drop-shadow(1px -1px 0 #fff)
+                    drop-shadow(-1px 1px 0 #fff) drop-shadow(1px 1px 0 #fff)
+                    drop-shadow(-3px -3px 0 rgba(0, 0, 0, 0.1))
+                    drop-shadow(3px -3px 0 rgba(0, 0, 0, 0.1))
+                    drop-shadow(-3px 3px 0 rgba(0, 0, 0, 0.1))
+                    drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.1));
+            }
+            text-shadow: 0 0 0 20px rgba(0, 0, 0, 1);
         }
         .numShadow {
             position: absolute;
             bottom: 0;
             left: 50%;
-            transform: translateX(-50%) rotateX(80deg);
-            width: 50%;
+            transform: translateX(-50%) rotateX(70deg);
+            width: 80%;
             height: 10px;
-            background-color: rgba(0, 0, 0, 0.3);
+            background-color: rgba(0, 0, 0, 0.8);
             filter: blur(10px);
             border-radius: 50%;
             // box-shadow:
@@ -89,6 +94,17 @@
             //     0 0 15px rgba(0, 0, 0, 0.1);
             z-index: 2;
         }
+    }
+    .moneyContainer {
+        border-bottom: 6px solid #99eef4;
+        border-radius: 4px;
+        position: relative;
+        perspective: 1000px;
+        span {
+            position: relative;
+            z-index: 1;
+        }
+
         &:after {
             content: "";
             position: absolute;