cn_run.htm 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  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. <title>猫王妙播_猫王收音机_猫王音响 - 猫王官网</title>
  8. <meta name="description" content="什么是猫王妙播,猫王官方音乐电台频道,365天24小时不间断的好音乐、好内容,为你提供最新鲜有趣的“声活方式”。">
  9. <meta name="keywords" content="猫王妙播">
  10. <link rel="canonical" href="https://www.radio1964.com/pindao" />
  11. <link rel="shortcut icon" href="./static/css/favicon.ico">
  12. <link rel="stylesheet" type="text/css" href="./static/css/headerComponent.css">
  13. <link rel="stylesheet" type="text/css" href="./static/css/maofm_1009.css">
  14. <script type="text/javascript">
  15. if (window.innerWidth <= 1080) {
  16. (function (doc, win) {
  17. var width = 750;
  18. var height = 1220;
  19. var docEl = doc.documentElement;
  20. var reCalc = (function () {
  21. var reCalc = function () {
  22. var winWidth = docEl.clientWidth;
  23. var winHeight = docEl.clientHeight;
  24. if (!winWidth) return;
  25. var fontSize;
  26. if (winWidth / winHeight > width / height) {
  27. fontSize = 100 * winHeight / height;
  28. } else {
  29. fontSize = 100 * winWidth / width;
  30. }
  31. docEl.style.fontSize = fontSize + 'px';
  32. console.log(fontSize, docEl.style.fontSize);
  33. return reCalc;
  34. };
  35. return reCalc();
  36. })();
  37. var rszEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  38. if (!doc.addEventListener) return;
  39. win.addEventListener(rszEvt, reCalc);
  40. })(document, window);
  41. } else {
  42. (function (doc, win) {
  43. var width = 1920;
  44. var height = 1080;
  45. var docEl = doc.documentElement;
  46. var reCalc = (function () {
  47. var reCalc = function () {
  48. var winWidth = docEl.clientWidth;
  49. var winHeight = docEl.clientHeight;
  50. if (!winWidth) return;
  51. var fontSize;
  52. if (winWidth / winHeight > width / height) {
  53. fontSize = 100 * winHeight / height;
  54. } else {
  55. fontSize = 100 * winWidth / width;
  56. }
  57. docEl.style.fontSize = fontSize + 'px';
  58. console.log(fontSize, docEl.style.fontSize);
  59. return reCalc;
  60. };
  61. return reCalc();
  62. })();
  63. var rszEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  64. if (!doc.addEventListener) return;
  65. win.addEventListener(rszEvt, reCalc);
  66. })(document, window);
  67. }
  68. </script>
  69. <script src="/static/js/lib/jquery.min.js"></script>
  70. <script type="text/javascript" src="./static/js/lib/scrolloverflow.min.js"></script>
  71. <script type="text/javascript" src="./static/js/lib/jquery.fullPage.min.js"></script>
  72. <script type="text/javascript" src="./static/js/module/TD.js"></script>
  73. <style type="text/css">
  74. .nav-lang:hover {
  75. height: 100px;
  76. }
  77. .section-app .app-qrcode {
  78. background-image: url(<!--{ echo $fm2Data['img_1']; }-->);
  79. }
  80. .maofm-3 .section-img {
  81. background-image: url(<!--{ echo $fm2Data['img_2']; }-->);
  82. }
  83. .maofm-7 .section-img {
  84. background-image: url(<!--{ echo $fm2Data['img_3']; }-->);
  85. }
  86. @media (max-width: 1600px) {
  87. .nav-lang:hover {
  88. height: 84px;
  89. }
  90. }
  91. @media (max-width: 1280px) {
  92. .nav-lang:hover {
  93. height: 72px;
  94. }
  95. }
  96. @media (max-device-width: 1081px) {
  97. .nav-lang:hover {
  98. height: 0.8rem;
  99. }
  100. }
  101. </style>
  102. </head>
  103. <body>
  104. <!-- http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_qrcode.jpg -->
  105. <div class="m-loading">
  106. <div class="loading-step"></div>
  107. <div class="loading-text">0%</div>
  108. <div class="img-preload">
  109. <img src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_01.jpg">
  110. <img src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_02.jpg">
  111. <img src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_03.jpg">
  112. <img src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_04.jpg">
  113. <img src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_05.jpg">
  114. <img src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_06.jpg">
  115. <img src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_07.jpg">
  116. <img src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_default.jpg">
  117. </div>
  118. </div>
  119. <header class="m-header">
  120. <a href="/index"><div class="header-logo"></div></a>
  121. <div class="nav-wrap">
  122. <div class="nav-shop" onclick="window.open('http://shop.radio1964.com')">
  123. 商城
  124. </div>
  125. <div class="nav-lang">
  126. <div class="nav-lang-current">
  127. <div class="nav-lang-item">简体</div>
  128. </div>
  129. <ul class="nav-lang-hidden">
  130. <li class="nav-lang-item lang-cn">简体</li>
  131. <li class="nav-lang-item lang-gb">繁体</li>
  132. <!-- <li class="nav-lang-item lang-en">EN</li> -->
  133. </ul>
  134. </div>
  135. <div class="nav-version">
  136. <a href="/maowang">
  137. <div class="nav-version-item version-maoking">猫王音响</div>
  138. </a>
  139. <a href="/pindao2">
  140. <div class="nav-version-item version-radiooo">猫王妙播</div>
  141. </a>
  142. <a href="/station">
  143. <div class="nav-version-item version-maofm">猫王音乐台</div>
  144. </a>
  145. </div>
  146. <div class="nav-menu"></div>
  147. </div>
  148. <div class="subnav-wrap">
  149. <div class="subnav-logo"></div>
  150. <div class="subnav-main-wrap">
  151. <a href="/pindao2"><div class="subnav-main-item">首页</div></a>
  152. </div>
  153. </div>
  154. </header>
  155. <div class="m-maofm">
  156. <div class="maofm-1 section">
  157. <div class="section-bg"></div>
  158. <h1 class="section-title"><!--{ echo $fm2Data['content'][0]; }--></h1>
  159. <p class="section-content"><!--{ echo $fm2Data['content'][1]; }--></p>
  160. <div class="section-app">
  161. <div class="app-logo"></div>
  162. <div class="app-qrcode"></div>
  163. <div class="app-hint">扫描二维码下载APP</div>
  164. </div>
  165. <div class="mb-download-wrap">
  166. <a href="itms-apps://itunes.apple.com/cn/app/id1402502317?mt=8"><div class="download-ios"></div></a>
  167. <a href="http://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/download_online/release/oh_play.apk"><div class="download-android"></div></a>
  168. </div>
  169. </div>
  170. <div class="maofm-2 section">
  171. <div class="section-bg"></div>
  172. <h2 class="section-title"><!--{ echo $fm2Data['content'][2]; }--></h2>
  173. <div class="section-content-wrap">
  174. <div class="content-item">
  175. <div class="content-title"><!--{ echo $fm2Data['content'][3]; }--></div>
  176. <div class="content-text"><!--{ echo $fm2Data['content'][4]; }--></div>
  177. </div>
  178. <div class="content-item">
  179. <div class="content-title"><!--{ echo $fm2Data['content'][5]; }--></div>
  180. <div class="content-text"><!--{ echo $fm2Data['content'][6]; }--></div>
  181. </div>
  182. <div class="content-item">
  183. <div class="content-title"><!--{ echo $fm2Data['content'][7]; }--></div>
  184. <div class="content-text"><!--{ echo $fm2Data['content'][8]; }--></div>
  185. </div>
  186. </div>
  187. </div>
  188. <div class="maofm-3 section">
  189. <div class="section-bg"></div>
  190. <div class="title-line"></div>
  191. <h2 class="section-title"><!--{ echo $fm2Data['content'][9]; }--></h2>
  192. <p class="section-content"><!--{ echo $fm2Data['content'][10]; }--></p>
  193. <div class="section-img"></div>
  194. </div>
  195. <div class="maofm-4 section">
  196. <div class="section-bg"></div>
  197. <h2 class="section-title"><!--{ echo $fm2Data['content'][11]; }--></h2>
  198. <p class="section-content"><!--{ echo $fm2Data['content'][12]; }--></p>
  199. </div>
  200. <div class="maofm-5 section">
  201. <div class="section-bg"></div>
  202. <div class="title-line"></div>
  203. <h2 class="section-title"><!--{ echo $fm2Data['content'][13]; }--></h2>
  204. <p class="section-content"><!--{ echo $fm2Data['content'][14]; }--></p>
  205. </div>
  206. <div class="maofm-6 section">
  207. <div class="section-bg"></div>
  208. <h2 class="section-title"><!--{ echo $fm2Data['content'][15]; }-->
  209. </h2>
  210. <p class="section-content"><!--{ echo $fm2Data['content'][16]; }--></p>
  211. </div>
  212. <div class="maofm-7 section">
  213. <div class="section-bg"></div>
  214. <div class="title-line"></div>
  215. <h2 class="section-title"><!--{ echo $fm2Data['content'][17]; }--></h2>
  216. <p class="section-content"><!--{ echo $fm2Data['content'][18]; }--></p>
  217. <div class="section-img"></div>
  218. </div>
  219. <div class="maofm-8 section">
  220. <div class="section-bg"></div>
  221. <h2 class="section-title"><!--{ echo $fm2Data['content'][19]; }--></h2>
  222. <p class="section-content"><!--{ echo $fm2Data['content'][20]; }--></p>
  223. <div class="section-price-wrap">
  224. <div class="price price-low">
  225. <div class="price-num">¥<span><!--{ echo $fm2Data['price_1']; }--></span></div>
  226. <div class="price-text">首月体验价</div>
  227. </div>
  228. <div class="price price-middle">
  229. <div class="price-num">¥<span><!--{ echo $fm2Data['price_2']; }--></span></div>
  230. <div class="price-text">月度会员</div>
  231. </div>
  232. <div class="price price-high">
  233. <div class="price-num">¥<span><!--{ echo $fm2Data['price_3']; }--></span></div>
  234. <div class="price-text">年度会员</div>
  235. </div>
  236. </div>
  237. </div>
  238. <!-- <div class="maofm-product section">
  239. <div class="product-title">OhPlay适用猫王·旅行者2号及原子唱机 B612,<br>
  240. 更多适用设备,敬请期待... ...</div>
  241. <img class="product-img" src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_product_01.png">
  242. <div class="product-name">猫王·旅行者2号</div>
  243. <div class="product-content-wrap">
  244. <div class="product-content"><div class="product-icon"></div>支持OhPlay 猫王妙播猫王妙播系统,将你喜欢的全网好内容自动生成到表盘,<br>
  245. 来自全世界的好音乐,尽在耳边。
  246. </div>
  247. <div class="product-content"><div class="product-icon"></div>最简单、最熟悉的旋钮操控,还原纯粹电台收听体验,无需手机,<br>
  248. 全网十二频道自由切换,好音乐无障碍连接。</div>
  249. </div>
  250. </div>
  251. <div class="maofm-product section product-2">
  252. <div class="product-title">猫王·原子唱机 B612</div>
  253. <img class="product-img" src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_product_02.png">
  254. <div class="product-name"></div>
  255. <div class="product-content-wrap">
  256. <div class="product-content"><div class="product-icon"></div>支持OhPlay猫王妙播系统,为您精选海量精彩内容,根据个人喜好标签<br>
  257. 自动生成12个频道,来自全世界的好音乐,尽在耳边。
  258. </div>
  259. <div class="product-content"><div class="product-icon"></div>简单、易用的神奇拨杆,连接蓝牙,全网十二频道自由切换,让聆听更纯粹。</div>
  260. <div class="product-content"><div class="product-icon"></div>简单、易用的蓝牙功能,可以连接任何内容。</div>
  261. </div>
  262. </div> -->
  263. <!--{ foreach($fm2Data['fm2'] as $key => $row) {}-->
  264. <div class="maofm-product section">
  265. <div class="section-bg"></div>
  266. <div class="product-title"><!--{ echo $fm2Data['fm2'][$key]['fm2_title_1']; }--></div>
  267. <img class="product-img" src="<!--{ echo $fm2Data['fm2'][$key]['fm2_img']; }-->">
  268. <div class="product-name"><!--{ echo $fm2Data['fm2'][$key]['fm2_title_2']; }--></div>
  269. <div class="product-content-wrap">
  270. <!--{ for($j = 0; $j < count($fm2Data['fm2'][$key]['fm2_content']); $j++) {}-->
  271. <div class="product-content"><div class="product-icon"></div><!--{ echo $fm2Data['fm2'][$key]['fm2_content'][$j]; }--></div>
  272. <!--{}}-->
  273. </div>
  274. </div>
  275. <!--{}}-->
  276. </div>
  277. <!--{ echo $footer; }-->
  278. </body>
  279. <script type="text/javascript" src="./static/js/module/headerComponent.js"></script>
  280. <script type="text/javascript" src="./static/js/maofm_0827.js"></script>
  281. </html>