resources/views/business/pages/partials/installation-fee-summary.blade.php

@@ -5,10 +5,13 @@
 
     .installation-fee-card {
         position: relative;
-        display: block;
-        width: min(100%, 52rem);
-        min-height: 9.25rem;
-        padding: 0.95rem 1.15rem 0.8rem 1.25rem;
+        display: flex;
+        width: 100%;
+        height: 8rem;
+        min-height: 0;
+        flex-direction: column;
+        box-sizing: border-box;
+        padding: 0.7rem 1rem 0 1.15rem;
         border: 1px solid #d8d2c7;
         border-left: 3px solid #006395;
         border-radius: 0.75rem;
@@ -34,7 +37,7 @@
 
     .installation-fee-card__top {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         justify-content: space-between;
         gap: 1rem;
     }
@@ -64,14 +67,14 @@
         align-items: baseline;
         gap: 0.35rem;
         min-width: 0;
-        margin: 0.35rem 0 0.58rem;
+        margin: 0.2rem 0 0.3rem;
     }
 
     .installation-fee-card__value {
         color: #171717;
-        font-size: 2.625rem;
+        font-size: 2.5rem;
         font-weight: 700;
-        line-height: 1.1;
+        line-height: 1;
         letter-spacing: -0.035em;
         font-variant-numeric: tabular-nums;
     }
@@ -109,7 +112,8 @@
         align-items: center;
         gap: 0.45rem;
         flex-wrap: wrap;
-        padding-top: 0.55rem;
+        margin: auto -1rem 0 -1.15rem;
+        padding: 0.43rem 1rem 0.48rem 1.15rem;
         border-top: 1px solid #e5e0d7;
         color: #171717;
         font-size: 0.75rem;
@@ -134,8 +138,9 @@
 
     @media (max-width: 720px) {
         .installation-fee-card {
-            min-height: 0;
-            padding: 0.9rem 0.95rem 0.8rem 1rem;
+            height: auto;
+            min-height: 8rem;
+            padding: 0.7rem 0.85rem 0 0.95rem;
         }
         .installation-fee-card__top {
             flex-direction: column;
@@ -149,7 +154,13 @@
             flex-wrap: wrap;
         }
         .installation-fee-card__value {
-            font-size: 2.625rem;
+            font-size: 2.5rem;
+        }
+        .installation-fee-card__split {
+            margin-right: -0.85rem;
+            margin-left: -0.95rem;
+            padding-right: 0.85rem;
+            padding-left: 0.95rem;
         }
     }
 
@@ -365,7 +376,7 @@
         </span>
         <span class="installation-fee-card__main">
             <strong class="installation-fee-card__value" data-installation-fee-total>0.00</strong>
-            <span class="installation-fee-card__unit">万元</span>
+            <span class="installation-fee-card__unit">元</span>
             <span class="installation-fee-card__trend" data-installation-fee-trend>—</span>
             <span class="installation-fee-card__trend-note">较上月</span>
         </span>
@@ -486,13 +497,6 @@
             });
         }
 
-        function wan(value) {
-            return (Number(value || 0) / 10000).toLocaleString('zh-CN', {
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2
-            });
-        }
-
         function amount(value) {
             return Number(value || 0).toLocaleString('zh-CN', {
                 minimumFractionDigits: 2,
@@ -544,7 +548,7 @@
             var packageRate = total > 0 ? Math.round((packageTotal / total) * 100) : 0;
             var nonPackageRate = total > 0 ? 100 - packageRate : 0;
 
-            cardTotal.textContent = wan(total);
+            cardTotal.textContent = amount(total);
             packageAmount.textContent = amount(packageTotal);
             nonPackageAmount.textContent = amount(nonPackageTotal);
             packagePercent.textContent = '（' + packageRate + '%）';

tests/Feature/Business/ManagementCrudTest.php

@@ -286,7 +286,9 @@ class ManagementCrudTest extends FeatureTestCase
             ->assertSee('data-installation-fee-package', false)
             ->assertSee('data-installation-fee-non-package', false)
             ->assertSee('border-left: 3px solid #006395', false)
-            ->assertSee('font-size: 2.625rem', false)
+            ->assertSee('height: 8rem', false)
+            ->assertSee('font-size: 2.5rem', false)
+            ->assertSee('<span class="installation-fee-card__unit">元</span>', false)
             ->assertSee('function captionRange(value)', false)
             ->assertSee('function setCardValue(total, rows, value, data)', false)
             ->assertSeeText('平台')