feat: 优化预算视图,调整预算摘要组件位置和样式
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 16s
Docker Build & Deploy / Deploy to Production (push) Successful in 8s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 16s
Docker Build & Deploy / Deploy to Production (push) Successful in 8s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
This commit is contained in:
@@ -17,15 +17,16 @@
|
|||||||
</template>
|
</template>
|
||||||
</van-nav-bar>
|
</van-nav-bar>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<van-tabs v-model:active="activeTab" type="card" class="budget-tabs">
|
||||||
|
<van-tab title="支出" :name="BudgetCategory.Expense">
|
||||||
<BudgetSummary
|
<BudgetSummary
|
||||||
v-if="activeTab !== BudgetCategory.Savings"
|
v-if="activeTab !== BudgetCategory.Savings"
|
||||||
:stats="overallStats"
|
:stats="overallStats"
|
||||||
:title="activeTabTitle"
|
:title="activeTabTitle"
|
||||||
:get-value-class="getValueClass"
|
:get-value-class="getValueClass"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<van-tabs v-model:active="activeTab" type="card" class="budget-tabs">
|
|
||||||
<van-tab title="支出" :name="BudgetCategory.Expense">
|
|
||||||
<div class="scroll-content">
|
<div class="scroll-content">
|
||||||
<div class="budget-list">
|
<div class="budget-list">
|
||||||
<template v-if="expenseBudgets?.length > 0">
|
<template v-if="expenseBudgets?.length > 0">
|
||||||
@@ -73,6 +74,12 @@
|
|||||||
</van-tab>
|
</van-tab>
|
||||||
|
|
||||||
<van-tab title="收入" :name="BudgetCategory.Income">
|
<van-tab title="收入" :name="BudgetCategory.Income">
|
||||||
|
<BudgetSummary
|
||||||
|
v-if="activeTab !== BudgetCategory.Savings"
|
||||||
|
:stats="overallStats"
|
||||||
|
:title="activeTabTitle"
|
||||||
|
:get-value-class="getValueClass"
|
||||||
|
/>
|
||||||
<div class="scroll-content">
|
<div class="scroll-content">
|
||||||
<div class="budget-list">
|
<div class="budget-list">
|
||||||
<template v-if="incomeBudgets?.length > 0">
|
<template v-if="incomeBudgets?.length > 0">
|
||||||
@@ -121,16 +128,18 @@
|
|||||||
</van-tab>
|
</van-tab>
|
||||||
|
|
||||||
<van-tab title="存款" :name="BudgetCategory.Savings">
|
<van-tab title="存款" :name="BudgetCategory.Savings">
|
||||||
<div class="scroll-content">
|
<div class="scroll-content" style="padding-top:4px">
|
||||||
<div class="budget-list">
|
<div class="budget-list">
|
||||||
<template v-if="savingsBudgets?.length > 0">
|
<template v-if="savingsBudgets?.length > 0">
|
||||||
<van-swipe-cell v-for="budget in savingsBudgets" :key="budget.id">
|
|
||||||
<BudgetCard
|
<BudgetCard
|
||||||
|
v-for="budget in savingsBudgets"
|
||||||
|
:key="budget.id"
|
||||||
:budget="budget"
|
:budget="budget"
|
||||||
progress-color="#07c160"
|
progress-color="#07c160"
|
||||||
:percent-class="{ 'income': (budget.current / budget.limit) >= 1 }"
|
:percent-class="{ 'income': (budget.current / budget.limit) >= 1 }"
|
||||||
:period-label="getPeriodLabel(budget.type)"
|
:period-label="getPeriodLabel(budget.type)"
|
||||||
status-tag-text="积累中"
|
status-tag-text="积累中"
|
||||||
|
style="margin: 0 12px 12px;"
|
||||||
@toggle-stop="handleToggleStop"
|
@toggle-stop="handleToggleStop"
|
||||||
@switch-period="(dir) => handleSwitchPeriod(budget, dir)"
|
@switch-period="(dir) => handleSwitchPeriod(budget, dir)"
|
||||||
>
|
>
|
||||||
@@ -159,10 +168,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</BudgetCard>
|
</BudgetCard>
|
||||||
<template #right>
|
|
||||||
<van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
|
|
||||||
</template>
|
|
||||||
</van-swipe-cell>
|
|
||||||
</template>
|
</template>
|
||||||
<van-empty v-else description="暂无存款计划" />
|
<van-empty v-else description="暂无存款计划" />
|
||||||
</div>
|
</div>
|
||||||
@@ -360,6 +365,7 @@ const handleToggleStop = async (budget) => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.van-tabs__content) {
|
:deep(.van-tabs__content) {
|
||||||
|
|||||||
Reference in New Issue
Block a user