lolbox.duowan.com/mbox/page/equip/build.vue

<style>
    
</style>

<template>
    <div class="eb-wrap">
        <!--英雄简介 固定布局-->
		<header class="h-brief">
			<section class="h-head">
				<img src="/img/hero_baonv.jpg" class="h-icon" />
			</section>

			<section class="h-property">
				<p class="p-line1">
					<label class="h-name">奈德丽</label>
					<label class="h-type">刺客</label>
				</p>
				<p class="p-eb-line2">
					<label class="eb-for-author">作者</label>
                    <span class="eb-author">我的菊花安好</span>
                    <label class="eb-for-force"></label>
					<label class="eb-force">19725</label>
				</p>
			</section>
		</header>

        <section class="eb-content">
            <ul class="eb-content-list">
                <li class="eb-item">
                    <header>
                        <h5>技能加点</h5>
                    </header>

                    <section class="eb-item-content">
                        <figure>
                            <a data-href="/?page=ability-info" >
                                <img src="/img/player_icon.jpg" />
                            </a>

                             <a data-href="/?page=ability-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 

                             <a data-href="/?page=ability-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 

                             <a data-href="/?page=ability-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 

                             <a data-href="/?page=ability-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 

                             <a data-href="/?page=ability-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 

                             <a data-href="/?page=ability-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 

                             <a data-href="/?page=ability-info" >
                                <img src="/img/player_icon.jpg" />
                            </a>            
                        </figure>
                    </section>
                </li>

                 <li class="eb-item">
                    <header>
                        <h5>出门装</h5>
                    </header>

                    <section class="eb-item-content">
                        <figure>
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                        </figure>
                    </section>
                </li>

                 <li class="eb-item">
                    <header>
                        <h5>前期</h5>
                    </header>

                    <section class="eb-item-content">
                        <figure>
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a>
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                        </figure>
                    </section>
                </li>

                 <li class="eb-item">
                    <header>
                        <h5>核心</h5>
                    </header>

                    <section class="eb-item-content">
                        <figure>
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                        </figure>
                    </section>
                </li>

                 <li class="eb-item">
                    <header>
                        <h5>进攻神装</h5>
                    </header>

                    <section class="eb-item-content">
                        <figure>
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <figcaption>
                                <label>出装费用</label>
                                <span>17895</span>
                             </figcaption>
                        </figure>
                    </section>
                </li>

                 <li class="eb-item">
                    <header>
                        <h5>防御神装</h5>
                    </header>

                    <section class="eb-item-content">
                        <figure>
                            <a data-href="/?page=equip-info">
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <a data-href="/?page=equip-info" >
                                <img src="/img/player_icon.jpg" />
                            </a> 
                            <figcaption>
                                <label>出装费用</label>
                                <span>17895</span>
                            </figcaption>
                        </figure>
                    </section>
                </li>

                <li class="eb-item">
                    <table class="equip-build-brief">
								<tbody>
									<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>
                </li>
            </ul>
        </section>
    </div>
</template>
<script>
    export default {
        data () {
            return {}
        },
        mounted () {
        },
        beforeDestroy () {
        },
        methods: {
        }
    }
</script>