64 lines
2.0 KiB
Vue
64 lines
2.0 KiB
Vue
<template>
|
|
<div
|
|
class="w-full flex justify-evenly rounded-lg py-2 home_appear_fade_in"
|
|
:class="[
|
|
isBoursecuLayout ? 'mt-8 pt-2' : 'mt-6',
|
|
variant === 'mobile' ? 'pb-45' : 'mt-0 pb-0',
|
|
]"
|
|
>
|
|
<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 { usePriceWithoutType } from '../../../../utils/usePrice'
|
|
import { price } from '@/utils/price'
|
|
import { getHomeLayoutId } from '../layouts/registry'
|
|
import { resolveMetalDayRangePrices, usePriceChart } from '../composables/usePriceChart'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
variant?: 'mobile' | 'desktop'
|
|
}>(),
|
|
{
|
|
variant: 'mobile',
|
|
}
|
|
)
|
|
|
|
const { selectedChartMetal, selectedMetalChartRatio } = usePriceChart()
|
|
const isBoursecuLayout = computed(() => getHomeLayoutId() === 'boursecu')
|
|
|
|
const rangePrices = computed(() =>
|
|
resolveMetalDayRangePrices({
|
|
price: price.value,
|
|
metal: selectedChartMetal.value,
|
|
isBoursecuLayout: isBoursecuLayout.value,
|
|
metalRatio: selectedMetalChartRatio.value,
|
|
})
|
|
)
|
|
|
|
const highPrice = computed(() => rangePrices.value.high)
|
|
const lowPrice = computed(() => rangePrices.value.low)
|
|
</script>
|