.

src/components/AppBar.vue

@@ -38,12 +38,12 @@ export default {
             show: false,
             showPopover: false,
             actions: [
-                { text: '首页', icon: require('@assets/menu1.png'), value: '/home' },
-                { text: '发现', icon: require('@assets/menu2.png'), value: '/discover' },
-                { text: '藏品室', icon: require('@assets/menu3.png'), value: '/store' },
-                { text: '我的', icon: require('@assets/menu4.png'), value: '/mine' }
+                { text: '首页', icon: require('@assets/tabbar_icon_01bai.png'), value: '/home' },
+                { text: '探索', icon: require('@assets/tabbar_icon_02bai.png'), value: '/discover' },
+                { text: '库房', icon: require('@assets/tabbar_icon_03bai.png'), value: '/store' },
+                { text: '我的', icon: require('@assets/tabbar_icon_04bai.png'), value: '/mine' }
             ],
-            tabColor: ''
+            tabColor: '#15152D'
         };
     },
     computed: {
@@ -58,19 +58,23 @@ export default {
             } else {
                 this.show = true;
             }
-            if (this.$route.meta.tabColor) {
-                if (window.cordova && StatusBar && StatusBar.isVisible) {
-                    StatusBar.backgroundColorByHexString(this.$route.meta.tabColor);
-                    StatusBar.styleLightContent();
-                }
-                this.tabColor = this.$route.meta.tabColor;
-            } else {
-                if (window.cordova && StatusBar && StatusBar.isVisible) {
-                    StatusBar.backgroundColorByHexString('#ffffff');
-                    StatusBar.styleDefault();
-                }
-                this.tabColor = '';
+            if (window.cordova && StatusBar && StatusBar.isVisible) {
+                StatusBar.backgroundColorByHexString(this.$route.meta.tabColor);
+                StatusBar.styleLightContent();
             }
+            // if (this.$route.meta.tabColor) {
+            //     if (window.cordova && StatusBar && StatusBar.isVisible) {
+            //         StatusBar.backgroundColorByHexString(this.$route.meta.tabColor);
+            //         StatusBar.styleLightContent();
+            //     }
+            //     this.tabColor = this.$route.meta.tabColor;
+            // } else {
+            //     if (window.cordova && StatusBar && StatusBar.isVisible) {
+            //         StatusBar.backgroundColorByHexString('#ffffff');
+            //         StatusBar.styleDefault();
+            //     }
+            //     this.tabColor = '';
+            // }
         },
         tabColor() {
             this.$nextTick(() => {
@@ -84,6 +88,10 @@ export default {
         }
     },
     mounted() {
+        if (window.cordova && StatusBar && StatusBar.isVisible) {
+            StatusBar.backgroundColorByHexString(this.$route.meta.tabColor);
+            StatusBar.styleLightContent();
+        }
         if (this.$route.meta.menuPage) {
             this.show = false;
         } else {
@@ -119,4 +127,7 @@ export default {
 .back {
     padding-right: 12px;
 }
-</style>
+.dark {
+    background-color: #15152d;
+}
+</style>

src/styles/app.less

@@ -2,7 +2,7 @@
     --van-primary-color: @prim;
     --van-tabbar-item-active-background-color: transparent;
     --van-tabbar-background-color: @bg;
-    --van-nav-bar-background-color: @bg;
+    --van-nav-bar-background-color: #15152d;
     --van-cell-background-color: @bg;
     --van-text-color: @text0;
     --van-gray-6: @text3;
@@ -38,6 +38,7 @@
     --van-dialog-has-title-message-text-color: #000;
     --van-field-label-color: #aaabad;
     --van-search-action-padding: 0 16px;
+    --van-popover-dark-background-color: #15152d;
 }
 
 [contenteditable='true'],