瀏覽代碼

背景ui更换

DESKTOP-SVI9JE1\muzen 1 年之前
父節點
當前提交
be1e45dcb2
共有 1 個文件被更改,包括 161 次插入196 次删除
  1. 161 196
      fore/ohplay/cn_run.htm

+ 161 - 196
fore/ohplay/cn_run.htm

@@ -1,13 +1,172 @@
 <!DOCTYPE html>
 <!DOCTYPE html>
 <html>
 <html>
-
 <head>
 <head>
     <meta charset="utf-8">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
     <title>猫王妙播_猫王收音机_猫王音响 - 猫王官网</title>
     <title>猫王妙播_猫王收音机_猫王音响 - 猫王官网</title>
     <meta name="description" content="什么是猫王妙播,猫王官方音乐电台频道,365天24小时不间断的好音乐、好内容,为你提供最新鲜有趣的“声活方式”。">
     <meta name="description" content="什么是猫王妙播,猫王官方音乐电台频道,365天24小时不间断的好音乐、好内容,为你提供最新鲜有趣的“声活方式”。">
     <meta name="keywords" content="猫王妙播">
     <meta name="keywords" content="猫王妙播">
+    <link rel="canonical" href="https://www.radio1964.com/ohplay" />
+</head>
+
+<script>
+    const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? "Mobile" : "Desktop";
+    if (detectDeviceType() === 'Desktop') {
+        window.location = "http://download.radio1964.com/readme?";
+    }
+
+    var xhr = null
+    if (window.XMLHttpRequest) {
+        xhr = new XMLHttpRequest()
+    } else {
+        xhr = new ActiveXObject("Microsoft.XMLHTTP")
+    }
+</script>
+
+<body>
+    <div class="bg">
+        <div class="box top">
+            <img src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/icon-1.png" width="80"
+                height="80" />
+            <div class="title">
+                <h3>猫王妙播Pro</h3>
+            </div>
+            <a id="ios" class="btn green" href="https://apps.apple.com/cn/app/com.muzen.radioplayer/id1402502317"
+                style="margin-bottom: 12px;">
+                <img src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/iPhone.png" width="28" height="28" />
+                <span>iPhone下载</span>
+            </a>
+            <a id="Android" class="btn green" href="https://a.app.qq.com/o/simple.jsp?pkgname=com.muzen.radioplayer"
+                style="margin-top: 12px;">
+                <img src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/Android.png" width="28" height="28" />
+                <span>Android下载</span>
+            </a>
+        </div>
+        <div class="box bottom">
+            <img src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/icon-2.png" width="80" height="80" />
+            <div class="title">
+                <h3>猫王灵感</h3>
+                <h4>(猫王手表专用APP)</h4>
+            </div>
+            <a id="ios" class="btn purple" href="https://apps.apple.com/cn/app/com.Muzen.MuzenLife/id6449812627"
+                style="margin-bottom: 24px;">
+                <img src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/iPhone.png" width="28" height="28" />
+                <span>iPhone下载</span>
+            </a>
+            <a id="Android" class="btn purple apk" href="#">
+                <img src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/Android.png" width="28" height="28" />
+                <span>Android下载</span>
+            </a>
+        </div>
+    </div>
+</body>
+
+<script>
+    const userAgent = navigator.userAgent;
+    var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+    var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1;
+    var iOSElement = document.querySelectorAll("#ios")
+    var AndElement = document.querySelectorAll("#Android")
+    if (isiOS) {
+        for (var i = 0; i < AndElement.length; i++) {
+            AndElement[i].style.pointerEvents = "none"
+        }
+    } else {
+        for (var i = 0; i < iOSElement.length; i++) {
+            iOSElement[i].style.pointerEvents = "none"
+        }
+    }
+    // 猫王灵感安卓apk下载链接
+    var apkELement = document.querySelector('.apk')
+    xhr.open('get', 'https://client.ohplay.radio1964.net/device/project/update/group?projectId=7', true)
+    xhr.onreadystatechange = function () {
+        if (xhr.status === 200 && xhr.readyState === 4) {
+            apkELement.href = JSON.parse(xhr.responseText).data.android[0].downUrl
+        }
+    }
+    xhr.send()
+</script>
+
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    html,
+    body {
+        height: 100%;
+    }
+
+    a {
+        text-decoration: none;
+        font-weight: bold;
+    }
+
+    .bg {
+        width: 100vw;
+        height: 100vh;
+        min-height: 724px;
+        background-image: url('https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/download-bg.png');
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        position: relative;
+    }
+
+    .box {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: absolute;
+    }
+
+    .top {
+        top: 40px;
+    }
+
+    .bottom {
+        bottom: 40px;
+    }
+
+    .title {
+        margin: 1rem 0 3rem 0;
+        text-align: center;
+    }
+
+    .title h3 {
+        font-size: 20px;
+        font-weight: bold;
+    }
+
+    .title h4 {
+        font-size: 13px;
+        color: #777777;
+    }
+
+    .btn {
+        border-radius: 32px;
+        width: 13rem;
+        font-size: 14px;
+        color: #FFF;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0.4rem 0;
+    }
+
+    .green {
+        background: linear-gradient(180deg, #A4D099 0%, #78B06A 100%);
+    }
+
+    .purple {
+        background: linear-gradient(180deg, #BC58EE 0%, #7C47A3 100%);
+    }
+</style>
+
     <!-- <link rel="canonical" href="https://www.radio1964.com/pindao" />
     <!-- <link rel="canonical" href="https://www.radio1964.com/pindao" />
     <link rel="shortcut icon" href="./static/css/favicon.ico">
     <link rel="shortcut icon" href="./static/css/favicon.ico">
     <link rel="stylesheet" type="text/css" href="./static/css/headerComponent.css">
     <link rel="stylesheet" type="text/css" href="./static/css/headerComponent.css">
@@ -176,200 +335,6 @@
             window.location.href = 'http://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/download_online/release/oh_play.apk';
             window.location.href = 'http://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/download_online/release/oh_play.apk';
         }
         }
     </script> -->
     </script> -->
-    <script>
-        const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? "Mobile" : "Desktop";
-        if (detectDeviceType() === 'Desktop') {
-            window.location = "http://download.radio1964.com/readme?";
-        }
-
-        var xhr = null
-        if(window.XMLHttpRequest){
-            xhr = new XMLHttpRequest()
-        }else{
-            xhr = new ActiveXObject("Microsoft.XMLHTTP")
-        }
-    </script>
-</head>
-
-<body>
-    <div class="bg">
-        <div class="box">
-            <div class="header">
-                <img class="icon" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/icon-1.png" />
-                <h3>猫王妙播Pro</h3>
-            </div>
-            <div class="banner">
-                <img class="left" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/banner-1.png" />
-                <img class="center" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/banner-2.png" />
-                <img class="right" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/banner-3.png" />
-            </div>
-            <div class="button">
-                <a id="ios" class="btn green" href="https://apps.apple.com/cn/app/com.muzen.radioplayer/id1402502317">
-                    <img class="button-icon"
-                        src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/iPhone.png" />iPhone下载</a>
-                <a id="Android" class="btn green"
-                    href="https://a.app.qq.com/o/simple.jsp?pkgname=com.muzen.radioplayer">
-                    <img class="button-icon"
-                        src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/Android.png" />Android下载
-                </a>
-            </div>
-        </div>
-        <div class="box">
-            <div class="header">
-                <img class="icon" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/icon-2.png" />
-                <h3>猫王灵感</h3>
-                <h4>(W1+手表专用APP)</h4>
-            </div>
-            <div class="banner">
-                <img class="left" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/banner-4.png" />
-                <img class="center" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/banner-5.png" />
-                <img class="right" src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/banner-6.png" />
-            </div>
-            <div class="button">
-                <a id="ios" class="btn purple" href="https://apps.apple.com/cn/app/com.Muzen.MuzenLife/id6449812627">
-                    <img class="button-icon"
-                        src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/iPhone.png" />iPhone下载
-                </a>
-                <a id="Android" class="btn purple apk" href="#">
-                    <img class="button-icon" quer
-                        src="https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/Android.png" />Android下载
-                </a>
-            </div>
-        </div>
-    </div>
-    <script>
-        const userAgent = navigator.userAgent;
-        var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-        var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1;
-        var iOSElement = document.querySelectorAll("#ios")
-        var AndElement = document.querySelectorAll("#Android")
-        if (isiOS) {
-            for (var i = 0; i < AndElement.length; i++) {
-                AndElement[i].style.pointerEvents = "none"
-            }
-        } else {
-            for (var i = 0; i < iOSElement.length; i++) {
-                iOSElement[i].style.pointerEvents = "none"
-            }
-        }
-        var apkELement = document.querySelector('.apk')
-        xhr.open('get', 'https://client.ohplay.radio1964.net/device/project/update/group?projectId=7', true)
-        xhr.onreadystatechange = function() {
-            if(xhr.status === 200 && xhr.readyState === 4) {
-                apkELement.href = JSON.parse(xhr.responseText).data.android[0].downUrl 
-            }
-        }
-        xhr.send()
-    </script>
-</body>
-
-<style>
-    * {
-        margin: 0;
-        padding: 0;
-    }
-
-    body {
-        height: 100%;
-    }
-
-    a {
-        text-decoration: none;
-        font-weight: bold;
-    }
-
-    .bg {
-        width: 100%;
-        height: 100%;
-        background: url('https://music-play.oss-cn-shenzhen.aliyuncs.com/ohplay_images/download-bg.png');
-        background-repeat: no-repeat;
-        background-size: 100%;
-    }
-
-    .box {
-        position: relative;
-    }
-
-    .header {
-        padding-top: 2.5rem;
-        margin-bottom: 2rem;
-        text-align: center;
-    }
-
-    .icon {
-        width: 5rem;
-        height: 5rem;
-        margin-bottom: 0.5rem;
-    }
-
-    .header h3 {
-        font-size: 20px;
-        color: #353535;
-    }
-
-    .header h4 {
-        font-size: 13px;
-        color: #777777;
-    }
-
-    .banner {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        margin-bottom: 3.75rem;
-    }
-
-    .banner img {
-        border-radius: 16px;
-    }
-
-    .banner .left,
-    .banner .right {
-        width: 8.75rem;
-        height: 15.5rem;
-    }
-
-    .banner .center {
-        width: 10rem;
-        height: 17.75rem;
-        margin: 0 12px;
-    }
-
-    .button {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .btn {
-        border: none;
-        border-radius: 32px;
-        width: 15.9rem;
-        height: 2.75rem;
-        font-size: 14px;
-        color: #FFF;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-bottom: 1.5rem;
-    }
-
-    .green {
-        background: linear-gradient(180deg, #A4D099 0%, #78B06A 100%);
-    }
-
-    .purple {
-        background: linear-gradient(180deg, #BC58EE 0%, #7C47A3 100%);
-    }
-
-    .button-icon {
-        width: 2rem;
-        height: 2rem;
-        margin-right: 10px;
-    }
-</style>
 
 
 <!-- <body>
 <!-- <body>
     &lt;!&ndash; http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_qrcode.jpg
     &lt;!&ndash; http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_qrcode.jpg