<template>
	<view class="page1">
		<view class="nav-bar" :style="{'padding-top': menuButtonInfo.top +'px'}">
			<view class="back-btn" @tap="back">
				<uni-icons type="left" size="28"></uni-icons>
			</view>
		</view>
		<view class="title">
			<view class="hero-spark spark-a"></view>
			<view class="hero-spark spark-b"></view>
			<view class="hero-spark spark-c"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
			}
		},
		onLoad(option) {

		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		},
		methods: {
			back() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/25cad6ddbfb44230abf0c4d1a6259e16.png') no-repeat;
		width: 100%;
		height: 340rpx;
		background-size: 100%;
		position: relative;
		overflow: hidden;
	}

	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		z-index: 100;
		padding: 16rpx 24rpx;
		box-sizing: border-box;
	}

	.back-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
</style>