From 9d8ad3056443aa0d7d4b26622ea660319cf52d79 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期四, 15 一月 2026 10:46:04 +0800
Subject: [PATCH] 页面调整优化
---
components/custom-tabbar.vue | 66 +++++++++++++++++++--------------
1 files changed, 38 insertions(+), 28 deletions(-)
diff --git a/components/custom-tabbar.vue b/components/custom-tabbar.vue
index 5fb34e7..00dc5bd 100644
--- a/components/custom-tabbar.vue
+++ b/components/custom-tabbar.vue
@@ -1,6 +1,6 @@
<!-- components/custom-tabbar.vue -->
<template>
- <view class="custom-tabbar" :style="{backgroundColor: bgColor, marginBottom: marginBottom + 'px'}">
+ <view class="custom-tabbar" :style="{backgroundColor: bgColor, paddingBottom: paddingBottom + 'px'}">
<view v-for="(item, index) in list" :key="index" class="tabbar-item" @click="switchTab(item)">
<image :src="selected === item.key ? item.selectedIconPath : item.iconPath"
:class="{'tabbar-icon': true, 'video-add': item.key == 'video'}" />
@@ -26,46 +26,51 @@
},
selectedTextColor: {
type: String,
- default: '#ff573e'
+ default: '#25a885'
+ },
+ fillBottom: {
+ type: Boolean,
+ default: false
}
},
data() {
return {
color: '#999999',
- marginBottom: 0,
+ paddingBottom: 0,
list: [{
"pagePath": "/pages/tabbar/index/home",
- "iconPath": "/static/tabbar/home.png",
- "selectedIconPath": "/static/tabbar/home-s.png",
+ "iconPath": "/static/tabbar/home-new.png",
+ "selectedIconPath": "/static/tabbar/home-new-s.png",
"text": "棣栭〉",
"key": 'index'
},
{
+ // KitchenVideo
// "pagePath": "/pages/tabbar/category/category",
- "pagePath": "/pages/kitchen/KitchenVideo",
+ "pagePath": "/pages/kitchen/KitchenCover",
- "iconPath": "/static/tabbar/category.png",
- "selectedIconPath": "/static/tabbar/category-s.png",
+ "iconPath": "/static/tabbar/category-new.png",
+ "selectedIconPath": "/static/tabbar/category-new-s.png",
"text": "绁炲帹",
"key": 'kitchen'
},
{
- "pagePath": "/pages/tabbar/video/video",
- "iconPath": "/static/tabbar/video1.png",
- "selectedIconPath": "/static/tabbar/video1-selected.png",
+ "pagePath": "/pages/cusbar/video/video",
+ "iconPath": "/static/tabbar/video1-new.png",
+ "selectedIconPath": "/static/tabbar/video1-new-s.png",
"key": 'video'
},
{
- "pagePath": "/pages/tabbar/cart/cartList",
- "iconPath": "/static/tabbar/cart.png",
- "selectedIconPath": "/static/tabbar/cart-s.png",
+ "pagePath": "/pages/cusbar/cart/cartList",
+ "iconPath": "/static/tabbar/cart-new.png",
+ "selectedIconPath": "/static/tabbar/cart-new-s.png",
"text": "璐墿杞�",
"key": 'buyCar'
},
{
"pagePath": "/pages/tabbar/user/my",
- "iconPath": "/static/tabbar/mine.png",
- "selectedIconPath": "/static/tabbar/mine-s.png",
+ "iconPath": "/static/tabbar/mine-new.png",
+ "selectedIconPath": "/static/tabbar/mine-new-s.png",
"text": "鎴戠殑",
"key": 'my'
}
@@ -74,13 +79,15 @@
},
created() {
console.log("搴曢儴瀹夊叏鍖哄煙", uni.getSystemInfoSync().safeAreaInsets);
- this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
+ if (!this.fillBottom) {
+ this.paddingBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
+ }
},
methods: {
switchTab(item) {
console.log("鎵ц鍔�", item);
if (this.selected === item.key) return;
- uni.switchTab({
+ uni.redirectTo({
url: item.pagePath
});
}
@@ -94,12 +101,19 @@
bottom: 0;
left: 0;
right: 0;
- height: 50px;
+
+ /* 绋嶅井璋冧綆楂樺害鑷� 55px锛屽苟淇濇寔鍗婇�忔槑鏁堟灉 */
+ height: calc(50px + constant(safe-area-inset-bottom));
+ height: calc(50px + env(safe-area-inset-bottom));
display: flex;
- align-items: center;
+ align-items: flex-start;
+ padding-top: 2rpx;
justify-content: space-around;
- border-top: 1px solid #ededed;
+ border-top: 1rpx solid rgba(0, 0, 0, 0.05);
box-sizing: border-box;
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ z-index: 999;
}
.tabbar-item {
@@ -107,16 +121,12 @@
flex-direction: column;
align-items: center;
justify-content: center;
- }
-
- .video-add {
- width: 30px !important;
- height: 30px !important;
+ height: 55px; /* 鍚屾楂樺害 */
}
.tabbar-icon {
- width: 24px;
- height: 24px;
+ width: 26px;
+ height: 26px;
margin-bottom: 4px;
}
--
Gitblit v1.8.0