<template>
    <div class="level-music">
        <m-header />
		<div class="level-banner">
			<img src="../assets/images/level/banner@2x.png" alt="">
		</div>

		<div class="level-section">
			<router-link :to="{ path: '/appRecord' }" class="section">
				<h3>报考记录</h3>
				<p>您的报考记录<van-icon name="arrow" /></p>
			</router-link>
			<router-link :to="{ path: '/examRecord' }" class="section two">
				<h3>考试记录</h3>
				<p>您即将进行的考试<van-icon name="arrow" /></p>
			</router-link>
			<router-link :to="{ path: '/levelMusic' }" class="section three">
				<h3>考级曲库</h3>
				<p>进入考级曲库<van-icon name="arrow" /></p>
			</router-link>
		</div>
    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
// import { browser } from '@/common/common'
export default {
    name: 'levelMusic',
	components: { MHeader },
    data () {
        return {
        }
    },
    mounted() {
        // 插入token
        // let params = this.$route.query
        // if(params.Authorization) {
        //     localStorage.setItem('Authorization', decodeURI(params.Authorization))
        //     localStorage.setItem('userInfo', decodeURI(params.Authorization))
		// }
    },
    methods: {
    }
}
</script>
<style lang="less" scoped>
@import url("../assets/commonLess/variable");
.level-music {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: @--main-bg-color;
}

.level-banner {
	padding: .2rem .16rem .12rem;
	img {
		width: 100%;
	}
}

.level-section {
	padding: 0 .16rem;
	.section {
		background: url('../assets/images/level/entry_bg.png');
		height: 1.18rem;
		background-size: cover;
		margin-bottom: .12rem;
		display: flex;
		padding-left: .14rem;
		flex-direction: column;
		justify-content: center;
		&.two {
			background: url('../assets/images/level/area_bg.png');
			background-size: cover;
		}
		&.three {
			background: url('../assets/images/level/song_bg.png');
			background-size: cover;
		}

		h3 {
			color: @--font-main-color;
			font-size: .18rem;
			padding-bottom: .05rem;
		}
		p {
			display: flex;
			align-items: center;
			color: @--font-second-color;
			font-size: .14rem;
		}
	}
}
</style>