style(views): 统一多个视图的导航栏和标签页样式
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 1m0s
Docker Build & Deploy / Deploy to Production (push) Successful in 11s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 2s

调整多个视图的导航栏背景为透明,统一标签页的边距和样式
优化禁用状态的箭头样式,增加指针事件控制
This commit is contained in:
孙诚
2026-01-13 19:11:37 +08:00
parent 6a45f3d67d
commit 6e7a237df9
6 changed files with 24 additions and 6 deletions

View File

@@ -1,5 +1,6 @@
<template>
<div class="page-container-flex">
<!-- 顶部导航栏 -->
<van-nav-bar title="账单" placeholder>
<template #right>
@@ -20,7 +21,7 @@
/>
</template>
</van-nav-bar>
<van-tabs v-model:active="tabActive" animated>
<van-tabs v-model:active="tabActive" type="card" animated style="margin: 12px 0 2px 0;">
<van-tab title="账单" name="balance" />
<van-tab title="邮件" name="email" />
<van-tab title="消息" name="message" />

View File

@@ -38,7 +38,7 @@
</template>
</van-nav-bar>
<van-tabs v-model:active="activeTab" type="card" class="budget-tabs">
<van-tabs v-model:active="activeTab" type="card" class="budget-tabs" animated style="margin: 12px 4px;">
<van-tab title="支出" :name="BudgetCategory.Expense">
<BudgetSummary
v-if="activeTab !== BudgetCategory.Savings"

View File

@@ -179,4 +179,9 @@ const handleResume = async (task) => {
.scroll-content {
padding-bottom: 20px;
}
/* 设置页面容器背景色 */
:deep(.van-nav-bar) {
background: transparent !important;
}
</style>

View File

@@ -49,6 +49,7 @@
<div
class="nav-arrow right"
:class="{ disabled: isCurrentMonth }"
:aria-disabled="isCurrentMonth"
@click.stop="!isCurrentMonth && changeMonth(1)"
>
<van-icon name="arrow" />
@@ -1040,9 +1041,14 @@ onBeforeUnmount(() => {
}
.nav-arrow.disabled {
color: #f2f3f5;
color: #c8c9cc;
cursor: not-allowed;
opacity: 0.3;
opacity: 0.35;
pointer-events: none;
}
.nav-arrow.disabled:active {
background-color: transparent;
}
.date-tag {
@@ -1420,4 +1426,4 @@ onBeforeUnmount(() => {
background: transparent !important;
}
</style>
</style>

View File

@@ -230,7 +230,8 @@ onBeforeUnmount(() => {
background: var(--van-background-2);
padding: 4px 12px;
z-index: 100;
border-bottom: 1px solid var(--van-border-color);
margin-top: 10px;
}
.top-search-bar :deep(.van-search) {

View File

@@ -159,4 +159,9 @@ onMounted(() => {
align-items: center;
height: 200px;
}
/* 设置页面容器背景色 */
:deep(.van-nav-bar) {
background: transparent !important;
}
</style>