feat: 添加全局菜单组件及相关路由,优化用户界面
This commit is contained in:
46
src/views/global-menu/components/issuing-asset.vue
Normal file
46
src/views/global-menu/components/issuing-asset.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<script lang='ts' setup>
|
||||
import { calculatorOutline, documentTextOutline, fingerPrintOutline, personOutline } from "ionicons/icons";
|
||||
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ion-label class="text-md font-semibold">
|
||||
{{ t("asset.issue.issuingAsset") }}
|
||||
</ion-label>
|
||||
<div class="grid grid-cols-4 mt-5">
|
||||
<div class="col-span-1 flex-col-center gap-2">
|
||||
<ion-icon :icon="personOutline" />
|
||||
<div class="text-xs">
|
||||
{{ t("asset.issue.myCompany") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-1 flex-col-center gap-2" @click="$router.push('/issue/issuing-apply')">
|
||||
<ion-icon :icon="documentTextOutline" />
|
||||
<div class="text-xs">
|
||||
{{ t("asset.issue.issuingApply") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-1 flex-col-center gap-2">
|
||||
<ion-icon :icon="calculatorOutline" />
|
||||
<div class="text-xs">
|
||||
{{ t("asset.issue.audit") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-1 flex-col-center gap-2">
|
||||
<ion-icon :icon="fingerPrintOutline" />
|
||||
<div class="text-xs">
|
||||
{{ t("asset.issue.supervision") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped>
|
||||
ion-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
</style>
|
||||
68
src/views/global-menu/components/my-revenue.vue
Normal file
68
src/views/global-menu/components/my-revenue.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<script lang='ts' setup>
|
||||
import { calendarOutline, listOutline, timeOutline, walletOutline } from "ionicons/icons";
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
function navigateToTotal() {
|
||||
router.push("/revenue/total");
|
||||
}
|
||||
|
||||
function navigateToMonthly() {
|
||||
router.push("/revenue/monthly");
|
||||
}
|
||||
|
||||
function navigateToPending() {
|
||||
router.push("/revenue/pending");
|
||||
}
|
||||
|
||||
function navigateToRecords() {
|
||||
router.push("/revenue/records");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ion-label class="text-md font-semibold">
|
||||
{{ t("asset.revenue.myRevenue") }}
|
||||
</ion-label>
|
||||
<div class="grid grid-cols-4 mt-5">
|
||||
<div
|
||||
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
|
||||
@click="navigateToTotal"
|
||||
>
|
||||
<ion-icon :icon="walletOutline" class="text-2xl text-primary" />
|
||||
<div class="text-xs">
|
||||
{{ t("asset.revenue.totalRevenue") }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
|
||||
@click="navigateToMonthly"
|
||||
>
|
||||
<ion-icon :icon="calendarOutline" class="text-2xl text-primary" />
|
||||
<div class="text-xs">
|
||||
{{ t("asset.revenue.monthlyRevenue") }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
|
||||
@click="navigateToPending"
|
||||
>
|
||||
<ion-icon :icon="timeOutline" class="text-2xl text-primary" />
|
||||
<div class="text-xs">
|
||||
{{ t("asset.revenue.pendingRevenue") }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
|
||||
@click="navigateToRecords"
|
||||
>
|
||||
<ion-icon :icon="listOutline" class="text-2xl text-primary" />
|
||||
<div class="text-xs">
|
||||
{{ t("asset.revenue.revenueDetails") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
40
src/views/global-menu/components/trade-settings.vue
Normal file
40
src/views/global-menu/components/trade-settings.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<script lang='ts' setup>
|
||||
import { cardOutline, documentOutline, documentTextOutline } from "ionicons/icons";
|
||||
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ion-label class="text-md font-semibold">
|
||||
{{ t('trade.title') }}
|
||||
</ion-label>
|
||||
<div class="grid grid-cols-4 mt-5">
|
||||
<div class="col-span-1 flex-col-center gap-2" @click="$router.push('/trade-settings/bank-management')">
|
||||
<ion-icon :icon="cardOutline" />
|
||||
<div class="text-xs">
|
||||
{{ t('trade.settings.bankManagement') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-1 flex-col-center gap-2" @click="$router.push('/trade-settings/my-subscribe')">
|
||||
<ion-icon :icon="documentOutline" />
|
||||
<div class="text-xs">
|
||||
{{ t('trade.settings.mySubscribe') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-1 flex-col-center gap-2" @click="$router.push('/trade-settings/my-issues')">
|
||||
<ion-icon :icon="documentTextOutline" />
|
||||
<div class="text-xs">
|
||||
{{ t('trade.settings.myIssues') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped>
|
||||
ion-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
</style>
|
||||
27
src/views/global-menu/index.vue
Normal file
27
src/views/global-menu/index.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script lang='ts' setup>
|
||||
import UserInfo from "../user/components/user-info.vue";
|
||||
import IssuingAsset from "./components/issuing-asset.vue";
|
||||
import MyRevenue from "./components/my-revenue.vue";
|
||||
import TradeSettings from "./components/trade-settings.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ion-page>
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="ui-toolbar">
|
||||
<ui-back-button slot="start" text="" />
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content :fullscreen="true" class="ion-padding">
|
||||
<UserInfo />
|
||||
<div class="h-px w-full bg-text-900 my-5" />
|
||||
<div class="flex flex-col gap-10 mt-10">
|
||||
<IssuingAsset />
|
||||
<MyRevenue />
|
||||
<TradeSettings />
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped></style>
|
||||
@@ -8,12 +8,9 @@ import Rwa from "./components/rwa.vue";
|
||||
<ion-page>
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="ui-toolbar">
|
||||
<ion-button slot="start" fill="clear">
|
||||
<ion-button slot="start" fill="clear" class="z-1" @click="$router.push('/global-menu')">
|
||||
<IconParkOutlineApplicationMenu slot="icon-only" />
|
||||
</ion-button>
|
||||
<ion-button slot="end" fill="clear">
|
||||
<!-- <ui-avatar slot="icon-only" class="w-10 h-10" style="--padding: 8px" /> -->
|
||||
</ion-button>
|
||||
<ion-title>首页</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
@@ -9,11 +9,11 @@ const { fundingBalances, totalAssetValue } = storeToRefs(walletStore);
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ion-label class="text-xs font-medium text-text-300">
|
||||
<div class="text-md font-semibold my-4">
|
||||
资产分布
|
||||
</ion-label>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mt-2">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="asset-card">
|
||||
<div class="text-xs text-text-400 font-semibold flex items-center gap-1">
|
||||
<SolarDollarMinimalisticBoldDuotone />
|
||||
@@ -34,9 +34,10 @@ const { fundingBalances, totalAssetValue } = storeToRefs(walletStore);
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-label class="text-xs font-medium text-text-300">
|
||||
<div class="text-md font-semibold my-4">
|
||||
资产
|
||||
</ion-label>
|
||||
</div>
|
||||
|
||||
<ion-list lines="none" class="space-y-5 mt-2!">
|
||||
<ion-item v-for="asset, i in fundingBalances" :key="i" class="">
|
||||
<div class="flex items-center space-x-3 flex-1">
|
||||
|
||||
@@ -9,7 +9,7 @@ const { userProfile } = storeToRefs(userStore);
|
||||
<template>
|
||||
<div class="user-info-container">
|
||||
<div class="user-info" @click="$router.push('/user/settings')">
|
||||
<ui-avatar class="size-18" />
|
||||
<ui-avatar class="size-14" />
|
||||
<div>
|
||||
<div class="user-name">
|
||||
{{ userProfile?.user?.email }}
|
||||
|
||||
@@ -39,7 +39,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 w-full justify-around">
|
||||
<div class="flex gap-2 w-full justify-around mt-2">
|
||||
<div id="open-recharge-modal" class="flex-col-center">
|
||||
<ion-button expand="full" color="success" shape="round" class="w-12 h-12">
|
||||
<IcRoundArrowCircleDown slot="icon-only" />
|
||||
|
||||
@@ -64,9 +64,9 @@ async function handleScan() {
|
||||
<UserInfo />
|
||||
<WalletCard />
|
||||
<Asset />
|
||||
<IssuingAsset />
|
||||
<!-- <IssuingAsset />
|
||||
<MyRevenue />
|
||||
<TradeSettings />
|
||||
<TradeSettings /> -->
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
|
||||
Reference in New Issue
Block a user