ldb-safe-hh/components/nav-bottom/nav-menu.vue

<template>
	<view class="wrap-nav-menu" v-if="menus && menus.length > 0">
		<nav-bottom height="152rpx">
			<view class="menu-layout">
				<view class="item" v-for="(item, index) in menus" :key="index" @click="onclick(index, item)">
					<view style="width: 64rpx;height: 64rpx;display: flex;justify-content: center;align-items: center;">
						<u-icon :name="item.icon" imgMode="aspectFit" color="#F0516E" :size="isLocal(item.icon) ? '48rpx' : '64rpx'"></u-icon>
					</view>
					<view class="title">{{ item.title }}</view>
				</view>
			</view>
		</nav-bottom>
	</view>
</template>

<script>
	import NavBottom from '@/components/nav-bottom/index.vue'
	
	export default {
		components: {
			NavBottom
		},
		props: {
			menus: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			onclick(index, value) {
				this.$emit('itemClick', index, value)
			},
			isLocal(value) {
				if(value) {
					return value.indexOf('/') > -1
				}
				return false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap-nav-menu {
		z-index: 998;
		border-top: 1rpx solid #F3F4F6;
		position: fixed;
		left: 0;
		bottom: env(safe-area-inset-bottom);
		width: 100%;
		padding: 0;
		margin: 0;
		.menu-layout {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			margin-top: 3.5%;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				.title {
					color: #F0516E;
					font-size: 28rpx;
					font-weight: 400;
					margin-top: 4rpx;
				}
			}
		}
	}
</style>