<template>
	<view class="navigationStyle" :style="{backgroundColor:bgcolor}">
		<view class="nav-header">
			<view class="nav-bottom">
				<img class="left" src="https://www.jiubaotongxue.love/image/nav10.png"  alt="" @click="gotos" />
				<text class="title" :style="{color:color}">{{titles}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
			ref,
			defineProps,
			defineEmits
		} from 'vue';
		const props = defineProps(['titles','bgcolor','color'])
	const gotos = ()=>{
		uni.navigateBack()
	}

</script>

<style lang="scss">
.navigationStyle{
	width: 100%;
	height: 11%;
	position: fixed;
	top: 0;
	z-index: 10;
	.nav-header{
		position: relative;
		width: 100%;
		height: 100%;
		.nav-bottom{
			width: 100%;
			height: 60%;
			position: absolute;
			bottom: 0;
			.left{
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				left: 30rpx;
				top: 50%;
				transform: translateY(-50%);
			}
			.title{
				display: block;
				position: absolute;
				left: 50%;
				font-size: 36rpx;
				top: 50%;
				transform: translate(-50%,-50%);
				color: white;
			}
		}
	}
}
</style>