SOURCE

if (!Vue) throw new Error('missing dependency of Vue');

Vue.component('number-page', {
	data: function () {
		return {
			recommendedItems: [
				{path: 'counting/v0', title: '本期报数'},
				{path: 'counting/v1', title: '上期报数'},
				{path: 'countingroom/lv1', title: '学徒报数厅'},
				{path: 'countingroom/lv2', title: '见习报数厅'},
				{path: 'countingroom/lv3', title: '资深报数厅'},
				{path: 'rank/lv6', title: '大神排行'},
				{path: 'account/stars', title: '我的关注'},
				{path: 'countingroom/lv4', title: '专家报数厅'},
				{path: 'countingroom/lv5', title: '至尊报数厅'},
				{path: 'countingroom/lv6', title: '大神报数厅'},
			],
			hotMasters: null,
			masterRecords: null,
		}
	}, 
	template: (
	/*
	 * 另一种方法是
	 * `
	 * 	<div class="number-page" v-if="$route.name==='number'">
	 * 		...
	 * 	</div>
	 * 	<router-view v-else></router-view>
	 * `
	 */
		`
			<div class="number-page">
				<div class="recommended-blocks-panel">
					<ul>
						<li v-for="item in recommendedItems" :class="item.path.split('/').join('-')">
							<router-link :to="item.path" append>{{item.title}}</router-link>
						</li>
					</ul>
				</div>
				<div class="hot-lv6-panel">
					<ul>
						<li v-for="user in hotMasters">
							<router-link :to="'/user/'+user.id">
								<img class="avatar" src="user.avatar">
								<span>{{user.name}}</span>
							</router-link>
						</li>
					</ul>
				</div>
				<div class="master-records-panel"></div>
			</div>
		`
	)
});

div.number-page {
	height: 100%;
}

div.number-page>div.recommended-blocks-panel>ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

div.number-page>div.recommended-blocks-panel>ul>li {
	max-width: 20%;
	min-width: 6em;
	margin: 0.4em;
	height: 3em;
	line-height: 3em;
	text-align: center;
	border-radius: 0.2em;
}

div.number-page>div.recommended-blocks-panel>ul>li.counting-v0 {
	background: rgb(47,166,254);
}

div.number-page>div.recommended-blocks-panel>ul>li.counting-v1 {
	background: rgb(253,82,91);
}

div.number-page>div.recommended-blocks-panel>ul>li.countingroom-lv1 {
	background: rgb(251,110,109);
}

div.number-page>div.recommended-blocks-panel>ul>li.countingroom-lv2 {
	background: rgb(39,156,229);
}

div.number-page>div.recommended-blocks-panel>ul>li.countingroom-lv3 {
	background: rgb(30,169,96);
}

div.number-page>div.recommended-blocks-panel>ul>li.countingroom-lv4 {
	background: rgb(172,148,239);
}

div.number-page>div.recommended-blocks-panel>ul>li.countingroom-lv5 {
	background: rgb(121,194,49);
}

div.number-page>div.recommended-blocks-panel>ul>li.countingroom-lv6 {
	background: rgb(212,152,31);
}

div.number-page>div.recommended-blocks-panel>ul>li.rank-lv6 {
	background: rgb(251,147,60);
}

div.number-page>div.recommended-blocks-panel>ul>li.account-stars {
	background: rgb(131,200,55);
}

div.number-page>div.recommended-blocks-panel>ul>li>a {
	font-size: 12px;
	color: #fff;
	text-decoration: none;
}