lolbox.duowan.com/mbox/page/ability/info.vue

<style>
    
</style>

<template>
    <div class="ability-info-wrap">
        <div class="ability-info-head">
            <section class="ability-info-icon">
                <img :src="ability.img_url" />
            </section>
            <section class="ability-info-name">
                <h3>{{ability.name}}</h3>
            </section>
        </div>
        <div class="ability-info-describe">
                
                <ul>
                    <li>
                        <h3>技能描述</h3>
                        <p>{{ability.desc}}</p>
                    </li>
                    <li>
                         <h3>冷却时间</h3>
                         <p>
                            <span>10/9/7/6</span>
                            <label>秒</label>
                         </p>
                    </li>
                    <li>
                         <h3>施法消耗</h3>
                         <p>
                            <span>50/60/70/80/90</span>
                            <label>法力</label>
                         </p>
                    </li>
                    <li>
                        <h3>施法范围</h3>
                         <p>无</p>
                    </li>
                </ul>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import lib from 'lib';

    export default {
        data () {
            return {
                ability : {}
            }
        },
        mounted () {
            this.getData();
        },
        beforeDestroy () {
        },
        methods: {
            getData(){
                let self = this,
                    url = `${lib.apiUrl}/champion/?var=Ashe`;

                lib.get(url,ret => {
                    let ability = ret.champion_list[0].pqwer[1];//q技能

                    self.ability = ability;
                })
            }
        }
    }
</script>