article.html 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  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. <{elseif($v['type'] == 8):}>
  119. <!--动图-->
  120. <div class="p-img">
  121. <a id="link_<{$k}>" href="<{if (isset($v['link']) && $v['link']):}><{$v['link']}><{else:}>javascript:;<{endif}>">
  122. <img class="img" src="<{$v['pic']}>" alt="">
  123. </a>
  124. </div>
  125. <{endif}>
  126. <{endloop}>
  127. </div>
  128. <a class="btn-expand">&nbsp;</a>
  129. </div>
  130. <a class="app-open" href="<{$app}>">打开JSTYLE精美APP,查看更多内容</a>
  131. <{if(isset($comment) && $comment && in_array(2, $info['function'])):}>
  132. <div class="comments">
  133. <div class='title'><span>热门评论</span></div>
  134. <div class="comments-list">
  135. <{loop($comment):}>
  136. <div class='comment'>
  137. <div class='user'>
  138. <image src="<{isset($v1['avatar']) ? $v1['avatar'] : ""}>"></image>
  139. </div>
  140. <div class='info'>
  141. <div class='username'>
  142. <span><{$v1['username']}></span>
  143. </div>
  144. <div class='date'>
  145. <span><{$v1['time']}></span>
  146. </div>
  147. <div class='p'>
  148. <span><{if(isset($v1['content'])):}><{$v1['content']}><{endif}></span>
  149. </div>
  150. </div>
  151. </div>
  152. <{endloop}>
  153. </div>
  154. </div>
  155. <a class="app-open" href="<{$app}>">打开JSTYLE精美APP,查看全部评论</a>
  156. <{endif}>
  157. <{if(isset($relation) && $relation):}>
  158. <div class="recommends">
  159. <div class='title'><span>相关推荐</span></div>
  160. <div class="recommends-list">
  161. <{loop($relation):}>
  162. <div class='article clearfix' style="cursor: pointer;" onclick="getUrl('<{Dever::url('view.get?type=' . $type . '&id=' . $v2['id'], 'h5')}>')">
  163. <div class='cover'>
  164. <img class='default' src="<{$v2['pic_cover_169']}>" />
  165. <div class='ico-play'></div>
  166. </div>
  167. <div class='tit'><span>
  168. <{$v2['name']}>
  169. </span></div>
  170. <div class='date'>
  171. <!-- <span class='type'>{{item.author_name}}</span> -->
  172. <span class='d'><{$v2['cate_name']}> <{$v2['pdate']}></span>
  173. </div>
  174. </div>
  175. <{endloop}>
  176. </div>
  177. </div>
  178. <{endif}>
  179. </div>
  180. <dl class="fixed-app-open">
  181. <dt>
  182. <img src="images/logo.png" alt="JSTYLE精美">
  183. <div>
  184. <h3>JSTYLE精美</h3>
  185. <span>我的时尚指南</span>
  186. </div>
  187. </dt>
  188. <dd>
  189. <a href="<{$app}>">打开APP</a>
  190. </dd>
  191. </dl>
  192. <script type="text/javascript" src="js/global.js?v=d4ecd76d"></script><script type="text/javascript" src="js/article.js?v=d4ecd76d"></script></body>
  193. <{Dever::render('share', $this->data)}>
  194. <script>
  195. function getUrl(url)
  196. {
  197. location.href= url;
  198. }
  199. var playerList = {};
  200. function stopPlayers(id) {
  201. for (var key in playerList) {
  202. if (key !== id) {
  203. playerList[key].pause()
  204. $('#' + key + '-vdom').parent('.video-cont').hide();
  205. $('#' + key).show();
  206. }
  207. }
  208. }
  209. $('.ico-video-play').click(function () {
  210. var poster = $(this).closest('.poster');
  211. var id = poster.hide().attr('id');
  212. $('#' + id + '-vdom').parent('.video-cont').show();
  213. var player = $('#' + id + '-vdom')[0];
  214. player.src = poster.data('href');
  215. player.load();
  216. player.play();
  217. player.addEventListener('play', function () {
  218. stopPlayers(id)
  219. },false);
  220. player.addEventListener('pause', function () {
  221. $('#' + id + '-vdom').parent('.video-cont').hide();
  222. $('#' + id).show();
  223. },false);
  224. player.addEventListener('ended', function () {
  225. $('#' + id + '-vdom').parent('.video-cont').hide();
  226. $('#' + id).show();
  227. },false);
  228. playerList[id] = player;
  229. })
  230. $('.btn-expand').click(function () {
  231. $('.no-expanded').addClass('expanded')
  232. })
  233. $('.p-voice').each(function(){
  234. var url = $(this).data('href');
  235. var id = $(this).attr('id');
  236. var audio = new Audio;
  237. audio.src = url;
  238. //audio.play();
  239. audio.addEventListener('play', function () {
  240. stopPlayers(id);
  241. $('#'+ id).find('.sound').addClass('playing');
  242. },false);
  243. audio.addEventListener('pause', function () {
  244. $('#'+ id).find('.sound').removeClass('playing');
  245. },false);
  246. audio.addEventListener('ended', function () {
  247. $('#'+ id).find('.sound').removeClass('playing');
  248. },false);
  249. playerList[id] = audio;
  250. })
  251. $('.p-voice').click(function () {
  252. var id = $(this).attr('id');
  253. if(playerList[id].paused){
  254. playerList[id].play();
  255. }else{
  256. playerList[id].pause();
  257. }
  258. })
  259. </script>
  260. <script type="text/javascript" src="script/lib/jquery/jquery.min.js"></script>
  261. <script type="text/javascript" src="js/emoji.js?v=d4ecd76d"></script>
  262. </html>