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
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:
@@ -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" />
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -159,4 +159,9 @@ onMounted(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 设置页面容器背景色 */
|
||||||
|
:deep(.van-nav-bar) {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user