cn_run.htm 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525
  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/ohplay.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="https://cdn.bootcss.com/jquery/3.2.1/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. @media (max-width: 1600px) {
  75. .nav-lang:hover {
  76. height: 84px;
  77. }
  78. }
  79. @media (max-width: 1280px) {
  80. .nav-lang:hover {
  81. height: 72px;
  82. }
  83. }
  84. @media (max-device-width: 1081px) {
  85. .nav-lang:hover {
  86. height: 0.8em;
  87. }
  88. }
  89. .ohplay-station-2 {
  90. background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_station2.png') no-repeat center center;
  91. }
  92. .ohplayAlert {
  93. position: fixed;
  94. display: flex;
  95. justify-content: center;
  96. align-items: center;
  97. width: 100%;
  98. height: 100%;
  99. z-index: 1001;
  100. top: 0;
  101. }
  102. .appTips {
  103. position: fixed;
  104. width: 100%;
  105. height: 100%;
  106. z-index: 1001;
  107. background: rgba(255, 253, 242, 0.9);
  108. top: 0;
  109. left: 0;
  110. }
  111. .appTips .appTipsBg {
  112. position: absolute;
  113. opacity: 0.6;
  114. top: 0;
  115. }
  116. .appTips .quak {
  117. position: absolute;
  118. width: 2em;
  119. top: 0.5em;
  120. right: 0.5em;
  121. }
  122. .appTips .brower {
  123. right: 1.5em;
  124. top: 1.5em;
  125. width: 1.5em;
  126. }
  127. .appTips .tipText {
  128. position: absolute;
  129. right: 2.8em;
  130. top: 2em;
  131. }
  132. .appTips .tipText p {
  133. line-height: 0.3em;
  134. font-size: 16px;
  135. }
  136. .appTips .tipsp {
  137. display: flex;
  138. flex-direction: row;
  139. }
  140. </style>
  141. <script>
  142. function Close() {
  143. document.getElementsByClassName("ohplayAlert")[0].style.display = "none";
  144. }
  145. function IosDownload() {
  146. window.location.href = 'https://apps.apple.com/cn/app/ohplay%E7%8C%AB%E7%8E%8B%E5%A6%99%E6%92%AD/id1402502317';
  147. }
  148. function AndroidDownload() {
  149. const u = navigator.userAgent;
  150. const IsWeixin = u.indexOf('MicroMessenger') > -1; // 是否微信内置浏览器
  151. const IsWeibo = u.indexOf('Weibo') > -1; // 是否Weibo内置浏览器
  152. const IsQq = u.indexOf('QQ') > -1 && (u.indexOf('V1_IPH_SQ') > -1 || u.indexOf('V1_AND_SQ') > -1); // 是否QQ内置浏览器
  153. const openTips = IsWeixin || IsQq || IsWeibo;
  154. if (openTips) {
  155. document.getElementsByClassName("ohplayAlert")[0].style.display = "block";
  156. return;
  157. }
  158. window.location.href = 'http://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/download_online/release/oh_play.apk';
  159. }
  160. </script> -->
  161. <script>
  162. const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? "Mobile" : "Desktop";
  163. if (detectDeviceType() === 'Desktop') {
  164. window.location = "http://download.radio1964.com/readme?";
  165. }
  166. var xhr = null
  167. if(window.XMLHttpRequest){
  168. xhr = new XMLHttpRequest()
  169. }else{
  170. xhr = new ActiveXObject("Microsoft.XMLHTTP")
  171. }
  172. </script>
  173. </head>
  174. <body>
  175. <div class="bg">
  176. <div class="box">
  177. <div class="header">
  178. <img class="icon" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/icon-1.png" />
  179. <h3>猫王妙播Pro</h3>
  180. </div>
  181. <div class="banner">
  182. <img class="left" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/banner-1.png" />
  183. <img class="center" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/banner-2.png" />
  184. <img class="right" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/banner-3.png" />
  185. </div>
  186. <div class="button">
  187. <a id="ios" class="btn green" href="https://apps.apple.com/cn/app/com.muzen.radioplayer/id1402502317">
  188. <img class="button-icon"
  189. src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/iPhone.png" />iPhone下载</a>
  190. <a id="Android" class="btn green"
  191. href="https://a.app.qq.com/o/simple.jsp?pkgname=com.muzen.radioplayer">
  192. <img class="button-icon"
  193. src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/Android.png" />Android下载
  194. </a>
  195. </div>
  196. </div>
  197. <div class="box">
  198. <div class="header">
  199. <img class="icon" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/icon-2.png" />
  200. <h3>猫王灵感</h3>
  201. <h4>(W1+手表专用APP)</h4>
  202. </div>
  203. <div class="banner">
  204. <img class="left" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/banner-4.png" />
  205. <img class="center" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/banner-5.png" />
  206. <img class="right" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/banner-6.png" />
  207. </div>
  208. <div class="button">
  209. <a id="ios" class="btn purple" href="https://apps.apple.com/cn/app/com.Muzen.MuzenLife/id6449812627">
  210. <img class="button-icon"
  211. src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/iPhone.png" />iPhone下载
  212. </a>
  213. <a id="Android" class="btn purple apk" href="#">
  214. <img class="button-icon" quer
  215. src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/Android.png" />Android下载
  216. </a>
  217. </div>
  218. </div>
  219. </div>
  220. <script>
  221. const userAgent = navigator.userAgent;
  222. var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  223. var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1;
  224. var iOSElement = document.querySelectorAll("#ios")
  225. var AndElement = document.querySelectorAll("#Android")
  226. if (isiOS) {
  227. for (var i = 0; i < AndElement.length; i++) {
  228. AndElement[i].style.pointerEvents = "none"
  229. }
  230. } else {
  231. for (var i = 0; i < iOSElement.length; i++) {
  232. iOSElement[i].style.pointerEvents = "none"
  233. }
  234. }
  235. var apkELement = document.querySelector('.apk')
  236. xhr.open('get', 'https://client.ohplay.radio1964.net/device/project/update/group?projectId=7', true)
  237. xhr.onreadystatechange = function() {
  238. if(xhr.status === 200 && xhr.readyState === 4) {
  239. apkELement.href = JSON.parse(xhr.responseText).data.android[0].downUrl
  240. }
  241. }
  242. xhr.send()
  243. </script>
  244. </body>
  245. <style>
  246. * {
  247. margin: 0;
  248. padding: 0;
  249. }
  250. body {
  251. height: 100%;
  252. }
  253. a {
  254. text-decoration: none;
  255. font-weight: bold;
  256. }
  257. .bg {
  258. width: 100%;
  259. height: 100%;
  260. background: url('https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/download-bg.png');
  261. background-repeat: no-repeat;
  262. background-size: 100%;
  263. }
  264. .box {
  265. position: relative;
  266. }
  267. .header {
  268. padding-top: 2.5rem;
  269. margin-bottom: 2rem;
  270. text-align: center;
  271. }
  272. .icon {
  273. width: 5rem;
  274. height: 5rem;
  275. margin-bottom: 0.5rem;
  276. }
  277. .header h3 {
  278. font-size: 20px;
  279. color: #353535;
  280. }
  281. .header h4 {
  282. font-size: 13px;
  283. color: #777777;
  284. }
  285. .banner {
  286. display: flex;
  287. align-items: center;
  288. justify-content: center;
  289. overflow: hidden;
  290. margin-bottom: 3.75rem;
  291. }
  292. .banner img {
  293. border-radius: 16px;
  294. }
  295. .banner .left,
  296. .banner .right {
  297. width: 8.75rem;
  298. height: 15.5rem;
  299. }
  300. .banner .center {
  301. width: 10rem;
  302. height: 17.75rem;
  303. margin: 0 12px;
  304. }
  305. .button {
  306. display: flex;
  307. flex-direction: column;
  308. justify-content: center;
  309. align-items: center;
  310. }
  311. .btn {
  312. border: none;
  313. border-radius: 32px;
  314. width: 15.9rem;
  315. height: 2.75rem;
  316. font-size: 14px;
  317. color: #FFF;
  318. display: flex;
  319. justify-content: center;
  320. align-items: center;
  321. margin-bottom: 1.5rem;
  322. }
  323. .green {
  324. background: linear-gradient(180deg, #A4D099 0%, #78B06A 100%);
  325. }
  326. .purple {
  327. background: linear-gradient(180deg, #BC58EE 0%, #7C47A3 100%);
  328. }
  329. .button-icon {
  330. width: 2rem;
  331. height: 2rem;
  332. margin-right: 10px;
  333. }
  334. </style>
  335. <!-- <body>
  336. &lt;!&ndash; http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_qrcode.jpg
  337. &ndash;&gt;
  338. <div class="m-loading">
  339. <div class="loading-step"></div>
  340. <div class="loading-text">0%</div>
  341. <div class="img-preload">
  342. <img src="https://www.radio1964.com/2020/ohplay_slide_01.png">
  343. <img
  344. src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_slide_02.jpg">
  345. <img src="https://www.radio1964.com/2020/ohplay_slide_03.jpg">
  346. <img
  347. src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_slide_04.jpg">
  348. <img
  349. src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_slide_05.jpg">
  350. <img src="https://www.radio1964.com/2020/ohplay_slide_06.jpg">
  351. <img
  352. src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_slide_07.jpg">
  353. <img src="https://www.radio1964.com/2020/ohplay_slide_08.jpg">
  354. <img
  355. src="http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_slide_09.jpg">
  356. </div>
  357. </div>
  358. <header class="m-header">
  359. <a href="/index">
  360. <div class="header-logo"></div>
  361. </a>
  362. <div class="nav-wrap">
  363. <div class="nav-shop" onclick="window.open('https://shop45604680.m.youzan.com/v2/feature/xHCSWC6aoP')">
  364. 商城
  365. </div>
  366. <div class="nav-version">
  367. <a href="/radios">
  368. <div class="nav-version-item version-maoking">猫王音响</div>
  369. </a>
  370. <a href="/ohplay">
  371. <div class="nav-version-item version-radiooo nav-version-current">猫王妙播</div>
  372. </a>
  373. </div>
  374. <div class="nav-menu"></div>
  375. </div>
  376. &lt;!&ndash;<div class="subnav-wrap">
  377. <div class="subnav-logo"></div>
  378. <div class="subnav-main-wrap">
  379. <a href="/station">
  380. <div class="subnav-main-item">首页</div>
  381. </a>
  382. </div>
  383. </div>&ndash;&gt;
  384. </header>
  385. <div class="m-maofm">
  386. <div class="maofm-1 section">
  387. <div class="section-content">&lt;!&ndash;{ echo $ohplayData['content'][0]; }&ndash;&gt;</div>
  388. <div class="section-app">
  389. <div onclick="IosDownload()"><img src="./2020/ios.png" /></div>
  390. <div onclick="AndroidDownload()"><img src="./2020/android.png" /></div>
  391. </div>
  392. <div class="section-title">&lt;!&ndash;{ echo $ohplayData['content'][1]; }&ndash;&gt;</div>
  393. </div>
  394. <div class="maofm-2 section section-video">
  395. <div class="video-wrap">
  396. <video class="video" src="&lt;!&ndash;{ echo $ohplayData['video_short_1']; }&ndash;&gt;"
  397. poster="&lt;!&ndash;{ echo $ohplayData['video_img_1']; }&ndash;&gt;" muted="muted"
  398. loop="true"></video>
  399. <div class="btn-videoplay"> </div>
  400. </div>
  401. <div class="video-wrap-2">
  402. <video class="video-2" src="&lt;!&ndash;{ echo $ohplayData['video_long_1']; }&ndash;&gt;"
  403. controls="controls" poster="&lt;!&ndash;{ echo $ohplayData['video_img_1']; }&ndash;&gt;"></video>
  404. <div class="btn-close">+</div>
  405. </div>
  406. </div>
  407. <div class="maofm-3 section">
  408. <div class="shadow-bg"></div>
  409. <h2 class="section-title">&lt;!&ndash;{ echo $ohplayData['title'][1]; }&ndash;&gt;</h2>
  410. <p class="section-content">&lt;!&ndash;{ echo $ohplayData['content'][2]; }&ndash;&gt;
  411. </div>
  412. <div class="maofm-4 section">
  413. <h2 class="section-title">&lt;!&ndash;{ echo $ohplayData['title'][2]; }&ndash;&gt;</h2>
  414. <p class="section-content">&lt;!&ndash;{ echo $ohplayData['content'][3]; }&ndash;&gt;</p>
  415. </div>
  416. <div class="maofm-5 section">
  417. <h2 class="section-title">&lt;!&ndash;{ echo $ohplayData['title'][3]; }&ndash;&gt;</h2>
  418. <p class="section-content">&lt;!&ndash;{ echo $ohplayData['content'][4]; }&ndash;&gt;<br><br>
  419. <span>&lt;!&ndash;{ echo $ohplayData['content'][5]; }&ndash;&gt;</span>
  420. </p>
  421. </div>
  422. <div class="maofm-6 section">
  423. <h2 class="section-title">&lt;!&ndash;{ echo $ohplayData['title'][4]; }&ndash;&gt;</h2>
  424. <p class="section-content">&lt;!&ndash;{ echo $ohplayData['content'][6]; }&ndash;&gt;
  425. </div>
  426. <div class="maofm-7 section">
  427. <h2 class="section-title">&lt;!&ndash;{ echo $ohplayData['title'][5]; }&ndash;&gt;</h2>
  428. <p class="section-content">&lt;!&ndash;{ echo $ohplayData['content'][7]; }&ndash;&gt;</p>
  429. </div>
  430. <div class="maofm-9 section">
  431. <h2 class="section-title">&lt;!&ndash;{ echo $ohplayData['title'][7]; }&ndash;&gt;</h2>
  432. <p class="section-content">&lt;!&ndash;{ echo $ohplayData['content'][9]; }&ndash;&gt;</p>
  433. <div class="ohplay-station ohplay-station-2"></div>
  434. </div>
  435. </div>
  436. &lt;!&ndash;{ echo $footer; }&ndash;&gt;
  437. <div class="ohplayAlert" style="display: none;">
  438. <div class="appTips" onclick="Close()">
  439. <img alt='' class="appTipsBg" src="https://www.radio1964.com/img/share_bg.png" width="100%" />
  440. <img alt='' class="quak" src="https://www.radio1964.com/img/quak_arrow.png" />
  441. <div class="tipText">
  442. <p>点击屏幕右上角[...]</p>
  443. <p>&nbsp;</p>
  444. <p class="tipsp">选择<span style="color: #EC8A32;">"浏览器"</span>打开
  445. </p>
  446. </div>
  447. </div>
  448. </div>
  449. </body>
  450. &lt;!&ndash;
  451. <script type="text/javascript" src="./static/js/module/headerComponent.js"></script>&ndash;&gt;
  452. &lt;!&ndash;
  453. <script type="text/javascript" src="./static/js/ohplay.js"></script>&ndash;&gt;
  454. <style>
  455. .section-app {
  456. display: flex;
  457. flex-direction: column;
  458. justify-content: flex-end;
  459. align-items: center;
  460. }
  461. .section-app div {
  462. position: relative;
  463. z-index: 1000;
  464. color: rgba(220, 190, 160, 1);
  465. font-size: 0.12em !important;
  466. margin-bottom: 0.30em;
  467. display: flex;
  468. justify-content: center;
  469. align-items: center;
  470. border-radius: 0.20em;
  471. bottom: 0.6em;
  472. font-weight: bold;
  473. cursor: pointer;
  474. }
  475. .section-app div img {
  476. width: 1.55em;
  477. height: 0.45em;
  478. }
  479. </style> -->
  480. </html>