zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add background img for dark theme

Browse Source
This commit is contained in:
MaysWind
2023-07-06 01:07:57 +08:00
parent 0c5cabbd79
commit 937f8723ed
3 changed files with 44 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/img/desktop/background-dark.svg
+8
View File
@@ -0,0 +1,8 @@
<?xml version="1.0"?>
<svg width="750" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>
<path d="m2.38122,215.61524l748.61878,-113.11523l0,197.99999l-750,0l1.38122,-84.88476z" fill="#111111" id="svg_3" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="0" stroke-width="null"/>
<g id="BACKGROUND"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 449 B

src/views/desktop/LoginPage.vue
+18 -2
View File
@@ -6,9 +6,12 @@
</div>
<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">
<div class="d-flex auth-img-footer">
<div class="d-flex auth-img-footer" v-if="currentTheme !== 'dark'">
<v-img src="/img/desktop/background.svg"/>
</div>
<div class="d-flex auth-img-footer" v-if="currentTheme === 'dark'">
<v-img src="/img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img max-width="600px" src="/img/desktop/people1.svg"/>
</div>
@@ -145,6 +148,8 @@
</template>
<script>
import { useTheme } from 'vuetify';
import { mapStores } from 'pinia';
import { useRootStore } from '@/stores/index.js';
import { useSettingsStore } from '@/stores/setting.js';
@@ -180,7 +185,6 @@ export default {
}
};
},
computed: {
...mapStores(useRootStore, useSettingsStore, useExchangeRatesStore),
version() {
@@ -202,6 +206,11 @@ export default {
return !this.passcode;
}
},
currentTheme: {
get: function () {
return this.globalTheme.global.name.value;
}
},
currentLanguageName() {
const currentLocale = this.$i18n.locale;
let lang = this.$locale.getLanguageInfo(currentLocale);
@@ -213,6 +222,13 @@ export default {
return lang.displayName;
}
},
setup() {
const theme = useTheme();
return {
globalTheme: theme
};
},
methods: {
login() {
const self = this;
src/views/desktop/UnlockPage.vue
+18 -1
View File
@@ -6,9 +6,12 @@
</div>
<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">
<div class="d-flex auth-img-footer">
<div class="d-flex auth-img-footer" v-if="currentTheme !== 'dark'">
<v-img src="/img/desktop/background.svg"/>
</div>
<div class="d-flex auth-img-footer" v-if="currentTheme === 'dark'">
<v-img src="/img/desktop/background-dark.svg"/>
</div>
<div class="d-flex align-center justify-center w-100 pt-10">
<v-img max-width="600px" src="/img/desktop/people3.svg"/>
</div>
@@ -92,6 +95,8 @@
</template>
<script>
import { useTheme } from 'vuetify';
import { mapStores } from 'pinia';
import { useRootStore } from '@/stores/index.js';
import { useSettingsStore } from '@/stores/setting.js';
@@ -122,6 +127,11 @@ export default {
&& this.$user.getWebAuthnCredentialId()
&& webauthn.isSupported();
},
currentTheme: {
get: function () {
return this.globalTheme.global.name.value;
}
},
currentLanguageName() {
const currentLocale = this.$i18n.locale;
let lang = this.$locale.getLanguageInfo(currentLocale);
@@ -133,6 +143,13 @@ export default {
return lang.displayName;
}
},
setup() {
const theme = useTheme();
return {
globalTheme: theme
};
},
methods: {
unlockByWebAuthn() {
const self = this;