moment.vue 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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">{{extend.text}}</div>
  17. <ul class="list-pic">
  18. <li v-for="pic in extend.pics" @click="previewImage(pic)" class="item-pic" :style="{backgroundImage : 'url('+pic+')'}">
  19. </li>
  20. </ul>
  21. </div>
  22. <div v-if="type==3" class="type1">
  23. <div class="txt">{{extend.title}}</div>
  24. <video class="moment-video" preload="meta" controls="" :poster="extend.cover">
  25. <source :src="extend.video.videoUrls[0].urls[0]" type="video/mp4">
  26. 您的浏览器不支持 video 标签
  27. </video>
  28. </div>
  29. </section>
  30. <section class="moment-comment">
  31. <h2 class="comment-header">评论</h2>
  32. <ul class="list-comment">
  33. <li v-for="comment in comments">
  34. <section class="item-cover">
  35. <img :src="comment.user.head" alt="">
  36. </section>
  37. <section class="item-cont">
  38. <div class="item-info">
  39. <span class="item-nick">{{comment.user.nick}}</span>
  40. <span class="item-date">{{comment.createTime}}</span>
  41. </div>
  42. <div class="item-comment">{{comment.content}}</div>
  43. </section>
  44. </li>
  45. </ul>
  46. <p v-if="comments.length==0">(@@)暂无评论哦</p>
  47. </section>
  48. <footer class="moment-footer">
  49. <a :href='url' class='footer-link'>
  50. <section class="f-left-content">
  51. <i class="icon-logo"></i>
  52. </section>
  53. <section class="f-middle-content">
  54. <strong>饭盒视频</strong>
  55. <p>发现更精彩的游戏世界</p>
  56. </section>
  57. <section class="f-right-content">
  58. <div class="btn-dl"></div>
  59. </section>
  60. </a>
  61. </footer>
  62. </div>
  63. </template>
  64. <script>
  65. import page from './js/moment';
  66. export default page;
  67. </script>