modify color and background image in desktop version

This commit is contained in:
MaysWind
2025-08-31 00:20:17 +08:00
parent 8154bd712b
commit 20e2444307
22 changed files with 996 additions and 1278 deletions
+3 -2
View File
@@ -7,7 +7,7 @@
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
<v-col cols="12" md="8" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
@@ -15,7 +15,8 @@
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people4.svg"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people4.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people4-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<v-col cols="12" md="4" class="auth-card d-flex flex-column">
+1 -1
View File
@@ -59,7 +59,7 @@
<v-col cols="12" md="4">
<div class="d-flex align-center">
<div class="me-3">
<v-avatar rounded color="secondary" size="42" class="elevation-1">
<v-avatar rounded color="grey" size="42" class="elevation-1">
<v-icon size="24" :icon="mdiBankOutline"/>
</v-avatar>
</div>
+3 -2
View File
@@ -7,7 +7,7 @@
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
<v-col cols="12" md="8" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
@@ -15,7 +15,8 @@
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people1.svg"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people1.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people1-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<v-col cols="12" md="4" class="auth-card d-flex flex-column">
+3 -2
View File
@@ -7,7 +7,7 @@
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
<v-col cols="12" md="8" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
@@ -15,7 +15,8 @@
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people4.svg"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people4.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people4-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<v-col cols="12" md="4" class="auth-card d-flex flex-column">
+3 -2
View File
@@ -7,7 +7,7 @@
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="4" class="d-none d-md-flex align-center justify-center position-relative">
<v-col cols="12" md="4" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
@@ -15,7 +15,8 @@
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="320px" src="img/desktop/people2.svg"/>
<v-img class="img-with-direction" max-width="320px" src="img/desktop/people2.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="320px" src="img/desktop/people2-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<v-col cols="12" md="8" class="auth-card d-flex align-center justify-center pa-10">
+3 -2
View File
@@ -7,7 +7,7 @@
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
<v-col cols="12" md="8" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
@@ -15,7 +15,8 @@
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people3.svg"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people3.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="600px" src="img/desktop/people3-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<v-col cols="12" md="4" class="auth-card d-flex flex-column">
+3 -2
View File
@@ -7,7 +7,7 @@
</div>
</router-link>
<v-row no-gutters class="auth-wrapper">
<v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
<v-col cols="12" md="8" class="auth-image-background d-none d-md-flex align-center justify-center position-relative">
<div class="d-flex auth-img-footer" v-if="!isDarkMode">
<v-img class="img-with-direction" src="img/desktop/background.svg"/>
</div>
@@ -15,7 +15,8 @@
<v-img class="img-with-direction" src="img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img class="img-with-direction" max-width="320px" src="img/desktop/people2.svg"/>
<v-img class="img-with-direction" max-width="320px" src="img/desktop/people2.svg" v-if="!isDarkMode"/>
<v-img class="img-with-direction" max-width="320px" src="img/desktop/people2-dark.svg" v-else-if="isDarkMode"/>
</div>
</v-col>
<v-col cols="12" md="4" class="auth-card d-flex flex-column">
@@ -1,7 +1,7 @@
<template>
<v-card :class="{ 'disabled': disabled }">
<v-card-text class="d-flex align-center">
<v-avatar color="secondary" size="38">
<v-avatar color="grey" size="38">
<v-icon size="24" :icon="icon" />
</v-avatar>
<span class="font-weight-bold ms-3">{{ title }}</span>
@@ -598,7 +598,7 @@
</template>
<template #item.time="{ item }">
<span>{{ getDisplayDateTime(item) }}</span>
<v-chip class="ms-1" variant="flat" color="secondary" size="x-small"
<v-chip class="ms-1" variant="flat" color="grey" size="x-small"
v-if="item.utcOffset !== currentTimezoneOffsetMinutes">{{ getDisplayTimezone(item) }}</v-chip>
</template>
<template #item.type="{ value }">
@@ -41,7 +41,7 @@
title: 'Transaction Tags',
count: displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-',
icon: mdiTagOutline,
color: 'secondary'
color: 'grey'
},
{
title: 'Transaction Pictures',