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()