🎨 style: 红包模板金额动态计算大小

src/components/redPackets/index.less

@@ -88,15 +88,20 @@
 	.money {
 		font-weight: bold;
 		color: #FE0F0B;
-		font-size: 30px;
-		top: 31%;
+		font-size: 40px;
+		top: 29.5%;
 		position: absolute;
 		width: 100%;
-		text-align: center;
+		height: 42px;
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
 	}
 
 	.tag {
 		font-size: 16px;
+		display: inline-block;
+		margin-bottom: 4px;
 	}
 
 	.available_time {

src/components/redPackets/mobileComponent.jsx

@@ -9,6 +9,28 @@ export default ({ data }) => {
     setNewWeek(sortWeeks(data.receive_rule.week))
   }, [data.receive_rule.week, data.receive_irregular])
 
+  /* 动态font */
+  function fonts() {
+    const { cash_amount_type, min_denomination, max_denomination } = data
+    const defaultCss = { b: "20px", a: "40px" }
+    if (cash_amount_type === "2") {
+      const count =
+        String(parseFloat(min_denomination)).length +
+        String(parseFloat(max_denomination)).length +
+        1
+      if (count > 6) {
+        return {
+          a: 32 - (count - 6) * 1.1 + "px",
+          b: 20 - (count - 6) + "px"
+        }
+      } else {
+        return defaultCss
+      }
+    } else {
+      return defaultCss
+    }
+  }
+
   function createElement() {
     if (data.receive_type === 1) {
       return (
@@ -76,8 +98,10 @@ export default ({ data }) => {
               {data.effect_date[1] || "2023-12-30 23:59:59"}
             </span>
           </p>
-          <p className="money">
-            <span className="tag">￥</span>
+          <p className="money" style={{ fontSize: fonts().a }}>
+            <span className="tag" style={{ fontSize: fonts().b }}>
+              ￥
+            </span>
             {data.cash_amount_type === "1"
               ? parseFloat(data.denomination || 0.01)
               : `${parseFloat(data.min_denomination || 0.01)}~${parseFloat(