<template>
	<view>
		<view class="navbar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<u-icon name="arrow-leftward" size="36" color="#fff"></u-icon>
				</view>
				<view class="navbar-title"></view>
				<view class="navbar-right"></view>
			</view>
		</view>

		<view class="contain flex flex-direction">
			<image src="/static/images/lt.png" class="header-icon" mode="widthFix" />
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
		}
	};
</script>

<style lang="scss" scoped>
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;

		.navbar-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 60rpx;

			.navbar-left {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.navbar-title {
				color: rgba(23, 23, 37, 1);
				font-family: DM Sans;
				font-size: 36rpx;
				font-weight: 700;
				line-height: 52rpx;
				letter-spacing: 0%;
				text-align: center;
			}

			.navbar-right {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	.contain {
		background: linear-gradient(to right, #4286F5, #276DE7);
		padding-top: 120rpx;
		align-items: center;
		height: 100vh;
		.header-icon {
			width: 100%;
			display: block;
		}
	}
</style>