<template>
	<block>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<view class="navigation"
		:style="[style]">
			<image @click="$wskj.goBack" class="w-32 h-32 back" src="/static/back.png"></image>
			<text>{{ title }}</text>
		</view>
	</block>
</template>

<script>
/**
	 * wskj-navigation 自定义导航栏
	 * @description 此组件一般用于自定义导航栏
	 * @property {Sting}			title	页面标题
	 * @property {Sting}			bgColor 导航栏背景颜色	
	 * @example <wskj-navigation title="组件"></wskj-navigation>
	 */
export default {
	props: {
		title: {
			type: String,
			default: '开通会员'
		},
		bgColor: {
			type: String,
			default: ''
		}
	},
	computed: {
		style(){
			let style = {}
			// #ifdef MP-WEIXIN
			style['height'] = this.$wskj.capsulHeight + 'px'
			style['paddingTop'] = this.$wskj.capsulTop + 'px'
			// #endif 
			
			style['background-color'] = this.bgColor
			return style
		}
	}
}
</script>

<style scoped>
	.status_bar {
		height: var(--status-bar-height);
	}
	.navigation {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 600;
	}
	.back {
		position: absolute;
		left: 0;
	}
</style>
