lolbox.duowan.com/mbox/page/hero/index.vue

<style>
</style>

<template>
	<div class="hero-index">
		<!--英雄简介 固定布局-->
		<header class="h-brief">
			<section class="h-head">
				<!--<i class="h-follow has-follow"></i>-->
				<!--<i class="h-follow not-follow"></i>-->
				<img :src="`http://static.lolbox.duowan.com/images/champions/${heroData.name}.png`" class="h-icon" />
			</section>

			<section class="h-property">
				<p class="p-line1">
					<label class="h-name">{{heroData.title}}</label>
					<label class="h-type" v-for="role in rolesCH">{{role}}</label>
				</p>
				<p class="p-line2">
					<label>金{{heroData.gold}}</label>，
					<label>卷{{heroData.coupon}}</label>
				</p>
				<p class="p-line3">
					<label>攻{{heroMetaInfo.attack}}</label>
					<label>防{{heroMetaInfo.defense}}</label>
					<label>法{{heroMetaInfo.magic}}</label>
					<label>难度{{heroMetaInfo.difficulty}}</label>
				</p>
			</section>
			<!-- 右边的按钮-->
			<section class="compare-talent">
				<div class="b-wrap">
				<!--<a>英雄对比</a>-->
				<a>天赋符文</a>
				</div>
			</section>
		</header>

		<nav class="h-nav">
				<ul>
					<li class="active"><a @click.prevent="switchNav($event)" data-for="hero_info">资料</a></li>
					<li><a @click.prevent="switchNav($event)" data-for="hero_equipment">出装</a></li>
					<!--<li><a @click.prevent="switchNav($event)" data-for="hero_video">视频</a></li>
					<li><a @click.prevent="switchNav($event)" data-for="hero_skinvideo">皮肤视频</a></li>
					<li><a @click.prevent="switchNav($event)"data-for="hero_dub">配音</a></li>-->
				</ul>
				<div class="nav-underline" id="nav_underline"></div>
			</nav>

		<!--英雄的详细信息-->
		<article class="h-content-wrap" id="h-content-wrap">
				<!--资料-->
				<div class="content-section h-info active" id="hero_info">
					<article class="ability-explain">
						<header class="content-section-header one-level">
							<h2>技能说明</h2>
						</header>
						<ul class="ability-list">
							<li @click="switchAblibity($event)" v-for="(ability,index) in heroData.pqwer" :class="[index==0?'active':'']">
								<div class="border-like"></div>
								<img :src="ability.img_url" />
							</li>
						</ul>
						<!--技能详细解释的容器-->
						<div class="ability-explain-wrapper" id="ability_wrap">
							<section class="ability-detail" v-for="(ability,index) in heroData.pqwer" :class="[index==0?'active':'']">
								<i :class="`arrow-up-${index+1}th`"></i>
								<article>
									<header class="content-section-header two-level">
										<h2>{{ability.name}}</h2>
									</header>
									<div class="article-content" v-html="ability.desc">
									</div>
								</article>
							</section>
						</div>
					</article>

					<article class="best-partner-counter">
						<header class="content-section-header one-level">
							<h2>最佳拍档</h2>
						</header>
						<ul class="b-pc-list  default-show">
							<li>
								<img src="/img/ability_r.jpg" class="b-pc-icon" />
								<div class="b-pc-info">
									击倒-人类形态：奈德丽投掷她的标枪，撞击目标造成55/95/140/185/230(+0.65)点魔法德丽下次攻击将产生额外伤
								</div>
							</li>
						</ul>

						<ul class="b-pc-list">
							<li>
								<img src="/img/ability_r.jpg" class="b-pc-icon" />
								<div class="b-pc-info">
									击倒-人类形态：奈德丽投掷她的标枪，撞击目标造成55/95/140/185/230(+0.65)点魔法德丽下次攻击将产生额外伤
								</div>
							</li>
							<li>
								<img src="/img/ability_r.jpg" class="b-pc-icon" />
								<div class="b-pc-info">
									击倒-人类形态：奈德丽投掷她的标枪，撞击目标造成55/95/140/185/230(+0.65)点魔法德丽下次攻击将产生额外伤
								</div>
							</li>
						</ul>

						<p class="b-pc-more"><a @click="showMorePC($event)">查看更多</a></p>

					</article>

					<article class="best-partner-counter">
						<header class="content-section-header one-level">
							<h2>最佳克制</h2>
						</header>

						<ul class="b-pc-list default-show">
							<li>
								<img src="/img/ability_r.jpg" class="b-pc-icon" />
								<div class="b-pc-info">
									击倒-人类形态：奈德丽投掷她的标枪，撞击目标造成55/95/140/185/230(+0.65)点魔法德丽下次攻击将产生额外伤
								</div>
							</li>
						</ul>

						<ul class="b-pc-list">
							<li>
								<img src="/img/ability_r.jpg" class="b-pc-icon" />
								<div class="b-pc-info">
									击倒-人类形态：奈德丽投掷她的标枪，撞击目标造成55/95/140/185/230(+0.65)点魔法德丽下次攻击将产生额外伤
								</div>
							</li>
						</ul>

						<p class="b-pc-more"><a @click="showMorePC($event)">查看更多</a></p>
					</article>

					<!--使用技巧-->
					<article class="use-tip">
						<header class="content-section-header one-level">
							<h2>使用技巧</h2>
						</header>

					</article>

					<!--应对技巧-->
					<article class="coping-skills">
						<header class="content-section-header one-level">
							<h2>应对技巧</h2>
						</header>
					</article>

					<!--英雄数据-->
					<article class="hero-lore">
						<header class="content-section-header one-level">
							<h2>英雄背景</h2>
						</header>
						<section class="content-text-wrap" v-html="heroMetaData.lore">
						</section>	
					</article>
				</div>

				<!--出装-->
				<div class="content-section h-equipment" id="hero_equipment">
					<ul class="equip-build-list">
						<li class="equip-build-item">
							<header class="equip-build-title">
								<h5>上单无敌奈德丽</h5>
								<time>2017-01-15</time>
							</header>

							<table class="equip-build-brief">
								<tbody>
									<tr>
										<td>作者</td>
										<td>我的菊花安好</td>
									</tr>
									<tr class="equipment_list">
										<td class="vertical-middle">出装</td>
										<td class="clear-inline-px">
											<img src="/img/equipment_1.jpg" />
											<img src="/img/equipment_2.jpg"/>
											<img src="/img/equipment_3.jpg"/>
											<img src="/img/equipment_4.jpg"/>
											<img src="/img/equipment_5.jpg"/>
											<img src="/img/equipment_6.jpg"/>
										</td>
									</tr>
									<tr>
										<td  class="vertical-middle">天赋</td>
										<td class="equipment-talent-list">
											<label class="talent-col-1"></label>
											<span>18</span>
											<label class="talent-col-2"></label>
											<span>0</span>
											<label class="talent-col-3"></label>
											<span>12</span>
										</td>
									</tr>
									<tr>
										<td>符文</td>
										<td>
											<ul class="equipment-build-rune vertical-middle">
												<li>
													<label>
														<i  class="rune-elite-icon"></i>
													</label>
													<span class="vertical-middle">精华：9护法</span>
												</li>
												<li>
													<label>
														<i  class="rune-stamp-icon"></i>
													</label>
													<span class="vertical-middle">印记：9穿透</span>
												</li>
												<li>
													<label>
														<i class="rune-sigil-icon"></i>
													</label>
													<span class="vertical-middle">符印：9魔抗</span>
												</li>
												<li>
													<label>
														<i class="rune-glyph-icon"></i>
													</label>
													<span class="vertical-middle">雕文：3攻击</span>
												</li>
											</ul>
										</td>
									</tr>
								</tbody>
							</table>

							<aside class="eb-go">
								<a class="eb-go-detail" data-href="/?page=equip-build"></a>
							</aside>
						</li>

						<li class="equip-build-item">
							<header class="equip-build-title">
								<h5>上单无敌奈德丽</h5>
								<time>2017-01-15</time>
							</header>

							<table class="equip-build-brief">
								<tbody>
									<tr>
										<td>作者</td>
										<td>我的菊花安好</td>
									</tr>
									<tr class="equipment_list">
										<td class="vertical-middle">出装</td>
										<td class="clear-inline-px">
											<img src="/img/equipment_1.jpg" />
											<img src="/img/equipment_2.jpg"/>
											<img src="/img/equipment_3.jpg"/>
											<img src="/img/equipment_4.jpg"/>
											<img src="/img/equipment_5.jpg"/>
											<img src="/img/equipment_6.jpg"/>
										</td>
									</tr>
									<tr>
										<td  class="vertical-middle">天赋</td>
										<td class="equipment-talent-list">
											<label class="talent-col-1"></label>
											<span>18</span>
											<label class="talent-col-2"></label>
											<span>0</span>
											<label class="talent-col-3"></label>
											<span>12</span>
										</td>
									</tr>
									<tr>
										<td>符文</td>
										<td class="">
											<ul class="equipment-build-rune vertical-middle">
												<li>
													<label>
														<i  class="rune-elite-icon"></i>
													</label>
													<span class="vertical-middle">精华：9护法</span>
												</li>
												<li>
													<label>
														<i  class="rune-stamp-icon"></i>
													</label>
													<span class="vertical-middle">印记：9穿透</span>
												</li>
												<li>
													<label>
														<i class="rune-sigil-icon"></i>
													</label>
													<span class="vertical-middle">符印：9魔抗</span>
												</li>
												<li>
													<label>
														<i class="rune-glyph-icon"></i>
													</label>
													<span class="vertical-middle">雕文：3攻击</span>
												</li>
											</ul>
										</td>
									</tr>
								</tbody>
							</table>

							<aside class="eb-go">
								<a class="eb-go-detail" data-href="/?page=equip-build"></a>
							</aside>
						</li>
					</ul>
				</div>
		</article>
	</div>
</template>

<script>
	import index from './js/index.js';
	export default index;
</script>