JenkinsTest/page/video/preview.vue

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

<template>

    <div class="page-video-preview">
        <section class="preview-hd">
            <video id="videoPlayer" :poster="curVideoPic" controls :src="curVideoUrl" playsinline="isiPhoneShowPlaysinline" webkit-playsinline="isiPhoneShowPlaysinline"></video>
        </section>

        <div class="preview-bd">
            <section class="v-mod-detail">
                <a :data-href='"/?page=video-detail&articleId="+article.id' class="detail-wrap">
                    <div class="detail-fl">
                        <img :src="article.cover" alt="">
                    </div>
                    <div class="detail-fm">
                        <h2>{{article.name}}</h2>
                        <p>上映时间：{{article.releaseDate | parseReleaseDate}}</p>

                        <p v-if="articleType==2">{{article.episode}}集/单集片长：{{article.duration}}min</p>
                        <p v-else>片长：{{article.duration}}min</p>

                        <p><span v-for="(area,index) in areas" :key="area">{{area}}</span>/<span v-for="(categorie,index) in categories" :key="categorie">{{categorie}}</span></p>
                        <p>别名：<span v-for="(alia,index) in alias" :key="alia">{{alia}}</span></p>
                    </div>
                </a>
            </section>

            <section class="v-mod-preview">
                <h2>预告片({{trailers.count}})</h2>
                <ul class="list-preview">
                    <li v-for="(video,index) in videos" :key="index" :class='index==0?"active":""' @click="changeVideo(index)">
                        <div class="item-fl">
                            <img :src="video.cover" :alt="video.title">
                        </div>
                        <div class="item-fr">
                            <h3>{{video.title}}</h3>
                            <p>{{video.len | parseVideoLen}}</p>
                        </div>
                    </li>
                </ul>
                <a class="btn-more" :href="downloadUrl" v-if="trailers.count>5">进入APP查看更多 &gt;</a>
            </section>

            <section class="v-mod-comment mt-16 pb-150">
                <div class="comment-hd comment-hd2">
                    <h2><span>用户辣评</span></h2>
                    <p>(<em id="commentNum">0</em>)</p>
                </div>
                <comment 
                    :type="1" 
                    :id="articleId" 
                    :hasPlayer="true">
                </comment>
            </section>
        </div>

        <dlfooter></dlfooter>
        <photoswipe></photoswipe>
    </div>
</template>

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