feat: 添加最近记录和收益来源组件，更新总览页面以集成新组件
This commit is contained in:
@@ -38,4 +38,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang='css' scoped></style>
|
<style lang='css' scoped>
|
||||||
|
h4 {
|
||||||
|
font-size: var(--title-font-size);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
110
src/views/income/total/components/recent.vue
Normal file
110
src/views/income/total/components/recent.vue
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
<script lang='ts' setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ion-list>
|
||||||
|
<ion-list-header>
|
||||||
|
<ion-label>
|
||||||
|
<h4>最近记录</h4>
|
||||||
|
</ion-label>
|
||||||
|
<ion-button class="text-sm">
|
||||||
|
查看全部
|
||||||
|
</ion-button>
|
||||||
|
</ion-list-header>
|
||||||
|
<ion-item>
|
||||||
|
<div class="flex justify-between w-full items-center py-4">
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="text-sm font-medium">
|
||||||
|
分红收益
|
||||||
|
</div>
|
||||||
|
<ion-badge class="text-xs p-1" color="success">
|
||||||
|
已完成
|
||||||
|
</ion-badge>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm font-medium">
|
||||||
|
旧金山商业地产
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-text-400">
|
||||||
|
SF-002
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<div class="text-base font-semibold">
|
||||||
|
{{ formatAmountWithSplit(520.5) }}
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-text-400">
|
||||||
|
今天
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<div class="flex justify-between w-full items-center py-4">
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="text-sm font-medium">
|
||||||
|
分红收益
|
||||||
|
</div>
|
||||||
|
<ion-badge class="text-xs p-1" color="success">
|
||||||
|
已完成
|
||||||
|
</ion-badge>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm font-medium">
|
||||||
|
旧金山商业地产
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-text-400">
|
||||||
|
SF-002
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<div class="text-base font-semibold">
|
||||||
|
{{ formatAmountWithSplit(520.5) }}
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-text-400">
|
||||||
|
今天
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<div class="flex justify-between w-full items-center py-4">
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="text-sm font-medium">
|
||||||
|
分红收益
|
||||||
|
</div>
|
||||||
|
<ion-badge class="text-xs p-1" color="success">
|
||||||
|
已完成
|
||||||
|
</ion-badge>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm font-medium">
|
||||||
|
旧金山商业地产
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-text-400">
|
||||||
|
SF-002
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<div class="text-base font-semibold">
|
||||||
|
{{ formatAmountWithSplit(520.5) }}
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-text-400">
|
||||||
|
今天
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang='css' scoped>
|
||||||
|
h4 {
|
||||||
|
font-size: var(--title-font-size);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
ion-badge {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
95
src/views/income/total/components/revenue-source.vue
Normal file
95
src/views/income/total/components/revenue-source.vue
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<script lang='ts' setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h4>收益来源</h4>
|
||||||
|
<div class="card">
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-2 h-2 bg-green-700 rounded-full" />
|
||||||
|
<div class="text-sm font-semibold">
|
||||||
|
分红收益
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-base font-semibold">
|
||||||
|
{{ formatAmountWithSplit(85321.32) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-2 h-2 " />
|
||||||
|
<div class="text-xs">
|
||||||
|
125项
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-text-200">
|
||||||
|
69.42%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-2 h-2 bg-gray-700 rounded-full" />
|
||||||
|
<div class="text-sm font-semibold">
|
||||||
|
资产收益
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-base font-semibold">
|
||||||
|
{{ formatAmountWithSplit(32642.6) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-2 h-2 " />
|
||||||
|
<div class="text-xs">
|
||||||
|
45项
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-text-200">
|
||||||
|
25.54%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-2 h-2 bg-yellow-500 rounded-full" />
|
||||||
|
<div class="text-sm font-semibold">
|
||||||
|
交易收益
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-base font-semibold">
|
||||||
|
{{ formatAmountWithSplit(8110.4) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-2 h-2 " />
|
||||||
|
<div class="text-xs">
|
||||||
|
89项
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-text-200">
|
||||||
|
5.04%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang='css' scoped>
|
||||||
|
@reference "tailwindcss";
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: var(--title-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
@apply bg-(--ion-text-color-step-950) rounded-xl p-3 mt-3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -56,4 +56,8 @@ useTradingView(tradingViewInst, {
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang='css' scoped></style>
|
<style lang='css' scoped>
|
||||||
|
h4 {
|
||||||
|
font-size: var(--title-font-size);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -2,6 +2,8 @@
|
|||||||
import type { RefresherCustomEvent } from "@ionic/vue";
|
import type { RefresherCustomEvent } from "@ionic/vue";
|
||||||
import { mockClient } from "@/api";
|
import { mockClient } from "@/api";
|
||||||
import Overview from "./components/overview.vue";
|
import Overview from "./components/overview.vue";
|
||||||
|
import Recent from "./components/recent.vue";
|
||||||
|
import RevenueSource from "./components/revenue-source.vue";
|
||||||
import Trend from "./components/trend.vue";
|
import Trend from "./components/trend.vue";
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
@@ -44,10 +46,18 @@ onMounted(() => {
|
|||||||
<ion-refresher-content />
|
<ion-refresher-content />
|
||||||
</ion-refresher>
|
</ion-refresher>
|
||||||
|
|
||||||
<div>
|
<div class="container">
|
||||||
<Overview />
|
<Overview />
|
||||||
<Trend />
|
<Trend />
|
||||||
|
<RevenueSource />
|
||||||
|
<Recent />
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-page>
|
</ion-page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style lang='css' scoped>
|
||||||
|
.container {
|
||||||
|
--title-font-size: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user