feature.html 9.4 KB

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