article.html 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title><{$info['name']}> - <{$config['name']}></title>
  7. <link href="css/global.css?v=d4ecd76d" rel="stylesheet"><link href="css/article.css?v=d4ecd76d" rel="stylesheet">
  8. <style>
  9. .emoji {
  10. width:16px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <header style="display:none;">
  16. <a class="back" style="display:none;"></a>
  17. <{$config['name']}>
  18. </header>
  19. <div class="main">
  20. <h1 class="h1"><{$info['name']}></h1>
  21. <div class='article-infos'>
  22. <div class='author'>作者:<{$info['author']['name']}></div>
  23. <{if(in_array(1, $info['function'])):}>
  24. <div class='div-nums'>
  25. <span class='ico-view'></span> <{$info['num_view']}></div>
  26. <{endif}>
  27. </div>
  28. <div class="no-expanded">
  29. <div class="rich-wrapper">
  30. <{loop($content):}>
  31. <{if($v['type'] == 1):}>
  32. <{if(isset($v['content'])):}>
  33. <{str_replace(array('width', 'height'), array('widths', 'heights'), $v['content'])}>
  34. <{endif}>
  35. <{elseif($v['type'] == 2):}>
  36. <!--视频-->
  37. <div class="p-img">
  38. <div class="poster" id="video_<{$k}>" data-href="<{$v['content']['video']}>">
  39. <img src="<{$v['content']['pic_cover_169']}>"
  40. alt="" class="media-cover">
  41. <div class="ico-video-play"></div>
  42. </div>
  43. <div class="video-cont">
  44. <video class="video-js" id="video_<{$k}>-vdom"></video>
  45. </div>
  46. <!--视频/图片标题-->
  47. <div class="tit"><{$v['content']['name']}></div>
  48. <!--视频/图片副标题-->
  49. <div class="tit-mini" style="display:none;">已有 <{$v['content']['num_view']}> 人观看了视频</div>
  50. </div>
  51. <{elseif($v['type'] == 3):}>
  52. <!--直播-->
  53. <div class="p-img">
  54. <div class="poster" id="live_<{$k}>" data-href="<{$v['content']['url']}>">
  55. <img src="<{$v['content']['pic_cover_169']}>"
  56. alt="" class="media-cover">
  57. <{if($v['content']['status'] != 1):}>
  58. <div class="ico-video-play"></div>
  59. <{endif}>
  60. <span class="tip">开播时间:<{$v['content']['sdate_time']}></span>
  61. </div>
  62. <div class="video-cont">
  63. <video class="video-js" id="live_<{$k}>-vdom"></video>
  64. </div>
  65. <!--视频/图片标题-->
  66. <div class="tit"><{$v['content']['name']}></div>
  67. </div>
  68. <!--直播-->
  69. <{if($v['content']['status'] == 2):}>
  70. <div class="live-notice" style="display:none;">
  71. <div class="online-user"><{$v['content']['num_user']}>人在线</div>
  72. </div>
  73. <{elseif($v['content']['status'] == 3):}>
  74. <div class="live-notice" style="display:none;">
  75. <div class="watch-user"><{$v['content']['num_view']}> 人观看</div>
  76. </div>
  77. <{elseif($v['content']['status'] == 1):}>
  78. <div class="live-notice" style="display:none;">
  79. <div class="notice-time">开播时间 <{$v['content']['sdate_time']}></div>
  80. <a class="app-open" href="<{$app}>">打开JSTYLE精美APP,开启直播提醒</a>
  81. <!--
  82. <{if($v['content']['user_act']['note'] == 1):}>
  83. <a id="live_note_<{$v['content']['id']}>" href="jstyle://live_note?id=<{$k}>&live_id=<{$v['content']['id']}>&live_status=<{$v['content']['status']}>&note=1" class="btn-notice">已设置提醒</a>
  84. <{else:}>
  85. <a id="live_note_<{$v['content']['id']}>" href="jstyle://live_note?id=<{$k}>&live_id=<{$v['content']['id']}>&live_status=<{$v['content']['status']}>&note=2" class="btn-notice">提醒我</a>
  86. <{endif}>
  87. -->
  88. </div>
  89. <{endif}>
  90. <{elseif($v['type'] == 5 && isset($v['cover'])):}>
  91. <!--音频-->
  92. <div class="p-voice" id="audio_<{$k}>" data-href="<{$v['content']}>">
  93. <img src="<{$v['cover']}>"
  94. alt="" class="mavatar">
  95. <div class="sound"></div>
  96. </div>
  97. <{elseif($v['type'] == 6 && isset($v['cover'])):}>
  98. <!--视频-->
  99. <div class="p-img">
  100. <div class="poster" id="video_<{$k}>" data-href="<{$v['content']}>">
  101. <img src="<{$v['cover']}>"
  102. alt="" class="media-cover">
  103. <div class="ico-video-play"></div>
  104. </div>
  105. <div class="video-cont">
  106. <video class="video-js" id="video_<{$k}>-vdom"></video>
  107. </div>
  108. <!--视频/图片标题-->
  109. <div class="tit"><{$v['name']}></div>
  110. </div>
  111. <{elseif($v['type'] == 7):}>
  112. <!--图片-->
  113. <div class="p-img">
  114. <a id="link_<{$k}>" href="<{if (isset($v['link']) && $v['link']):}><{$v['link']}><{else:}>javascript:;<{endif}>">
  115. <img class="img" src="<{$v['pic_cover']}>" alt="">
  116. </a>
  117. </div>
  118. <{endif}>
  119. <{endloop}>
  120. </div>
  121. <a class="btn-expand">&nbsp;</a>
  122. </div>
  123. <a class="app-open" href="<{$app}>">打开JSTYLE精美APP,查看更多内容</a>
  124. <{if(isset($comment) && $comment && in_array(2, $info['function'])):}>
  125. <div class="comments">
  126. <div class='title'><span>热门评论</span></div>
  127. <div class="comments-list">
  128. <{loop($comment):}>
  129. <div class='comment'>
  130. <div class='user'>
  131. <image src="<{isset($v1['avatar']) ? $v1['avatar'] : ""}>"></image>
  132. </div>
  133. <div class='info'>
  134. <div class='username'>
  135. <span><{$v1['username']}></span>
  136. </div>
  137. <div class='date'>
  138. <span><{$v1['time']}></span>
  139. </div>
  140. <div class='p'>
  141. <span><{if(isset($v1['content'])):}><{$v1['content']}><{endif}></span>
  142. </div>
  143. </div>
  144. </div>
  145. <{endloop}>
  146. </div>
  147. </div>
  148. <a class="app-open" href="<{$app}>">打开JSTYLE精美APP,查看全部评论</a>
  149. <{endif}>
  150. <{if(isset($relation) && $relation):}>
  151. <div class="recommends">
  152. <div class='title'><span>相关推荐</span></div>
  153. <div class="recommends-list">
  154. <{loop($relation):}>
  155. <div class='article clearfix' style="cursor: pointer;" onclick="getUrl('<{Dever::url('view.get?type=' . $type . '&id=' . $v2['id'], 'h5')}>')">
  156. <div class='cover'>
  157. <img class='default' src="<{$v2['pic_cover_169']}>" />
  158. <div class='ico-play'></div>
  159. </div>
  160. <div class='tit'><span>
  161. <{$v2['name']}>
  162. </span></div>
  163. <div class='date'>
  164. <!-- <span class='type'>{{item.author_name}}</span> -->
  165. <span class='d'><{$v2['cate_name']}> <{$v2['pdate']}></span>
  166. </div>
  167. </div>
  168. <{endloop}>
  169. </div>
  170. </div>
  171. <{endif}>
  172. </div>
  173. <dl class="fixed-app-open">
  174. <dt>
  175. <img src="images/logo.png" alt="JSTYLE精美">
  176. <div>
  177. <h3>JSTYLE精美</h3>
  178. <span>我的时尚指南</span>
  179. </div>
  180. </dt>
  181. <dd>
  182. <a href="<{$app}>">打开APP</a>
  183. </dd>
  184. </dl>
  185. <script type="text/javascript" src="js/global.js?v=d4ecd76d"></script><script type="text/javascript" src="js/article.js?v=d4ecd76d"></script></body>
  186. <{Dever::render('share', $this->data)}>
  187. <script>
  188. function getUrl(url)
  189. {
  190. location.href= url;
  191. }
  192. var playerList = {};
  193. function stopPlayers(id) {
  194. for (var key in playerList) {
  195. if (key !== id) {
  196. playerList[key].pause()
  197. $('#' + key + '-vdom').parent('.video-cont').hide();
  198. $('#' + key).show();
  199. }
  200. }
  201. }
  202. $('.ico-video-play').click(function () {
  203. var poster = $(this).closest('.poster');
  204. var id = poster.hide().attr('id');
  205. $('#' + id + '-vdom').parent('.video-cont').show();
  206. var player = $('#' + id + '-vdom')[0];
  207. player.src = poster.data('href');
  208. player.load();
  209. player.play();
  210. player.addEventListener('play', function () {
  211. stopPlayers(id)
  212. },false);
  213. player.addEventListener('pause', function () {
  214. $('#' + id + '-vdom').parent('.video-cont').hide();
  215. $('#' + id).show();
  216. },false);
  217. player.addEventListener('ended', function () {
  218. $('#' + id + '-vdom').parent('.video-cont').hide();
  219. $('#' + id).show();
  220. },false);
  221. playerList[id] = player;
  222. })
  223. $('.btn-expand').click(function () {
  224. $('.no-expanded').addClass('expanded')
  225. })
  226. $('.p-voice').each(function(){
  227. var url = $(this).data('href');
  228. var id = $(this).attr('id');
  229. var audio = new Audio;
  230. audio.src = url;
  231. //audio.play();
  232. audio.addEventListener('play', function () {
  233. stopPlayers(id);
  234. $('#'+ id).find('.sound').addClass('playing');
  235. },false);
  236. audio.addEventListener('pause', function () {
  237. $('#'+ id).find('.sound').removeClass('playing');
  238. },false);
  239. audio.addEventListener('ended', function () {
  240. $('#'+ id).find('.sound').removeClass('playing');
  241. },false);
  242. playerList[id] = audio;
  243. })
  244. $('.p-voice').click(function () {
  245. var id = $(this).attr('id');
  246. if(playerList[id].paused){
  247. playerList[id].play();
  248. }else{
  249. playerList[id].pause();
  250. }
  251. })
  252. </script>
  253. <script type="text/javascript" src="script/lib/jquery/jquery.min.js"></script>
  254. <script type="text/javascript" src="js/emoji.js?v=d4ecd76d"></script>
  255. </html>