74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import type { RefresherCustomEvent } from "@ionic/vue";
|
|
import IconParkOutlineTransactionOrder from "~icons/icon-park-outline/transaction-order";
|
|
import RwaTab from "./components/rwa-tab.vue";
|
|
import TokenizedTab from "./components/tokenized-tab.vue";
|
|
|
|
const { t } = useI18n();
|
|
const rwaInst = useTemplateRef<InstanceType<typeof RwaTab>>("rwaInst");
|
|
const tokenizedInst = useTemplateRef<InstanceType<typeof TokenizedTab>>("tokenizedInst");
|
|
|
|
async function handleRefresh(event: RefresherCustomEvent) {
|
|
await rwaInst.value?.handleRefresh();
|
|
await tokenizedInst.value?.handleRefresh();
|
|
setTimeout(() => {
|
|
event.target.complete();
|
|
}, 500);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header class="ion-no-border">
|
|
<ion-toolbar class="ion-toolbar">
|
|
<ion-title>{{ t('market.title') }}</ion-title>
|
|
<ion-buttons slot="end">
|
|
<ion-button router-link="/market/orders">
|
|
<IconParkOutlineTransactionOrder class="text-md" />
|
|
</ion-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
|
|
<!-- <ion-toolbar class="ion-toolbar px-3">
|
|
<ion-searchbar :placeholder="t('market.search.placeholder')" />
|
|
</ion-toolbar> -->
|
|
</ion-header>
|
|
<ion-content :fullscreen="true" class="ion-padding">
|
|
<ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
|
|
<ion-refresher-content />
|
|
</ion-refresher>
|
|
|
|
<ui-tabs type="segment" class="tabs" size="small">
|
|
<ui-tab-pane name="rwa" title="数字化产品">
|
|
<RwaTab ref="rwaInst" />
|
|
</ui-tab-pane>
|
|
<ui-tab-pane name="tokenized" title="代币化产品">
|
|
<TokenizedTab ref="tokenizedInst" />
|
|
</ui-tab-pane>
|
|
</ui-tabs>
|
|
</ion-content>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
ion-searchbar {
|
|
padding: 0;
|
|
}
|
|
:deep(.tabs) .ui-tabs__nav-wrapper {
|
|
display: flex;
|
|
margin: 0 auto;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
}
|
|
:deep(.tabs) .ui-tabs__nav {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
:deep(.tabs) .ui-tab--segment {
|
|
font-size: 13px;
|
|
padding: 6px !important;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
</style>
|