<template>
	<view class="topbar-container">
		<view class="topbar" :style="{height:`${titleStyle.height}px`,paddingTop:`${titleStyle.top}px`}">
			{{configuration.title}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "TopBar",
		props: {
			configuration: {
				type: Object,
				default: () => null
			},
			titleStyle: {
				type: Object,
				default: () => {
					// #ifdef MP-WEIXIN
					return wx.getMenuButtonBoundingClientRect();
					// #endif 
					// #ifndef MP-WEIXIN
					return null
					// #endif
				}
			}
		},
		data() {
			return {}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.topbar-container{
		background: linear-gradient(to bottom, #A7CEFF, #F1F2F7);
		padding-bottom: 44rpx;
	}
	.topbar {
		display: flex;
		color: #191919;
		font-size: 34rpx;
		font-weight: 400;
		justify-content: center;
		align-items: center;
		background-size: 124rpx 100%;
		font-weight: 600;
	}
</style>