lolbox.duowan.com/mbox/page/match/detail.vue

<style>

</style>

<template>
	<div class="match-detail">
		<header class="time-info">
			<div class="start-time">
				<label>开始时间：</label>
				<span class="time-data">{{ matchInfo.start_timestamp }}</span>
			</div>
			<div class="total-time">
				<label class="total-label">总时长：</label>
				<span class="time-data">{{ matchInfo.game_length_in_minute }}分钟</span>
			</div>
			
		</header>

		<div class="detail-content">
			<section class="team-section victory-team">
				<nav>
					<span class="team-label">胜利队伍</span>
					<div class="kill-money">
						<label>人头：</label>
						<span>{{ team_win.total_killed }}</span>
						<label>金钱：</label>
						<span>{{ parseInt(team_win.total_gold_in_k) }}K</span>
					</div>
				</nav>

				<ul class="team-detail">
					<li v-for="item in team_win.player_champions">
						<section class="player-detail">
							<section class="player-head">
								<img :src="`${staticUrl}/images/champions/${item.champion.name}.png`"  class="player-icon">
							</section>

							<section class="player-equipment">
								<p class="player-name" >{{ item.player.pn }}</p>
								<ul class="equipment-list">
									<li v-for="zb in item.items"><img :src="`${staticUrl}/images/items/${zb.id}_40x40.jpg`"></li>
								</ul>
							</section>

							<section class="player-military">
								<p>{{ item.total_killed + '/' + item.total_death + '/' + item.total_assist }}</p>
								<i v-if="item.flag_mvp_carry" class="most-value-player"></i>
							</section>
						</section>

						<section class="player-glory">
							<span class="place-holder"></span>
							<span>
								<i v-for="honor in item.honors"><img :src="`${staticUrl}/images/honor_kda/icon_${honor.name}_16x16.gif`" alt=""></i>
							</span>
							<span class="arrow-span">
								<em class="arrow-down show-fuldata" @click="showFulData($event)"></em>
								<em class="arrow-up hide-data" @click="hideFulData($event)"></em>
							</span>
						</section>
						<section class="player-data">
							<table class="fully-data">
								<tr>
									<td>
										<label>补兵：</label>
										<span>{{ item.total_minions_killed }}</span>
									</td>
									<td>
										<label>金钱：</label>
										<span>{{ item.gold_earned }}</span>
									</td>
									<td>
										<label>推塔：</label>
										<span>{{ item.total_turrets_killed }}</span>
									</td>
								</tr>

								<tr>
									<td>
										<label>对英雄伤害：</label>
										<span>{{ item.total_damage_dealt_to_champions }}</span>
									</td>
									<td>
										<label>野怪：</label>
										<span>{{ item.total_neutral_minions_killed }}</span>
									</td>
									<td>
										<label>连杀：</label>
										<span>{{ item.largest_killing_spree }}</span>
									</td>
								</tr>

								<tr>
									<td>
										<label>多杀：</label>
										<span>{{ item.largest_multi_kill }}</span>
									</td>
									<td>
										<label>方眼数：</label>
										<span>{{ item.total_ward_placed }}</span>
									</td>
									<td>
										<label>排眼数：</label>
										<span>{{ item.total_ward_killed }}</span>
									</td>
								</tr>
							</table>
							<p class="d-f">
								<i v-for="spell in item.spells"><img :src="`${staticUrl}/images/spells/${spell.id}_24x24.jpg`" /></i>
							</p>
						</section>
					</li>
				</ul>
			</section>

			<section class="team-section failed-team">
				<nav>
					<span class="team-label">失败队伍</span>
					<div class="kill-money">
						<label>人头：</label>
						<span>{{ team_lose.total_killed }}</span>
						<label>金钱：</label>
						<span>{{ parseInt(team_lose.total_gold_in_k) }}K</span>
					</div>
				</nav>

				<ul class="team-detail">
					<li v-for="item in team_lose.player_champions">
						<section class="player-detail">
							<section class="player-head">
								<img :src="`${staticUrl}/images/champions/${item.champion.name}.png`"  class="player-icon">
							</section>

							<section class="player-equipment">
								<p class="player-name" >{{ item.player.pn }}</p>
								<ul class="equipment-list">
									<li v-for="zb in item.items"><img :src="`${staticUrl}/images/items/${zb.id}_40x40.jpg`"></li>
								</ul>
							</section>

							<section class="player-military">
								<p>{{ item.total_killed + '/' + item.total_death + '/' + item.total_assist }}</p>
								<i v-if="item.flag_mvp_carry" class="most-value-player"></i>
							</section>
						</section>

						<section class="player-glory">
							<span class="place-holder"></span>
							<span>
								<i v-for="honor in item.honors"><img :src="`${staticUrl}/images/honor_kda/icon_${honor.name}_16x16.gif`" alt=""></i>
							</span>
							<span class="arrow-span">
								<em class="arrow-down show-fuldata" @click="showFulData($event)"></em>
								<em class="arrow-up hide-data" @click="hideFulData($event)"></em>
							</span>
						</section>
						<section class="player-data">
							<table class="fully-data">
								<tr>
									<td>
										<label>补兵：</label>
										<span>{{ item.total_minions_killed }}</span>
									</td>
									<td>
										<label>金钱：</label>
										<span>{{ item.gold_earned }}</span>
									</td>
									<td>
										<label>推塔：</label>
										<span>{{ item.total_turrets_killed }}</span>
									</td>
								</tr>

								<tr>
									<td>
										<label>对英雄伤害：</label>
										<span>{{ item.total_damage_dealt_to_champions }}</span>
									</td>
									<td>
										<label>野怪：</label>
										<span>{{ item.total_neutral_minions_killed }}</span>
									</td>
									<td>
										<label>连杀：</label>
										<span>{{ item.largest_killing_spree }}</span>
									</td>
								</tr>

								<tr>
									<td>
										<label>多杀：</label>
										<span>{{ item.largest_multi_kill }}</span>
									</td>
									<td>
										<label>方眼数：</label>
										<span>{{ item.total_ward_placed }}</span>
									</td>
									<td>
										<label>排眼数：</label>
										<span>{{ item.total_ward_killed }}</span>
									</td>
								</tr>
							</table>
							<p class="d-f">
								<i v-for="spell in item.spells"><img :src="`${staticUrl}/images/spells/${spell.id}_24x24.jpg`" /></i>
							</p>
						</section>
					</li>
				</ul>
			</section>
		</div>
	</div>
</template>

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