new UI and handle cashing

src/views/base/home/desktop/components/DesktopLivePrice.vue

@@ -6,9 +6,13 @@
       <span
         v-if="percentChange !== 0"
         class="dhome-hero-price__delta"
-        :class="percentChange >= 0 ? 'dhome-hero-price__delta--up' : 'dhome-hero-price__delta--down'"
+        :class="percentChange > 0 ? 'dhome-hero-price__delta--up' : 'dhome-hero-price__delta--down'"
       >
-        {{ useTowDecimal(percentChange) }}%
+        <BasicIcon
+          :icon="percentChange > 0 ? 'vuesax-linear:arrow-up-2' : 'vuesax-linear:arrow-down-2'"
+          size="14"
+        />
+        <span class="dhome-hero-price__delta-value">{{ formatSignedPercentChange(percentChange) }}</span>
       </span>
       <Vue3Odometer
         :value="displayGoldVal"
@@ -24,9 +28,10 @@
 import { computed } from 'vue'
 import Vue3Odometer from 'vue3-odometer'
 import 'odometer/themes/odometer-theme-default.css'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import { useConfigStore } from '@/store/configStore'
 import { getTradeBuyPrice, lastPrice, percentPriceChanged } from '@/utils/price'
-import { useTowDecimal } from '@/utils/usePrice'
+import { formatSignedPercentChange } from '@/utils/usePrice'
 
 const config = useConfigStore()
 

src/views/base/home/desktop/styles/desktop-home.less

@@ -172,11 +172,17 @@
   &__delta {
     display: inline-flex;
     align-items: center;
+    gap: 4px;
     padding: 4px 8px;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 600;
-    direction: ltr;
+
+    &-value {
+      direction: ltr;
+      unicode-bidi: isolate;
+      font-variant-numeric: tabular-nums;
+    }
 
     &--up {
       background: #ecfdf3;