feat: 添加全局菜单组件及相关路由,优化用户界面
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user