boursecu_user/src/views/base/home/components/PriceStats.vue

<template>
  <div class="w-full flex justify-evenly rounded-lg py-2 home_appear_fade_in mt-6 pb-45">
    <div class="text-center w-full">
      <div>بالاترین قیمت امروز</div>
      <div v-if="price" class="flex flex-col items-center mt-3">
        <div class="text-green-600 flex gap-1 text-xs items-center">
          <div class="text-base">{{ usePriceWithoutType(highPrice) }}</div>
          ریال
        </div>
      </div>
    </div>
    <a-divider class="bg-gray-200 !h-auto !my-2" type="vertical" />
    <div class="text-center w-full">
      <div>پایین ترین قیمت امروز</div>
      <div class="flex w-full mt-3 justify-evenly">
        <div v-if="price" class="flex flex-col items-center">
          <div class="text-red-600 flex gap-1 text-xs items-center">
            <div class="text-base">{{ usePriceWithoutType(lowPrice) }}</div>
            ریال
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { getTradeBuyPrice, getTradeSellPrice } from '@/utils/price'
import { usePriceWithoutType } from '../../../../utils/usePrice'

const props = defineProps<{
  price: any
}>()

const highPrice = computed(() => props.price?.up?.buy ?? getTradeBuyPrice(props.price))
const lowPrice = computed(() => props.price?.up?.sell ?? getTradeSellPrice(props.price))
</script>