feat: ✨ 更改自定义顶栏样式;设置app主题色;更改底部导航栏图标;
@ -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",
|
||||
|
@ -6,10 +6,7 @@ const { safeAreaInsets } = uni.getSystemInfoSync()
|
||||
<template>
|
||||
<view class="navbar" :style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }">
|
||||
<!-- logo文字 -->
|
||||
<view class="logo">
|
||||
<image class="logo-image" src="@/static/images/logo.png"></image>
|
||||
<text class="logo-text">新鲜 · 亲民 · 快捷</text>
|
||||
</view>
|
||||
<view class="logo"> 金佰川微商城 </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-size: cover;
|
||||
background-color: $uni-color-app;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 20px;
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
}
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 937 B After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 1017 B After Width: | Height: | Size: 5.9 KiB |
Before Width: | Height: | Size: 858 B After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 908 B After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 4.5 KiB |
@ -73,4 +73,6 @@ $uni-font-size-title: 20px;
|
||||
$uni-color-subtitle: #555; // 二级标题颜色
|
||||
$uni-font-size-subtitle: 18px;
|
||||
$uni-color-paragraph: #3f536e; // 文章段落颜色
|
||||
$uni-font-size-paragraph: 15px;
|
||||
$uni-font-size-paragraph: 15px;
|
||||
|
||||
$uni-color-app: #27BA9B;
|