页面调整优化

zxl

19 小时以前 e6e969ad460293d3e14ca5ed89fd3b1df82e37c3

 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,17 +26,21 @@
         },
         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'
               },
@@ -45,28 +49,28 @@
                  // "pagePath": "/pages/tabbar/category/category",
                  "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/cusbar/video/video",
                  "iconPath": "/static/tabbar/video1.png",
                  "selectedIconPath": "/static/tabbar/video1-selected.png",
                  "iconPath": "/static/tabbar/video1-new.png",
                  "selectedIconPath": "/static/tabbar/video1-new-s.png",
                  "key": 'video'
               },
               {
                  "pagePath": "/pages/cusbar/cart/cartList",
                  "iconPath": "/static/tabbar/cart.png",
                  "selectedIconPath": "/static/tabbar/cart-s.png",
                  "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'
               }
@@ -75,7 +79,9 @@
      },
      created() {
         console.log("底部安全区域", uni.getSystemInfoSync().safeAreaInsets);
         this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
         if (!this.fillBottom) {
            this.paddingBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
         }
      },
      methods: {
         switchTab(item) {
@@ -95,14 +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: 1rpx solid rgba(255, 255, 255, 0.1);
      border-top: 1rpx solid rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      z-index: 999;
   }

   .tabbar-item {
@@ -110,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;
   }