<template>
	<view class="">
		<view class="headerbg"></view>
		<view class="header-com" :style="{paddingTop:headerArea.status_height+'px'}">
			<img class="logo" :src="cssUrl+'explain_logo.png'">
			<view class="txt1 PfScSemibold">仁心大医·中医预约系统</view>
			<view class="txt2 PfScMedium">打造智慧中医个人工作室</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'explainPageHeader',
		data() {
			return {
				cssUrl:this.cssUrl
			}
		},
		props:{

		},
		computed:{
			headerArea() {
			  let area = uni.getSystemInfoSync();
			  // #ifdef MP-WEIXIN
			  return this.getHeaderInfo();
			  // #endif
			  // #ifndef MP-WEIXIN
			  return {
			    status_height: area.statusBarHeight
			  };
			  // #endif
			}
		},
		methods: {
			getHeaderInfo() {
				let area = uni.getSystemInfoSync();
				// #ifdef MP-WEIXIN
				let menu = uni.getMenuButtonBoundingClientRect();
				return {
					status_height: menu.top
				};
				// #endif
			},
			getbarHeight() {

			}
		}
	}
</script>

<style scoped lang="scss">
	.headerbg{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 398rpx;
		background: linear-gradient(180deg, #4CAF50 1%, #62CA66 88%);
	}
	.header-com{
		overflow: hidden;
		width: 100%;
		position: fixed;
		z-index: 189;
		.logo {
			width: 100rpx;
			height: 100rpx;
			margin: 0 auto;
			display: block;
		}
		.txt1{
			font-size: 46rpx;
			line-height: 42rpx;
			color: #FFFFFF;
			line-height: 46rpx;
			text-align: center;
			margin-top: 23rpx;
		}
		.txt2{
			text-align: center;
			margin-top: 14rpx;
			font-size: 28rpx;
			line-height: 42rpx;
			color: #FFFFFF;
		}
	}
</style>