<template>
	<view>
		<view class="nav">
			<view class="navLeft">
				<view class="back" @click="toback"><text class="iconfont icon-fanhui"></text></view>
				<view class="navTitle">{{title}}</view>
			</view>
			<view class="navRight">
				<slot />
				<text v-if="hasHome=='home'" class="iconfont icon-home iconTop" @click="tohome"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "topnav",
		props: {
			title: {
				type: String,
				default: ''
			},
			hasHome: {
				type: String,
				default: 'home'
			},
		},
		data() {
			return {};
		},
		methods: {
			toback: function() {
				uni.navigateBack({
					delta: 0
				})
			},
			tohome: function() {
				this.$emit("tohome");
			}

		}
	}
</script>

<style>
	.icon-home {

		padding-left: 55rpx;
		font-size: 42rpx;
	}

	.nav {
		height: 160rpx;
		background-image: linear-gradient(130deg, #52D5A6 0%, #43C9CF 100%);
		display: flex;
		align-items: center;
		padding: 0rpx 30rpx;
		padding-top: 48rpx;
		position: fixed;
		box-sizing: border-box;
		top: 0rpx;
		left: 0;
		width: 100%;
		overflow: hidden;
		z-index: 9999;
		justify-content: space-between;
	}

	.nav .navLeft {
		display: flex;
	}

	.nav .navTitle {
		font-family: SourceHanSansCN-Medium;
		font-size: 36rpx;
		color: #FFFFFF;
		letter-spacing: 0.37rpx;
		line-height: 50rpx;
		margin-left: 40rpx;
		font-weight:600;
	}

	.nav .navLeft .icon-fanhui {
		color: #FFFFFF;
		font-size: 45rpx;
	}

	.navRight {
		display: flex;
		align-items: center;
	}
</style>
