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> <template>
<div class="page-container-flex"> <div class="page-container-flex">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<van-nav-bar title="账单" placeholder> <van-nav-bar title="账单" placeholder>
<template #right> <template #right>
@@ -20,7 +21,7 @@
/> />
</template> </template>
</van-nav-bar> </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="balance" />
<van-tab title="邮件" name="email" /> <van-tab title="邮件" name="email" />
<van-tab title="消息" name="message" /> <van-tab title="消息" name="message" />

View File

@@ -38,7 +38,7 @@
</template> </template>
</van-nav-bar> </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"> <van-tab title="支出" :name="BudgetCategory.Expense">
<BudgetSummary <BudgetSummary
v-if="activeTab !== BudgetCategory.Savings" v-if="activeTab !== BudgetCategory.Savings"

View File

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

View File

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

View File

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

View File

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