modify home page ui

src/Mobile.vue

@@ -46,4 +46,8 @@ body {
 .work-break-all {
     word-break: break-all;
 }
+
+.lab-list-item-error-info div.item-footer {
+    color: var(--f7-input-error-text-color)
+}
 </style>

src/locales/en.js

@@ -75,11 +75,9 @@ export default {
     'Version': 'Version',
     'User': 'User',
     'Application': 'Application',
-    'Home': 'Home',
-    'Journals': 'Journals',
+    'Details': 'Details',
     'Accounts': 'Accounts',
-    'Charts': 'Charts',
-    'New Record': 'New Record',
+    'Statistics': 'Statistics',
     'Settings': 'Settings',
     'Back': 'Back',
     'Username': 'Username',

src/locales/zh_Hans.js

@@ -75,11 +75,9 @@ export default {
     'Version': '版本',
     'User': '用户',
     'Application': '应用',
-    'Home': '首页',
-    'Journals': '流水',
+    'Details': '详情',
     'Accounts': '账户',
-    'Charts': '图表',
-    'New Record': '记一笔',
+    'Statistics': '统计',
     'Settings': '设置',
     'Back': '返回',
     'Username': '用户名',

src/router/mobile.js

@@ -1,10 +1,9 @@
 import userState from "../lib/userstate.js";
 
-import MainPage from '../views/mobile/Main.vue';
-import MainPageHomeTab from '../views/mobile/main/Home.vue';
-
+import HomePage from '../views/mobile/Home.vue';
 import LoginPage from '../views/mobile/Login.vue';
 import SignUpPage from '../views/mobile/Signup.vue';
+
 import SettingsPage from '../views/mobile/Settings.vue';
 import AboutPage from "../views/mobile/About.vue";
 import UserProfilePage from "../views/mobile/users/UserProfile.vue";
@@ -38,15 +37,7 @@ function checkNotLogin(to, from, resolve, reject) {
 const routes = [
     {
         path: '/',
-        component: MainPage,
-        tabs: [
-            {
-                path: '/',
-                id: 'main-tab-home',
-                component: MainPageHomeTab,
-                beforeEnter: checkLogin
-            }
-        ],
+        component: HomePage,
         beforeEnter: checkLogin
     },
     {

src/views/mobile/Home.vue

@@ -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>

src/views/mobile/Main.vue

@@ -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>