novelAD/pages/index/index.vue

<template>
	<view class="container">
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				书架
			</view>
		</view>



		<view class="side_help">
			<view class="help">
				<image class="w-30 h-30 mgb-10" src="/static//image/index/help.png" mode="scaleToFill" />
				<view class="text">帮助</view>
			</view>
			<view class="mgt-20">
				<image class="w-30 h-30 mgb-10" src="/static//image/index/complaint.png" mode="scaleToFill" />
				<view class="text">投诉</view>
			</view>
		</view>

		<view class="tools" @click="toTools">
			<image class="w-80 h-80" src="/static/image/index/tools_icon.png" mode="scaleToFill" />
			<view class="title">工具广场</view>
		</view>


	</view>
	<!-- 引入自定义 TabBar -->
	<custom-tabbar :currentIndex='0' />
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import CustomTabbar from "@/components/custom-tabbar.vue";

// 状态栏高度
let statusBarHeight = ref(0);
// 导航栏高度
let navBarHeight = ref(0);
onBeforeMount(() => {
	statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];
	const custom = uni.getMenuButtonBoundingClientRect();
	// 导航栏的高度 = 胶囊的高度 + （胶囊距离顶部的距离 - 状态栏的高度）* 2
	//                                   即胶囊的上下边距
	navBarHeight.value = custom.height + (custom.top - statusBarHeight.value) * 2;
});


const toTools = () => {
	console.log(111)
	uni.navigateTo({
		url: "/pages/toolsMall/index",
	});
}

</script>

<style lang="scss" scoped>
.container  {
	.navBarBox {
		.navBar {
			width: 100%;
			height: 80rpx !important;
			line-height: 80rpx;
			padding-left: 30rpx;
			font-size: 32rpx;
			color: #333;
		}
	}

	.side_help {
		position: fixed;
		left: 0;
		bottom: 20%;
		width: 50rpx;
		background-color: red;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 0 30rpx 30rpx 0;

		.text {
			text-align: center;
		}
	}

	.tools {
		position: fixed;
		right: 20rpx;
		bottom: 33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.title {
			margin-top: 2rpx;
			font-size: 20rpx;
			width: 100rpx;
			height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(to right, #c7dae2, #84c9e6);
			border-radius: 50rpx;
			color: #fff;
		}
	}
}
</style>