cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Dashboard Coin Info

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-08 23:50:20 +08:00
parent d196c35dc8
commit 96501e15f9
2 changed files with 92 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/charts/PriceMarketChart.vue
View File

@ -28,26 +28,30 @@ const series = computed(() => {
}); });
function changeChart(type: string) { function changeChart(type: string) {
kind.value = type kind.value = type;
} }
</script> </script>
<template> <template>
<div class="tabs tabs-boxed bg-transparent justify-end"> <div class="tabs tabs-boxed bg-transparent justify-end">
<a class="tab mr-2 text-gray-400 uppercase" <a
class="tab text-xs mr-2 text-gray-400 uppercase"
:class="{ 'tab-active': kind === 'price' }" :class="{ 'tab-active': kind === 'price' }"
@click="changeChart('price')"> @click="changeChart('price')"
>
Price Price
</a> </a>
<a class="tab text-gray-400 uppercase" <a
class="tab text-xs text-gray-400 uppercase"
:class="{ 'tab-active': kind === 'volume' }" :class="{ 'tab-active': kind === 'volume' }"
@click="changeChart('volume')"> @click="changeChart('volume')"
>
Volume Volume
</a> </a>
</div> </div>
<VueApexCharts <VueApexCharts
type="area" type="area"
height="261" height="230"
:options="chartConfig" :options="chartConfig"
:series="series" :series="series"
/> />

137
src/modules/[chain]/index.vue
View File

@ -66,27 +66,28 @@ const comLinks = [
<template> <template>
<div> <div>
<VCard v-if="coinInfo && coinInfo.name" class="mb-5"> <div
<VRow> v-if="coinInfo && coinInfo.name"
<VCol md="5"> class="bg-base-100 rounded shadow mb-4"
<VCardItem> >
<VCardTitle> <div class="flex p-4">
<div class="flex-1 mr-10">
<div class="text-xl font-semibold text-main">
{{ coinInfo.name }} (<span class="uppercase">{{ {{ coinInfo.name }} (<span class="uppercase">{{
coinInfo.symbol coinInfo.symbol
}}</span }}</span
>) >)
</VCardTitle> </div>
<VCardSubtitle> <div class="text-xs mt-2">
Rank: Rank:
<div <div
class="badge text-xs badge-error bg-[#fcebea] dark:bg-[#41384d] text-red-400" class="badge text-xs badge-error bg-[#fcebea] dark:bg-[#41384d] text-red-400"
> >
#{{ coinInfo.market_cap_rank }} #{{ coinInfo.market_cap_rank }}
</div> </div>
</VCardSubtitle> </div>
</VCardItem>
<div class="h-[1px] w-full bg-gray-100 dark:bg-[#384059]"></div> <div class="mt-4 flex items-center">
<div class="mt-4 pl-4 flex items-center">
<a <a
v-for="(item, index) of comLinks" v-for="(item, index) of comLinks"
:key="index" :key="index"
@ -97,66 +98,65 @@ const comLinks = [
<span class="ml-1 text-sm uppercase">{{ item?.name }}</span> <span class="ml-1 text-sm uppercase">{{ item?.name }}</span>
</a> </a>
</div> </div>
<VCardItem>
<!-- SECTION upgrade plan banner -->
<div
class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3"
>
<h3 class="plan-details me-3" :class="store.priceColor">
{{ store.priceChange }}
<small>%</small>
</h3>
<VMenu open-on-hover> <div>
<template #activator="{ props }"> <div class="dropdown dropdown-hover w-full mt-[16px] md:mt-[32px]">
<div class="d-flex flex-column align-start" v-bind="props"> <label>
<h3 class="text-base font-weight-semibold"> <div
class="bg-gray-100 dark:bg-[#384059] flex items-center justify-between px-4 py-2 cursor-pointer rounded"
>
<div>
<div
class="font-semibold text-xl text-[#666] dark:text-white"
>
{{ ticker?.market?.name || '' }} {{ ticker?.market?.name || '' }}
</h3> </div>
<span class="text-primary text-xs"> <div class="text-info text-sm">
{{ shortName(ticker?.base, ticker.coin_id) }}/{{ {{ shortName(ticker?.base, ticker.coin_id) }}/{{
shortName(ticker?.target, ticker.target_coin_id) shortName(ticker?.target, ticker.target_coin_id)
}} }}
</span>
</div> </div>
</template> </div>
<VList style="max-height: 300px">
<VListItem <div class="text-right">
v-for="(item, i) in store.coinInfo.tickers" <div
:key="i" class="text-xl font-semibold text-[#666] dark:text-white"
rounded
@click="store.selectTicker(i)"
> >
<template #prepend></template> ${{ ticker.converted_last.usd }}
<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component --> </div>
<VListItemTitle v-text="item.market.name" /> <div class="text-sm" :class="store.priceColor">
<VListItemSubtitle> {{ store.priceChange }}%
</div>
</div>
</div>
</label>
<div class="dropdown-content pt-1">
<div class="h-64 overflow-auto w-full shadow rounded">
<ul class="menu w-full bg-gray-100 rounded dark:bg-[#384059]">
<li
v-for="(item, index) in store.coinInfo.tickers"
:key="index"
@click="store.selectTicker(index)"
>
<div
class="flex items-center justify-between hover:bg-base-100"
>
<div class="text-main text-sm">
{{ shortName(item?.base, item.coin_id) }}/{{ {{ shortName(item?.base, item.coin_id) }}/{{
shortName(item?.target, item.target_coin_id) shortName(item?.target, item.target_coin_id)
}} }}
</VListItemSubtitle> </div>
<template #append>
<span
class="ml-3"
:class="`text-${store.tickerColor(item.trust_score)}`"
>
{{ item.converted_last.usd }}
</span>
</template>
</VListItem>
</VList>
</VMenu>
<VSpacer /> <div class="text-base text-main">
${{ item.converted_last.usd }}
<div class="d-flex align-center">
<sub>
<h6 class="text-xs font-weight-regular">$</h6>
</sub>
<span class="text-h5">{{ ticker.converted_last.usd }}</span>
</div> </div>
</div> </div>
<VSpacer /> </li>
</ul>
</div>
</div>
</div>
<a <a
:color="store.trustColor" :color="store.trustColor"
class="mt-5 text-white btn btn-success w-full flex items-center" class="mt-5 text-white btn btn-success w-full flex items-center"
@ -165,14 +165,13 @@ const comLinks = [
> >
Buy {{ coinInfo.symbol || '' }} Buy {{ coinInfo.symbol || '' }}
</a> </a>
</VCardItem> </div>
</VCol> </div>
<VCol md="7">
<VCardItem> <div class="flex-1 hidden md:block">
<PriceMarketChart /> <PriceMarketChart />
</VCardItem> </div>
</VCol> </div>
</VRow>
<div class="h-[1px] w-full bg-gray-100 dark:bg-[#384059]"></div> <div class="h-[1px] w-full bg-gray-100 dark:bg-[#384059]"></div>
<div class="max-h-[250px] overflow-auto p-4 text-sm"> <div class="max-h-[250px] overflow-auto p-4 text-sm">
<MdEditor <MdEditor
@ -188,7 +187,7 @@ const comLinks = [
{{ tag }} {{ tag }}
</div> </div>
</div> </div>
</VCard> </div>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6"> <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
<div v-for="item in store.stats"> <div v-for="item in store.stats">
@ -216,12 +215,6 @@ const comLinks = [
</div> </div>
</template> </template>
<style lang="scss" scoped>
.card-box {
border: 1px solid rgb(var(--v-theme-primary));
}
</style>
<route> <route>
{ {
meta: { meta: {