色彩调整
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 24s
Docker Build & Deploy / Deploy to Production (push) Successful in 10s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s

This commit is contained in:
孙诚
2026-01-13 17:00:44 +08:00
parent 556fc5af20
commit c5c3b56200
25 changed files with 182 additions and 339 deletions

View File

@@ -47,7 +47,7 @@
<!-- 分类 -->
<van-field name="category" label="分类">
<template #input>
<span v-if="!categoryName" style="color: #c8c9cc;">请选择分类</span>
<span v-if="!categoryName" style="color: var(--van-text-color-3);">请选择分类</span>
<span v-else>{{ categoryName }}</span>
</template>
</van-field>

View File

@@ -121,6 +121,6 @@ const handleSave = async (payload) => {
margin-bottom: 16px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #ebedf0;
border: 1px solid var(--van-border-color);
}
</style>

View File

@@ -120,7 +120,7 @@
<van-progress
:percentage="timePercentage"
stroke-width="4"
color="#969799"
color="var(--van-gray-6)"
:show-pivot="false"
/>
<span class="percent">{{ timePercentage }}%</span>
@@ -168,7 +168,7 @@ const props = defineProps({
},
progressColor: {
type: String,
default: '#1989fa'
default: 'var(--van-primary-color)'
},
percentClass: {
type: [String, Object],
@@ -332,7 +332,7 @@ const timePercentage = computed(() => {
.compact-label {
font-size: 12px;
color: #969799;
color: var(--van-text-color-2);
line-height: 1.2;
}
@@ -346,22 +346,22 @@ const timePercentage = computed(() => {
}
.compact-value.warning {
color: #ff976a;
color: var(--van-warning-color);
}
.compact-value.income {
color: #07c160;
color: var(--van-success-color);
}
.expand-icon {
color: #1989fa;
color: var(--van-primary-color);
font-size: 14px;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.collapse-icon {
color: #1989fa;
color: var(--van-primary-color);
font-size: 16px;
cursor: pointer;
}
@@ -386,7 +386,7 @@ const timePercentage = computed(() => {
.card-subtitle {
font-size: 12px;
color: #969799;
color: var(--van-text-color-2);
font-weight: normal;
white-space: nowrap;
overflow: hidden;
@@ -420,7 +420,7 @@ const timePercentage = computed(() => {
:deep(.info-item) .label {
font-size: 12px;
color: #969799;
color: var(--van-text-color-2);
margin-bottom: 2px;
}
@@ -430,11 +430,11 @@ const timePercentage = computed(() => {
}
:deep(.value.expense) {
color: #ee0a24;
color: var(--van-danger-color);
}
:deep(.value.income) {
color: #07c160;
color: var(--van-success-color);
}
.progress-section {
@@ -443,7 +443,7 @@ const timePercentage = computed(() => {
gap: 12px;
margin-bottom: 12px;
font-size: 13px;
color: #646566;
color: var(--van-gray-6);
}
.progress-section :deep(.van-progress) {
@@ -462,12 +462,12 @@ const timePercentage = computed(() => {
}
.percent.warning {
color: #ff976a;
color: var(--van-warning-color);
font-weight: bold;
}
.percent.income {
color: #07c160;
color: var(--van-success-color);
font-weight: bold;
}
@@ -483,26 +483,26 @@ const timePercentage = computed(() => {
.budget-description {
margin-top: 8px;
background-color: #f7f8fa;
background-color: var(--van-background);
border-radius: 4px;
padding: 8px;
}
.description-content {
font-size: 11px;
color: #646566;
color: var(--van-gray-6);
line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
/* @media (prefers-color-scheme: dark) {
.budget-description {
background-color: #2c2c2c;
background-color: var(--van-background-2);
}
.description-content {
color: #969799;
color: var(--van-text-color-2);
}
.collapsed-row .value {
color: #f5f5f5;
color: var(--van-text-color);
}
}
} */
</style>

View File

@@ -40,7 +40,7 @@
</van-field>
<van-field label="相关分类">
<template #input>
<div v-if="form.selectedCategories.length === 0" style="color: #c8c9cc;">可多选分类</div>
<div v-if="form.selectedCategories.length === 0" style="color: var(--van-text-color-3);">可多选分类</div>
<div v-else class="selected-categories">
<span class="ellipsis-text">
{{ form.selectedCategories.join('、') }}
@@ -176,7 +176,7 @@ const getCategoryName = (category) => {
.ellipsis-text {
font-size: 14px;
color: #323233;
color: var(--van-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -185,7 +185,7 @@ const getCategoryName = (category) => {
.no-data {
font-size: 13px;
color: #969799;
color: var(--van-text-color-2);
padding: 8px 16px;
}
</style>

View File

@@ -130,7 +130,7 @@ const formatMoney = (val) => {
justify-content: center;
align-items: center;
font-size: 18px;
color: #c8c9cc;
color: var(--van-gray-5);
cursor: pointer;
transition: all 0.2s;
z-index: 1;
@@ -150,7 +150,7 @@ const formatMoney = (val) => {
}
.nav-arrow.disabled {
color: #f2f3f5;
color: var(--van-gray-3);
cursor: not-allowed;
}
@@ -200,26 +200,26 @@ const formatMoney = (val) => {
.summary-item .label {
font-size: 12px;
color: #969799;
color: var(--van-text-color-2);
margin-bottom: 6px;
}
.summary-item .value {
font-size: 20px;
font-weight: bold;
color: #323233;
color: var(--van-text-color);
}
.summary-item :deep(.value.expense) {
color: #ee0a24;
color: var(--van-danger-color);
}
.summary-item :deep(.value.income) {
color: #07c160;
color: var(--van-success-color);
}
.summary-item :deep(.value.warning) {
color: #ff976a;
color: var(--van-warning-color);
}
.summary-item .unit {
@@ -230,7 +230,7 @@ const formatMoney = (val) => {
.summary-item .sub-info {
font-size: 12px;
color: #c8c9cc;
color: var(--van-text-color-3);
display: flex;
justify-content: center;
align-items: center;
@@ -238,35 +238,35 @@ const formatMoney = (val) => {
}
.summary-item .amount {
color: #646566;
color: var(--van-text-color-2);
}
.summary-item .separator {
color: #c8c9cc;
color: var(--van-text-color-3);
}
.divider {
width: 1px;
height: 24px;
background-color: #ebedf0;
background-color: var(--van-border-color);
margin: 0 4px;
}
@media (prefers-color-scheme: dark) {
/* @media (prefers-color-scheme: dark) {
.nav-arrow:active {
background-color: rgba(255, 255, 255, 0.05);
}
.nav-arrow.disabled {
color: #323233;
color: var(--van-text-color);
}
.summary-item .value {
color: #f5f5f5;
color: var(--van-text-color);
}
.summary-item .amount {
color: #c8c9cc;
color: var(--van-text-color-3);
}
.divider {
background-color: #2c2c2c;
background-color: var(--van-border-color);
}
}
} */
</style>

View File

@@ -91,7 +91,7 @@ const onSubmit = async () => {
.subtitle {
font-size: 14px;
color: #969799;
color: var(--van-text-color-2);
margin: 0;
}
@@ -103,7 +103,7 @@ const onSubmit = async () => {
.no-data {
text-align: center;
color: #969799;
color: var(--van-text-color-2);
width: 100%;
padding: 20px 0;
}

View File

@@ -79,6 +79,6 @@ const handleSuccess = () => {
position: sticky;
top: 0;
z-index: 10;
background-color: #fff;
background-color: var(--van-background-2);
}
</style>

View File

@@ -91,8 +91,8 @@ const hasActions = computed(() => !!slots['header-actions'])
.popup-header-fixed {
flex-shrink: 0;
padding: 16px;
background-color: var(--van-background-2, #f7f8fa);
border-bottom: 1px solid var(--van-border-color, #ebedf0);
background-color: var(--van-background-2);
border-bottom: 1px solid var(--van-border-color);
position: sticky;
top: 0;
z-index: 10;
@@ -121,7 +121,7 @@ const hasActions = computed(() => !!slots['header-actions'])
font-weight: 500;
margin: 0;
text-align: center;
color: var(--van-text-color, #323233);
color: var(--van-text-color);
/*超出长度*/
overflow: hidden;
text-overflow: ellipsis;
@@ -139,7 +139,7 @@ const hasActions = computed(() => !!slots['header-actions'])
.stats-text {
margin: 0;
font-size: 14px;
color: var(--van-text-color-2, #646566);
color: var(--van-text-color-2);
grid-column: 2;
text-align: center;
}
@@ -159,8 +159,8 @@ const hasActions = computed(() => !!slots['header-actions'])
.popup-footer-fixed {
flex-shrink: 0;
border-top: 1px solid var(--van-border-color, #ebedf0);
background-color: var(--van-background-2, #f7f8fa);
border-top: 1px solid var(--van-border-color);
background-color: var(--van-background-2);
padding: 12px 16px;
}
</style>

View File

@@ -627,13 +627,13 @@ defineExpose({
.count-text {
font-size: 13px;
color: #969799;
color: var(--van-text-color-2);
}
.amount-text {
font-size: 14px;
font-weight: 500;
color: #ff976a;
color: var(--van-orange);
}
:deep(.van-cell-group--inset) {

View File

@@ -80,7 +80,7 @@
</span>
<div class="suggestion-apply">应用</div>
</div>
<span v-else-if="!editForm.classify" style="color: #c8c9cc;">请选择交易分类</span>
<span v-else-if="!editForm.classify" style="color: var(--van-gray-5);">请选择交易分类</span>
<span v-else>{{ editForm.classify }}</span>
</div>
</template>
@@ -377,17 +377,18 @@ const handleCandidateSelect = (candidate) => {
display: flex;
align-items: center;
padding: 6px 10px;
background: #ecf9ff;
color: #1989fa;
background: var(--van-active-color);
color: var(--van-primary-color);
border-radius: 8px;
cursor: pointer;
transition: opacity 0.2s;
border: 1px solid rgba(25, 137, 250, 0.1);
border: 1px solid var(--van-primary-color);
width: fit-content;
opacity: 0.1;
}
.suggestion-tip:active {
opacity: 0.7;
opacity: 0.2;
}
.suggestion-icon {
@@ -402,23 +403,12 @@ const handleCandidateSelect = (candidate) => {
.suggestion-apply {
margin-left: 8px;
padding: 0 6px;
background: #1989fa;
color: #fff;
background: var(--van-primary-color);
color: var(--van-white);
border-radius: 4px;
font-size: 10px;
height: 18px;
line-height: 18px;
font-weight: bold;
}
@media (prefers-color-scheme: dark) {
.suggestion-tip {
background: rgba(25, 137, 250, 0.15);
border-color: rgba(25, 137, 250, 0.2);
color: #58a6ff;
}
.suggestion-apply {
background: #58a6ff;
}
}
</style>

View File

@@ -33,7 +33,7 @@
<span v-if="transaction.classify">
分类: {{ transaction.classify }}
</span>
<span v-if="transaction.upsetedClassify && transaction.upsetedClassify !== transaction.classify" style="color: #ff976a">
<span v-if="transaction.upsetedClassify && transaction.upsetedClassify !== transaction.classify" style="color: var(--van-warning-color)">
{{ transaction.upsetedClassify }}
</span>
@@ -74,7 +74,7 @@
退款: {{ formatMoney(transaction.refundAmount) }}
</div>
</div>
<van-icon name="arrow" size="16" color="#c8c9cc" />
<van-icon name="arrow" size="16" color="var(--van-gray-5)" />
</div>
</div>
</div>
@@ -315,12 +315,12 @@ const formatDate = (dateString) => {
.transaction-info {
font-size: 12px;
color: #969799;
color: var(--van-text-color-2);
line-height: 1.6;
}
.original-info {
color: #ff976a;
color: var(--van-orange);
font-style: italic;
display: flex;
align-items: center;
@@ -343,16 +343,16 @@ const formatDate = (dateString) => {
}
.amount.expense {
color: #ee0a24;
color: var(--van-danger-color);
}
.amount.income {
color: #07c160;
color: var(--van-success-color);
}
.balance {
font-size: 12px;
color: #969799;
color: var(--van-text-color-2);
white-space: nowrap;
}