JenkinsTest/page/zt/rank.vue

<style lang="sass">
@import "./scss/rank.scss";
</style>

<template>
    <div class="page-zt-rank">
        <section class="rank-hd">
            <div class="hd-row1">
                <span>共250部</span>
            </div>
        </section>
        <section class="rank-bd">
            <ul class="zt-list-film has-commentary">
                <li class="item-film" v-for="(article,index) in articles" :key="article.id" @click="toVideoDetail(article.id)">
                    <div :class='"item-rank item-rank"+(index+1)'><em>{{index+1}}</em></div>
                    <div class="item-fl">
                        <img :src="article.cover" :alt="article.name">
                    </div>
                    <div class="item-fr">
                        <h2>{{article.name}}<em>{{article.dbRate}}</em></h2>
                        <p v-if="article.filmmakers">导演：<span v-for="(director,index) in article.filmmakers.directors" :key="index">{{director.name}}&nbsp;</span>  
                           演员：<span v-for="actor in article.filmmakers.actors" :key="actor.name">{{actor.name}}/</span> 
                        </p>
                        <ul class="list-ups">
                            <li v-for="up in article.ups" :key="up.cid" @click.stop.prevent="toCommentaryDetail(up.cid)">
                                <img :src="up.head" :alt="up.nick">{{up.nick}}
                            </li>
                        </ul>
                        <span class="btn-open" @click.stop.prevent="toggleFilm(index)" v-if="article.ups && article.ups.length>2"></span>
                    </div>
                </li>
            </ul>
        </section>
        <loading 
            :nextFlag = "nextFlag"
            :loading = "isloading"
            @getLoadMore = "getRanklist"></loading>
    </div>
</template>

<script>
    import rank from './js/rank.js'
    export default rank
</script>