video.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <style>
  2. </style>
  3. <template>
  4. <div class="moment-share">
  5. <header class="moment-header" id="share_header">
  6. <div class="user-cover">
  7. <img :src="user.head" :alt="user.nick">
  8. </div>
  9. <div class="user-info">
  10. <h2>{{user.nick}}</h2>
  11. <p>{{createTime}}</p>
  12. </div>
  13. </header>
  14. <section class="moment-content">
  15. <div v-if="type==1" class="type1">
  16. <div class="txt">{{articleDetail.title}}</div>
  17. <video class="moment-video" preload="meta" controls="" :poster="articleDetail.cover">
  18. <source :src="articleDetail.video.videoUrls[0].urls[0]" type="video/mp4">
  19. 您的浏览器不支持 video 标签
  20. </video>
  21. </div>
  22. </section>
  23. <section class="moment-comment">
  24. <h2 class="comment-header">评论</h2>
  25. <ul class="list-comment">
  26. <li v-for="barrage in barrages">
  27. <section class="item-cover">
  28. <img :src="barrage.user.head" alt="">
  29. </section>
  30. <section class="item-cont">
  31. <div class="item-info">
  32. <span class="item-nick">{{barrage.user.nick}}</span>
  33. <span class="item-date">{{barrage.createTime}}</span>
  34. </div>
  35. <div class="item-comment">{{barrage.content}}</div>
  36. </section>
  37. </li>
  38. </ul>
  39. <p v-if="barrages.length==0">(@@)暂无评论哦</p>
  40. </section>
  41. <footer class="moment-footer">
  42. <a :href='url' class='footer-link'>
  43. <section class="f-left-content">
  44. <i class="icon-logo"></i>
  45. </section>
  46. <section class="f-middle-content">
  47. <strong>饭盒视频</strong>
  48. <p>发现更精彩的游戏世界</p>
  49. </section>
  50. <section class="f-right-content">
  51. <div class="btn-dl"></div>
  52. </section>
  53. </a>
  54. </footer>
  55. </div>
  56. </template>
  57. <script>
  58. import page from './js/video';
  59. export default page;
  60. </script>