bowuguan_bk.htm 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7. <!--{if ($type == 'evaluation'){}-->
  8. <title>产品测评_猫王收音机_猫王音响 - 猫王官网</title>
  9. <meta name="description" content="猫王官网产品测评栏目您提供猫王产品测评、猫王收音机测评、猫王音响测评等信息,根据具体商品的性能、规格、材质、使用寿命、外观等使用价值进行评价的过程。">
  10. <meta name="keywords" content="猫王产品测评,猫王收音机测评,猫王音响测评">
  11. <link rel="canonical" href="https://www.radio1964.com/bowuguan/run/page/<!--{ echo $page; }-->/type/evaluation" />
  12. <!--{}}-->
  13. <!--{if ($type == 'dynamic'){}-->
  14. <title>热点动态_最新资讯 - 猫王官网</title>
  15. <meta name="description" content="猫王官网热点动态栏目为您提供猫王热点动态、猫王最新资讯等信息,喜欢猫王收音机的朋友们来到这里查看阅读,如果你觉得不错的话,发给朋友一起来分享吧。">
  16. <meta name="keywords" content="猫王热点动态,猫王最新资讯">
  17. <link rel="canonical" href="https://www.radio1964.com/bowuguan/run/page/<!--{ echo $page; }-->/type/dynamic" />
  18. <!--{}}-->
  19. <!--{if ($type == 'video'){}-->
  20. <title>视频专题_猫王收音机_猫王音响 - 猫王官网</title>
  21. <meta name="description" content="猫王官网产品测评栏目您提供猫王视频专题、猫王收音机视频专题、猫王音响视频专题等信息,有时听听或许能有不一样的新鲜感,不仅可以收听到来自不同电台的音乐还能听出不一样的时代。">
  22. <meta name="keywords" content="猫王视频专题,猫王收音机视频专题,猫王音响视频专题">
  23. <link rel="canonical" href="https://www.radio1964.com/bowuguan/run/page/<!--{ echo $page; }-->/type/video" />
  24. <!--{}}-->
  25. <link rel="shortcut icon" href="/static/css/favicon.ico">
  26. <!--{ if ($lang == 'en') {}-->
  27. <link rel="stylesheet" type="text/css" href="/static/css/headerComponent_en.css">
  28. <!--{}else{}-->
  29. <link rel="stylesheet" type="text/css" href="/static/css/headerComponent.css">
  30. <!--{}}-->
  31. <link rel="stylesheet" type="text/css" href="/static/css/museumPage.css">
  32. <style type="text/css">
  33. <!--{if ($type == 'evaluation'){}-->
  34. .m-museum {
  35. background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%8D%9A%E7%89%A9%E9%A6%86/review_bg.jpg');
  36. }
  37. <!--{}}-->
  38. <!--{if ($type == 'dynamic'){}-->
  39. .m-museum {
  40. background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%8D%9A%E7%89%A9%E9%A6%86/hotspots_bg.jpg');
  41. }
  42. <!--{}}-->
  43. <!--{if ($type == 'video'){}-->
  44. .m-museum {
  45. background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%8D%9A%E7%89%A9%E9%A6%86/video_bg.jpg');
  46. }
  47. .section-wrap {
  48. padding: 0;
  49. }
  50. <!--{ for($i=0;$i<count($museData);$i++){ }-->
  51. .section-wrap:nth-child(<!--{ echo $i+1; }-->) .section-videoplay {
  52. /*background: url(<!--{ echo $museData[$i]['video_img']; }-->) no-repeat center center;
  53. background-size: cover;*/
  54. }
  55. <!--{}}-->
  56. <!--{}}-->
  57. /*@media (max-device-width: 1081px) {
  58. <!--{ for($i=0;$i<count($museData);$i++){ }-->
  59. .section-wrap:nth-child(<!--{echo $i+1 }-->) {
  60. background-image: url(<!--{ echo $museData[$i]['icon']; }-->);
  61. }
  62. <!--{}}-->
  63. }*/
  64. </style>
  65. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  66. <script type="text/javascript" src="/static/js/module/TD.js"></script>
  67. <script>
  68. var _hmt = _hmt || [];
  69. (function() {
  70. var hm = document.createElement("script");
  71. hm.src = "https://hm.baidu.com/hm.js?ec21b876c66f6033f549fcd833ac3b7b";
  72. var s = document.getElementsByTagName("script")[0];
  73. s.parentNode.insertBefore(hm, s);
  74. })();
  75. </script>
  76. </head>
  77. <body>
  78. <!--{ echo $header; }-->
  79. <div class="m-museum">
  80. <div class="museum-wrap">
  81. <!--{ for($i=0;$i<count($museData);$i++){ }-->
  82. <!--{if ($type == 'video'){}-->
  83. <!--{ $row1 = count($museData)/3; }-->
  84. <!--{ $row2 = count($museData)*2/3; }-->
  85. <!--{if ($i == 0){}-->
  86. <div class="section-row">
  87. <!--{}}-->
  88. <!--{if ($i == ceil($row1)){}-->
  89. </div>
  90. <div class="section-row">
  91. <!--{}}-->
  92. <!--{if ($i == ceil($row2)){}-->
  93. </div>
  94. <div class="section-row">
  95. <!--{}}-->
  96. <div class="section-wrap mb-video-section" data-id="<!--{ echo $museData[$i]['id']; }-->">
  97. <div class="alpha-layer"></div>
  98. <div class="section-text">
  99. <h1 class="section-date mb-display-toggle" style="display:none;">
  100. <!--{ echo $museData[$i]['gotime']; }-->
  101. </h1>
  102. <h2 class="section-title"><!--{ echo $museData[$i]['title']; }--></h2>
  103. <p class="section-content mb-display-toggle" style="text-align:left;">
  104. <!--{ $str = str_replace('}','</strong>',str_replace('{','<strong>',$museData[$i]['content'])); echo $str; }-->
  105. </p>
  106. <div class="section-videoplay">
  107. <img src="<!--{ echo $museData[$i]['video_img']; }-->"></img>
  108. <div class="btn-videoplay"></div>
  109. </div>
  110. </div>
  111. <div class="btn-details-show"></div>
  112. <div class="btn-details-hide"></div>
  113. </div>
  114. <!--{if ($i == count($museData) - 1){}-->
  115. </div>
  116. <!--{}}-->
  117. <!--{}else{}-->
  118. <!--{ $row1 = count($museData)/3; }-->
  119. <!--{ $row2 = count($museData)*2/3; }-->
  120. <!--{if ($i == 0){}-->
  121. <div class="section-row">
  122. <!--{}}-->
  123. <!--{if ($i == ceil($row1)){}-->
  124. </div>
  125. <div class="section-row">
  126. <!--{}}-->
  127. <!--{if ($i == ceil($row2)){}-->
  128. </div>
  129. <div class="section-row">
  130. <!--{}}-->
  131. <div class="section-wrap" data-id="<!--{ echo $museData[$i]['id']; }-->">
  132. <div class="alpha-layer"></div>
  133. <div class="section-img">
  134. <img src="<!--{ echo $museData[$i]['icon']; }-->" alt="">
  135. </div>
  136. <div class="section-text">
  137. <h2 class="section-title"><!--{ echo $museData[$i]['title']; }-->
  138. </h2>
  139. <p class="section-content">
  140. <!--{ $str = str_replace('}','</strong>',str_replace('{','<strong>',$museData[$i]['content'])); echo $str; }-->
  141. </p>
  142. <p class="section-date">
  143. <!--{ echo $museData[$i]['gotime']; }-->
  144. </p>
  145. </div>
  146. <div class="btn-details-show"></div>
  147. <div class="btn-details-hide"></div>
  148. </div>
  149. <!--{if ($i == count($museData) - 1){}-->
  150. </div>
  151. <!--{}}-->
  152. <!--{}}-->
  153. <!--{}}-->
  154. </div>
  155. <!--{if ($type != 'video'){}-->
  156. <div class="details-wrap">
  157. <!--{ for($i=0;$i<count($museData);$i++){ }-->
  158. <div class="details-section" data-id="<!--{ echo $museData[$i]['id']; }-->">
  159. <h2 class="details-title">
  160. <!--{ echo $museData[$i]['title']; }-->
  161. </h2>
  162. <p class="details-message">
  163. 作者:<!--{ echo $museData[$i]['author']; }-->
  164. 发表时间:<!--{ echo $museData[$i]['gotime']; }-->
  165. 阅览:<!--{ echo $museData[$i]['views']; }-->次
  166. </p>
  167. <!--{ for($j=0;$j<count($museData[$i]['imgContent']);$j++){ }-->
  168. <div class="details-content">
  169. <span>
  170. <!--{ $str = $museData[$i]['imgContent'][$j]; echo htmlspecialchars_decode($str) }-->
  171. </span>
  172. </div>
  173. <!--{ } }-->
  174. <div class="btn-close">+</div>
  175. </div>
  176. <!--{ } }-->
  177. </div>
  178. <!--{ } }-->
  179. <!--{if ($type == 'video'){}-->
  180. <div class="video-wrap">
  181. <!--{ for($i=0;$i<count($museData);$i++){ }-->
  182. <div class="video-section" data-id="<!--{ echo $museData[$i]['id']; }-->">
  183. <video class="video-item" src="<!--{ echo $museData[$i]['video']; }-->" controls="true"></video>
  184. <div class="btn-close">+</div>
  185. </div>
  186. <!--{ } }-->
  187. </div>
  188. <!--{ } }-->
  189. </div>
  190. </body>
  191. <script type="text/javascript" src="/static/js/module/headerComponent.js"></script>
  192. <script>
  193. var _hmt = _hmt || [];
  194. (function() {
  195. var hm = document.createElement("script");
  196. hm.src = "https://hm.baidu.com/hm.js?ec21b876c66f6033f549fcd833ac3b7b";
  197. var s = document.getElementsByTagName("script")[0];
  198. s.parentNode.insertBefore(hm, s);
  199. })();
  200. </script>
  201. <script type="text/javascript">
  202. <!--{if ($type != 'video'){}-->
  203. // 文字页面的处理函数
  204. var textTypeHandler = function (wrapEl) {
  205. $(document).ready(function () {
  206. var id = location.hash;
  207. var sectionArr = $('.section-wrap');
  208. sectionArr.each(function (ele) {
  209. if ('#' + $(this).data('id').toString() === id) {
  210. $(this).find('.btn-details-show').click();
  211. }
  212. })
  213. });
  214. $('.btn-details-show').on('click', function () {
  215. var viewCount = function () {
  216. var id;
  217. if (wrapEl.data('id') !== 'undefined') {
  218. id = wrapEl.data('id');
  219. } else {
  220. id = -1;
  221. }
  222. var readedStr = '';
  223. if (localStorage.getItem('readed')) {
  224. readedStr = localStorage.getItem('readed');
  225. }
  226. if(readedStr.match(id.toString()) !== null) {
  227. return;
  228. } else {
  229. readedStr = readedStr + id + ',';
  230. localStorage.setItem('readed',readedStr);
  231. TD.ajax({
  232. type: 'GET',
  233. url: '/index/museum/view',
  234. data: {
  235. id: id
  236. },
  237. success: function (res) {
  238. console.log(res);
  239. return res;
  240. },
  241. error: function (data) {
  242. console.log(data);
  243. return 0;
  244. }
  245. })
  246. }
  247. }
  248. // var index = $(this).parent().index();
  249. var id;
  250. var wrapEl = $(this).parent();
  251. if (wrapEl.data('id') !== 'undefined') {
  252. id = wrapEl.data('id');
  253. } else {
  254. id = -1;
  255. }
  256. // 移动端则不需要继续处理
  257. if (document.documentElement.clientWidth <= 1080) {
  258. // $('.details-section:nth-child(' + (index+1) + ')').fadeIn(300);
  259. $('.details-section').each(function (ele) {
  260. if ($(this).data('id') === id) {
  261. $(this).fadeIn(300);
  262. }
  263. });
  264. return;
  265. }
  266. // 位于左边不动,位于右边则先移动到左边
  267. // if (index%2 === 1) {
  268. // // 隐藏左边文章
  269. // $('.section-wrap:nth-child(' + index + ')').fadeOut(300);
  270. // wrapEl.animate({
  271. // left: '-46%'
  272. // }, 300, function () {
  273. // wrapEl.css('left', 0);
  274. // })
  275. // }
  276. //wrapEl.children('.btn-details-show').hide();
  277. //wrapEl.children('.btn-details-hide').show();
  278. // wrapEl.find('img').css('transform', 'scale(0.75)');
  279. $('.details-section').each(function () {
  280. if ($(this).css('display') === 'block') {
  281. $(this).fadeOut(300);
  282. }
  283. });
  284. // $('.details-section:nth-child(' + (index+1) + ')').fadeIn(300);
  285. $('.details-section').each(function (ele) {
  286. if ($(this).data('id') === id) {
  287. console.log($(this).data('id'))
  288. $(this).fadeIn(300);
  289. }
  290. })
  291. // $('.section-wrap').addClass('section-block');
  292. $('.section-row').addClass('section-block');
  293. viewCount(wrapEl);
  294. var hashHandler = function () {
  295. var id;
  296. if (wrapEl.data('id') !== 'undefined') {
  297. id = wrapEl.data('id');
  298. } else {
  299. id = -1;
  300. }
  301. location.hash = id;
  302. }
  303. hashHandler();
  304. });
  305. // $('.btn-details-hide').on('click', function () {
  306. // var index = $(this).parent().index();
  307. // var wrapEl = $(this).parent();
  308. // if (index%2 === 1) {
  309. // // 恢复左边文章
  310. // $('.section-wrap:nth-child(' + index + ')').fadeIn(300);
  311. // wrapEl.css('left', '-46%');
  312. // wrapEl.animate({
  313. // left: '0'
  314. // }, 300, function () {
  315. // // wrapEl.css('left', 0);
  316. // })
  317. // }
  318. // wrapEl.children('.btn-details-hide').hide();
  319. // wrapEl.children('.btn-details-show').show();
  320. // wrapEl.find('img').css('transform', 'scale(1)');
  321. // $('.details-section:nth-child(' + (index+1) + ')').fadeOut(300);
  322. // })
  323. $('.details-wrap .btn-close').on('click', function () {
  324. var index = $(this).parent().index();
  325. $(this).parent().fadeOut(300);
  326. // $('.details-section').each(function () {
  327. // if ($(this).css('display') === 'block') {
  328. // $(this).fadeOut(300);
  329. // }
  330. // });
  331. // $('.section-wrap').removeClass('section-block');
  332. $('.section-row').removeClass('section-block');
  333. location.hash = '';
  334. })
  335. }
  336. textTypeHandler();
  337. <!--{}}-->
  338. <!--{if ($type == 'video'){}-->
  339. // 视频页面的处理函数
  340. var videoTypeHandler = function () {
  341. // $('.btn-play').show();
  342. $('.details-wrap') && $('.details-wrap').hide();
  343. $('.btn-details-show').hide();
  344. // $('.section-videoplay').hover(function () {
  345. // $(this).css('opacity', 0.6);
  346. // },function () {
  347. // $(this).css('opacity', 1);
  348. // })
  349. $('.section-videoplay').on('click', function () {
  350. var id;
  351. var wrapEl = $(this).parent().parent();
  352. if (wrapEl.data('id') !== 'undefined') {
  353. id = wrapEl.data('id');
  354. } else {
  355. id = -1;
  356. }
  357. $('.video-section').each(function (ele) {
  358. if ($(this).data('id') === id) {
  359. $(this).fadeIn(300);
  360. var videoEl = $(this).find('.video-item')[0];
  361. videoEl.currentTime = 0;
  362. videoEl.play();
  363. }
  364. });
  365. // var index = $(this).parent().parent().index();
  366. // var videoSectionEl = $('.video-section:nth-child(' + (index+1) + ')');
  367. // var videoEl = videoSectionEl.find('.video-item')[0];
  368. // videoSectionEl.fadeIn(300);
  369. // videoEl.currentTime = 0;
  370. // videoEl.play();
  371. })
  372. if (document.documentElement.clientWidth <= 1080) {
  373. $('.section-wrap').on('click', function () {
  374. var id;
  375. var wrapEl = $(this).parent().parent();
  376. if (wrapEl.data('id') !== 'undefined') {
  377. id = wrapEl.data('id');
  378. } else {
  379. id = -1;
  380. }
  381. $('.video-section').each(function (ele) {
  382. if ($(this).data('id') === id) {
  383. $(this).fadeIn(300);
  384. var videoEl = $(this).find('.video-item')[0];
  385. videoEl.currentTime = 0;
  386. videoEl.play();
  387. }
  388. });
  389. // var index = $(this).parent().index();
  390. // var videoSectionEl = $('.video-section:nth-child(' + (index+1) + ')');
  391. // var videoEl = videoSectionEl.find('.video-item')[0];
  392. // videoSectionEl.fadeIn(300);
  393. // videoEl.currentTime = 0;
  394. // videoEl.play();
  395. })
  396. }
  397. $('.video-section').on('click', function (event) {
  398. var evt = event || window.event;
  399. var target = evt.target || evt.srcElement;
  400. if (target.nodeName.toLowerCase() === 'video') {
  401. console.log('video');
  402. return;
  403. }
  404. $(this).find('.video-item')[0].pause();
  405. $(this).fadeOut(300);
  406. })
  407. }
  408. videoTypeHandler();
  409. <!--{}}-->
  410. </script>
  411. </html>