{
  "pages": [
    "pages/index/index",
    "pages/mine/index",
    "pages/tool/index",
    "pages/study/index"
  ],
  "window": {
    "navigationStyle": "custom",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#6eac46",
    "borderStyle": "black",
    "backgroundColor": "#f5f5f5",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tabBar/home.png",
        "selectedIconPath": "static/tabBar/home-select.png",
        "text": "первая страница"
      },
      {
        "pagePath": "pages/mine/index",
        "iconPath": "static/tabBar/mine.png",
        "selectedIconPath": "static/tabBar/mine-select.png",
        "text": "мой"
      }
    ]
  },
}

<template>
	<view class="uni-pages">
         <!-- Настройка цвета фона, поддержка цвета градиента -->
		<view class="navigation" :style="{'background':bgcolor}">
             <!-- Адаптируйтесь к различным моделям мобильных телефонов, оставляя пустое место в верхней части навигации. -->
			<view class="nav--bar-top" :style="{'height':menuButton.top +'px'}"></view>
			<view class="nav-bar-inner">
                 <!-- В левой части навигации, отображать ли капсулу операции -->
				<view class="image-box" v-if="control"
					:style="{'height':menuButton.height+'px','width':menuButton.width+'px'}">
					<image class="image" src="@/static/comComponents/return.png" @click="clickBack"></image>
					<view class="line"></view>
					<image class="image" src="@/static/comComponents/Home.png" @click="clickHome"></image>
				</view>
				<view class="base-box" 
                     :style="{'height':menuButton.height+'px','width':menuButton.width+'px'}" v-else></view>
                <!-- В средней части текста можно установить цвет шрифта. -->
				<view class="title" :style="'color:'+ color+';'">{{title}}</view>
                <!-- Правая часть занимает капсульную позицию мини-программной системы. -->
				<view class="base-box" 
                     :style="{'height':menuButton.height+'px','width':menuButton.width+'px'}"></view>
			</view>
            <!-- Установите расстояние между капсулой и содержимым -->
			<view class="nav-bar-buttom" style="height: 8px;"></view>
		</view>
	</view>
</template>

import {onMounted,ref} from "vue";
//Получаем значение пользовательского атрибута, переданное родительским компонентом
const props = defineProps({
    title: {
        type: String,
        default: "IT-TOOL",
    },
    control: {
        type: Boolean,
        default: false,
    },
    bgcolor: {
        type: String,
        default: "#6cab45",
    },
    color: {
        type: String,
        default: "#fff",
    }
})
// Получите значения атрибутов, соответствующие кнопкам капсулы разных моделей (ширина и высота, расстояние между капсулой и верхом)
const menuButton = ref(uni.getMenuButtonBoundingClientRect());
const prevLength = ref(0)
onMounted(() => {
    getPrevPage();
})
//Получаем путь к странице перехода для операций возврата
const getPrevPage = () => {
    const page = getCurrentPages()
    prevLength.value = page.length;
    if (page.length == 2) {
        uni.setStorageSync("prevPage", page[0].$page.fullPath)
    }
}
// Капсула — Возврат
const clickBack = () => {
    if (prevLength.value > 2) {
        uni.navigateBack()
    } else {
        uni.switchTab({
            url: uni.getStorageSync("prevPage"),
            success: function() {
                var page = getCurrentPages().pop();
                if (page == undefined || page == null) {
                    return
                }
                page.onLoad();
            }
        });
    }
}
// Капсулы--Главная страница
const clickHome = () => {
    uni.switchTab({
        url: "/pages/index/index"
    });
}

.uni-pages {
    .navigation {
        .nav-bar-inner {
            height: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 8px;
            .image-box {
                display: flex;
                justify-content: space-around;
                align-items: center;
                border: 1px solid rgba(#000, 0.1);
                border-radius: 16px;
                background-color: rgba(#fff, 0.6);
                .line {
                    width: 1px;
                    height: 26px;
                    background-color: rgba(#fff, 0.3);
                }
                .image {
                    width: 22px;
                    height: 22px;
                }
            }
            .title {
                color: #000;
                font-weight: 500;
                font-size: 28rpx;
            }
        }
        .nav-bar-buttom {
            height: 10rpx;
        }
    }
}