<template>
	<view class="nav" :style="{ height: navBarHeight + 'px' }">
		<view class="capsule-box"
			:style="{height: menuHeight + 'px',minHeight: menuHeight + 'px',lineHeight: menuHeight + 'px',bottom: menuBottom + 'px'}">
			<view class="nav-handle">
				<view class="back" @click="goBack">
					<!-- 返回按钮 -->
					<u-icon name="arrow-left" color="#333333" size="24"></u-icon>
				</view>
			</view>
			<!-- <view class="nav-title">导航标题</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarHeight: getApp().globalData.navBarHeight,
				menuBottom: 0,
				menuHeight: getApp().globalData.menuHeight
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	.nav {
		width: 100%;
		background-color: #f3d4d7;
	}

	.back {
		margin-left: 30rpx;
	}

	/* // 胶囊栏 */
	.capsule-box {
		position: absolute;
		display: flex;
		align-items: center;
	}

	/* // 标题文字 */
	.nav-title {
		height: 100%;
		width: 50%;
		/* // 标题栏横向居中 */
		margin: 0 auto;
		/* // 文字超出隐藏 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>