modify home page ui

This commit is contained in:
MaysWind
2020-11-06 00:23:31 +08:00
parent f1b1e805ac
commit 73b94aa42a
6 changed files with 47 additions and 59 deletions
+36
View File
@@ -0,0 +1,36 @@
<template>
<f7-page name="home">
<f7-navbar>
<f7-nav-title :title="$t('global.app.title')"></f7-nav-title>
</f7-navbar>
<f7-list media-list class="skeleton-text">
<f7-list-item title="Placehodler"></f7-list-item>
</f7-list>
<f7-toolbar tabbar bottom>
<f7-link href="/details" class="lab-toolbar-link-with-icon" icon-f7="square_list" icon-size="24px" :text="$t('Details')"></f7-link>
<f7-link href="/accounts" class="lab-toolbar-link-with-icon" icon-f7="creditcard" icon-size="24px" :text="$t('Accounts')"></f7-link>
<f7-link href="/new" class="lab-toolbar-icon-only" icon-f7="plus_square" icon-size="36px"></f7-link>
<f7-link href="/statistics" class="lab-toolbar-link-with-icon" icon-f7="chart_pie" icon-size="24px" :text="$t('Statistics')"></f7-link>
<f7-link href="/settings" class="lab-toolbar-link-with-icon" icon-f7="gear_alt" icon-size="24px" :text="$t('Settings')"></f7-link>
</f7-toolbar>
</f7-page>
</template>
<script>
export default {}
</script>
<style>
.lab-toolbar-link-with-icon i+span {
font-size: 11px;
margin-top: 3px;
margin-left: 0;
}
.lab-toolbar-icon-only i {
margin-top: 8px;
margin-left: 0;
}
</style>
-39
View File
@@ -1,39 +0,0 @@
<template>
<f7-page name="home">
<f7-navbar>
<f7-nav-title :title="$t('global.app.title')"></f7-nav-title>
<f7-nav-right>
<f7-link href="/new-record" icon-f7="plus_square" :text="$t('New Record')"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-tabs animated routable>
<f7-tab id="main-tab-home" class="page-content" tab-active></f7-tab>
<f7-tab id="main-tab-journals" class="page-content"></f7-tab>
<f7-tab id="main-tab-accounts" class="page-content"></f7-tab>
<f7-tab id="main-tab-charts" class="page-content"></f7-tab>
</f7-tabs>
<f7-toolbar tabbar bottom>
<f7-link route-tab-id="main-tab-home" href="/" class="lab-toolbar-link-with-icon" icon-f7="house" icon-size="24px" :text="$t('Home')" tab-link-active></f7-link>
<f7-link route-tab-id="main-tab-journals" href="/journals" class="lab-toolbar-link-with-icon" icon-f7="square_list" icon-size="24px" :text="$t('Journals')"></f7-link>
<f7-link route-tab-id="main-tab-accounts" href="/accounts" class="lab-toolbar-link-with-icon" icon-f7="creditcard" icon-size="24px" :text="$t('Accounts')"></f7-link>
<f7-link route-tab-id="main-tab-charts" href="/charts" class="lab-toolbar-link-with-icon" icon-f7="chart_pie" icon-size="24px" :text="$t('Charts')"></f7-link>
<f7-link href="/settings" class="lab-toolbar-link-with-icon" icon-f7="gear_alt" icon-size="24px" :text="$t('Settings')"></f7-link>
</f7-toolbar>
</f7-page>
</template>
<script>
export default {}
</script>
<style>
.lab-toolbar-link-with-icon i+span {
font-size: 11px;
margin-top: 3px;
margin-left: 0;
}
.lab-list-item-error-info div.item-footer {
color: var(--f7-input-error-text-color)
}
</style>