modify style

This commit is contained in:
MaysWind
2024-04-05 03:16:27 +08:00
parent 4a16b82700
commit 2a2cb3acc9
35 changed files with 307 additions and 160 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div>
<v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab">
<v-tabs show-arrows v-model="activeTab">
<v-tab value="basicSetting" @click="pushRouter('basicSetting')">
<v-icon size="20" start :icon="icons.basicSetting"/>
{{ $t('Basic') }}
@@ -5,13 +5,14 @@
<template #title>
<div class="d-flex align-center">
<span>{{ $t('Data Management') }}</span>
<v-btn density="compact" color="default" variant="text"
class="ml-2" :icon="true"
v-if="!loadingDataStatistics" @click="reloadUserDataStatistics(true)">
<v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" :loading="loadingDataStatistics" @click="reloadUserDataStatistics(true)">
<template #loader>
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
</v-btn>
<v-progress-circular indeterminate size="20" class="ml-3" v-if="loadingDataStatistics"></v-progress-circular>
</div>
</template>
@@ -27,8 +28,8 @@
<div class="d-flex flex-column">
<span class="text-caption">{{ $t('Transaction') }}</span>
<v-skeleton-loader class="skeleton-no-margin pt-3 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
<span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCount : '-' }}</span>
<v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
<span class="text-xl" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCount : '-' }}</span>
</div>
</div>
</v-col>
@@ -42,8 +43,8 @@
<div class="d-flex flex-column">
<span class="text-caption">{{ $t('Accounts') }}</span>
<v-skeleton-loader class="skeleton-no-margin pt-3 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
<span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalAccountCount : '-' }}</span>
<v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
<span class="text-xl" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalAccountCount : '-' }}</span>
</div>
</div>
</v-col>
@@ -57,8 +58,8 @@
<div class="d-flex flex-column">
<span class="text-caption">{{ $t('Transaction Categories') }}</span>
<v-skeleton-loader class="skeleton-no-margin pt-3 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
<span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCategoryCount : '-' }}</span>
<v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
<span class="text-xl" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCategoryCount : '-' }}</span>
</div>
</div>
</v-col>
@@ -72,8 +73,8 @@
<div class="d-flex flex-column">
<span class="text-caption">{{ $t('Transaction Tags') }}</span>
<v-skeleton-loader class="skeleton-no-margin pt-3 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
<span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-' }}</span>
<v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
<span class="text-xl" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-' }}</span>
</div>
</div>
</v-col>
@@ -77,23 +77,24 @@
<template #title>
<div class="d-flex align-center">
<span>{{ $t('Device & Sessions') }}</span>
<v-btn density="compact" color="default" variant="text"
class="ml-2" :icon="true"
v-if="!loadingSession" @click="reloadSessions">
<v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" :loading="loadingSession" @click="reloadSessions">
<template #loader>
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
</v-btn>
<v-progress-circular indeterminate size="20" class="ml-3" v-if="loadingSession"></v-progress-circular>
</div>
</template>
<v-table class="table-striped text-no-wrap" :hover="!loadingSession">
<thead>
<tr>
<th class="text-uppercase">{{ $t('Type') }}</th>
<th class="text-uppercase">{{ $t('Device Info') }}</th>
<th class="text-uppercase">{{ $t('Last Activity Time') }}</th>
<th class="text-uppercase text-right">
<th>{{ $t('Type') }}</th>
<th>{{ $t('Device Info') }}</th>
<th>{{ $t('Last Activity Time') }}</th>
<th class="text-right">
<v-btn density="comfortable" color="error" variant="tonal"
:disabled="sessions.length < 2 || loadingSession"
@click="revokeAllSessions">
@@ -84,7 +84,7 @@
<template #title>
<span>{{ $t('Backup Code') }}</span>
<v-btn id="copy-to-clipboard-icon" ref="copyToClipboardIcon"
density="compact" color="default" variant="text"
density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true">
<v-icon :icon="icons.copy" size="20" />
<v-tooltip activator="parent">{{ $t('Copy') }}</v-tooltip>
@@ -349,4 +349,8 @@ export default {
.backup-code {
font-family: monospace;
}
.backup-code textarea {
resize: none;
}
</style>