modify account list page style

This commit is contained in:
MaysWind
2020-11-11 00:18:36 +08:00
parent b200d12054
commit 9f328402d8
3 changed files with 51 additions and 27 deletions
+2
View File
@@ -245,6 +245,8 @@ export default {
'Disable': 'Disable', 'Disable': 'Disable',
'Disabled': 'Disabled', 'Disabled': 'Disabled',
'Version': 'Version', 'Version': 'Version',
'Edit': 'Edit',
'Delete': 'Delete',
'Search': 'Search', 'Search': 'Search',
'User': 'User', 'User': 'User',
'Application': 'Application', 'Application': 'Application',
+2
View File
@@ -245,6 +245,8 @@ export default {
'Disable': '禁用', 'Disable': '禁用',
'Disabled': '禁用', 'Disabled': '禁用',
'Version': '版本', 'Version': '版本',
'Edit': '编辑',
'Delete': '删除',
'Search': '搜索', 'Search': '搜索',
'User': '用户', 'User': '用户',
'Application': '应用', 'Application': '应用',
+47 -27
View File
@@ -8,36 +8,51 @@
</f7-nav-right> </f7-nav-right>
</f7-navbar> </f7-navbar>
<f7-block class="skeleton-text" v-if="loading"> <f7-card class="skeleton-text" v-if="loading">
<f7-block-title>Account Category</f7-block-title> <f7-card-header>Account Category</f7-card-header>
<f7-list media-list> <f7-card-content :padding="false">
<f7-list-item title="Account Name" after="0.00 USD"></f7-list-item> <f7-list>
</f7-list> <f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
</f7-block> </f7-list>
</f7-card-content>
</f7-card>
<f7-block class="skeleton-text" v-if="loading"> <f7-card class="skeleton-text" v-if="loading">
<f7-block-title>Account Category 2</f7-block-title> <f7-card-header>Account Category 2</f7-card-header>
<f7-list media-list> <f7-card-content :padding="false">
<f7-list-item title="Account Name" after="0.00 USD"></f7-list-item> <f7-list>
<f7-list-item title="Account Name 2" after="0.00 USD"></f7-list-item> <f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
</f7-list> <f7-list-item title="Account Name 2" after="0.00 USD"></f7-list-item>
</f7-block> </f7-list>
</f7-card-content>
</f7-card>
<f7-block class="skeleton-text" v-if="loading"> <f7-card class="skeleton-text" v-if="loading">
<f7-block-title>Account Category 3</f7-block-title> <f7-card-header>Account Category 3</f7-card-header>
<f7-list media-list> <f7-card-content :padding="false">
<f7-list-item title="Account Name" after="0.00 USD"></f7-list-item> <f7-list>
<f7-list-item title="Account Name 2" after="0.00 USD"></f7-list-item> <f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
</f7-list> <f7-list-item title="Account Name 2" after="0.00 USD"></f7-list-item>
</f7-block> </f7-list>
</f7-card-content>
</f7-card>
<f7-block v-for="accountCategory in usedAccountCategories" :key="accountCategory.id"> <f7-card v-for="accountCategory in usedAccountCategories" :key="accountCategory.id">
<f7-block-title>{{ $t(accountCategory.name) }}</f7-block-title> <f7-card-header>{{ $t(accountCategory.name) }}</f7-card-header>
<f7-list media-list> <f7-card-content :padding="false">
<f7-list-item v-for="account in accounts[accountCategory.id]" :key="account.id" <f7-list>
:title="account.name" :after="account.balance | currency(account.currency)"></f7-list-item> <f7-list-item v-for="account in accounts[accountCategory.id]" :key="account.id"
</f7-list> :title="account.name" :after="account.balance | currency(account.currency)"
</f7-block> link="#" swipeout
>
<f7-swipeout-actions right>
<f7-swipeout-button color="orange" :text="$t('Edit')" @click="edit(account)"></f7-swipeout-button>
<f7-swipeout-button color="red" :text="$t('Delete')" @click="remove(account)"></f7-swipeout-button>
</f7-swipeout-actions>
</f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
</f7-page> </f7-page>
</template> </template>
@@ -109,7 +124,12 @@ export default {
}); });
}, },
methods: { methods: {
edit() {
},
remove() {
}
} }
}; };
</script> </script>