feat: ✨ 更改自定义顶栏样式；设置app主题色；更改底部导航栏图标；

src/pages.json

@@ -60,7 +60,7 @@
   // 设置 TabBar https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar
   "tabBar": {
     "color": "#333",
-    "selectedColor": "#18c7ff",
+    "selectedColor": "#27BA9B",
     "backgroundColor": "#fff",
     "borderStyle": "white",
     "spacing": "5px",

src/pages/index/components/CustomNavbar.vue

@@ -6,10 +6,7 @@ const { safeAreaInsets } = uni.getSystemInfoSync()
 <template>
   <view class="navbar" :style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }">
     <!-- logo文字 -->
-    <view class="logo">
+    <view class="logo"> 金佰川微商城 </view>
-      <image class="logo-image" src="@/static/images/logo.png"></image>
-      <text class="logo-text">新鲜 · 亲民 · 快捷</text>
-    </view>
     <!-- 搜索条 -->
     <view class="search">
       <text class="icon-search">搜索商品</text>
@@ -21,30 +18,17 @@ const { safeAreaInsets } = uni.getSystemInfoSync()
 <style lang="scss">
 /* 自定义导航条 */
 .navbar {
-  background-image: url(@/static/images/navigator_bg.png);
+  background-color: $uni-color-app;
-  background-size: cover;
   position: relative;
   display: flex;
   flex-direction: column;
   padding-top: 20px;
   .logo {
-    display: flex;
+    height: 50rpx;
-    align-items: center;
+    line-height: 50rpx;
-    height: 64rpx;
-    padding-left: 30rpx;
-    .logo-image {
-      width: 166rpx;
-      height: 39rpx;
-    }
-    .logo-text {
-      flex: 1;
-      line-height: 28rpx;
-      color: #fff;
-      margin: 2rpx 0 0 20rpx;
-      padding-left: 20rpx;
-      border-left: 1rpx solid #fff;
     font-size: 26rpx;
-    }
+    color: #fff;
+    text-align: center;
   }
   .search {
     display: flex;

src/uni.scss

@@ -74,3 +74,5 @@ $uni-color-subtitle: #555; // 二级标题颜色
 $uni-font-size-subtitle: 18px;
 $uni-color-paragraph: #3f536e; // 文章段落颜色
 $uni-font-size-paragraph: 15px;
+
+$uni-color-app: #27BA9B;