Quellcode durchsuchen

下载页面更新移动端H5页面

DESKTOP-SVI9JE1\muzen vor 2 Jahren
Ursprung
Commit
f148c6b0f2

+ 339 - 161
fore/ohplay/cn_run.htm

@@ -1,174 +1,351 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-<meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-<meta name="viewport" content="width=device-width,initial-scale=1.0">
-<title>猫王妙播_猫王收音机_猫王音响 - 猫王官网</title>
-<meta name="description" content="什么是猫王妙播,猫王官方音乐电台频道,365天24小时不间断的好音乐、好内容,为你提供最新鲜有趣的“声活方式”。">
-<meta name="keywords" content="猫王妙播">
-<link rel="canonical" href="https://www.radio1964.com/pindao" />
-<!-- <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/ohplay.css">-->
-<script type="text/javascript">
-    window.location = "http://download.radio1964.com/readme?";
-</script>
-<!--<script type="text/javascript">-->
-<!--    if (window.innerWidth <= 1080) {-->
-<!--        (function (doc, win) {-->
-<!--            var width = 750;-->
-<!--            var height = 1220;-->
-<!--            var docEl = doc.documentElement;-->
-<!--            var reCalc = (function () {-->
-<!--                var reCalc = function () {-->
-<!--                    var winWidth = docEl.clientWidth;-->
-<!--                    var winHeight = docEl.clientHeight;-->
-<!--                    if (!winWidth) return;-->
-<!--                    var fontSize;-->
-<!--                    if (winWidth / winHeight > width / height) {-->
-<!--                        fontSize = 100 * winHeight / height;-->
-<!--                    } else {-->
-<!--                        fontSize = 100 * winWidth / width;-->
-<!--                    }-->
-<!--                    docEl.style.fontSize = fontSize + 'px';-->
-<!--                    console.log(fontSize, docEl.style.fontSize);-->
-<!--                    return reCalc;-->
-<!--                };-->
-<!--                return reCalc();-->
-<!--            })();-->
-<!--            var rszEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';-->
-<!--            if (!doc.addEventListener) return;-->
-<!--            win.addEventListener(rszEvt, reCalc);-->
-<!--        })(document, window);-->
-<!--    } else {-->
-<!--          (function (doc, win) {-->
-<!--            var width = 1920;-->
-<!--            var height = 1080;-->
-<!--            var docEl = doc.documentElement;-->
-<!--            var reCalc = (function () {-->
-<!--                var reCalc = function () {-->
-<!--                    var winWidth = docEl.clientWidth;-->
-<!--                    var winHeight = docEl.clientHeight;-->
-<!--                    if (!winWidth) return;-->
-<!--                    var fontSize;-->
-<!--                    if (winWidth / winHeight < width / height) {-->
-<!--                        fontSize = 100 * winHeight / height;-->
-<!--                    } else {-->
-<!--                        fontSize = 100 * winWidth / width;-->
-<!--                    }-->
-<!--                    docEl.style.fontSize = fontSize + 'px';-->
-<!--                    console.log(fontSize, docEl.style.fontSize);-->
-<!--                    return reCalc;-->
-<!--                };-->
-<!--                return reCalc();-->
-<!--            })();-->
-<!--            var rszEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';-->
-<!--            if (!doc.addEventListener) return;-->
-<!--            win.addEventListener(rszEvt, reCalc);-->
-<!--        })(document, window);-->
-<!--    }-->
-<!--</script>-->
-<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
-<!--<script type="text/javascript" src="./static/js/lib/scrolloverflow.min.js"></script>-->
-<!--<script type="text/javascript" src="./static/js/lib/jquery.fullPage.min.js"></script>-->
-<!--<script type="text/javascript" src="./static/js/module/TD.js"></script>-->
-<!--<style type="text/css">-->
-<!--    @media (max-width: 1600px) {-->
-<!--        .nav-lang:hover {-->
-<!--            height: 84px;-->
-<!--        }-->
-<!--    }-->
-<!--    @media (max-width: 1280px) {-->
-<!--        .nav-lang:hover {-->
-<!--            height: 72px;-->
-<!--        }-->
-<!--    }-->
-<!--    @media (max-device-width: 1081px) {-->
-<!--        .nav-lang:hover {-->
-<!--            height: 0.8rem;-->
-<!--        }-->
-<!--    }-->
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>猫王妙播_猫王收音机_猫王音响 - 猫王官网</title>
+    <meta name="description" content="什么是猫王妙播,猫王官方音乐电台频道,365天24小时不间断的好音乐、好内容,为你提供最新鲜有趣的“声活方式”。">
+    <meta name="keywords" content="猫王妙播">
+    <link rel="canonical" href="https://www.radio1964.com/pindao" />
+    <!-- <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/ohplay.css">-->
+    <script type="text/javascript">
+        const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? "Mobile" : "Desktop";
+        // Example 
+        if (detectDeviceType() === 'Desktop') {
+            window.location = "http://download.radio1964.com/readme?";
+        } else {
+            const userAgent = navigator.userAgent;
+            function handleDownLoadMWProIOS(url) {
+                var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+                if (isiOS) {
+                    window.open(url, '_blank')
+                }
+            }
 
-<!--    .ohplay-station-2 {-->
-<!--        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;-->
-<!--    }-->
-<!--    .ohplayAlert{-->
-<!--        position: fixed;-->
-<!--        display: flex;-->
-<!--        justify-content: center;-->
-<!--        align-items: center;-->
-<!--        width: 100%;-->
-<!--        height: 100%;-->
-<!--        z-index: 1001;-->
-<!--        top: 0;-->
-<!--    }-->
-<!--    .appTips{-->
-<!--        position: fixed;-->
-<!--        width: 100%;-->
-<!--        height: 100%;-->
-<!--        z-index: 1001;-->
-<!--        background:rgba(255, 253, 242, 0.9);-->
-<!--        top: 0;-->
-<!--        left: 0;-->
-<!--    }-->
-<!--    .appTips .appTipsBg{-->
-<!--    	position: absolute;-->
-<!--        opacity: 0.6;-->
-<!--        top: 0;-->
-<!--    }-->
-<!--    .appTips .quak{-->
-<!--    	position: absolute;-->
-<!--        width: 2rem;-->
-<!--        top: 0.5rem;-->
-<!--        right: 0.5rem;-->
-<!--    }-->
-<!--    .appTips .brower{-->
-<!--        right: 1.5rem;-->
-<!--        top: 1.5rem;-->
-<!--        width: 1.5rem;-->
-<!--    }-->
-<!--    .appTips .tipText{-->
-<!--        position: absolute;-->
-<!--        right: 2.8rem;-->
-<!--        top: 2rem;-->
+            function handleDownLoadMWProAndroid(url) {
+                var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1;
+                if (isAndroid) {
+                    window.open(url, '_blank')
+                }
+            }
+        }
+    </script>
+    <!--<script type="text/javascript">-->
+    <!--    if (window.innerWidth <= 1080) {-->
+    <!--        (function (doc, win) {-->
+    <!--            var width = 750;-->
+    <!--            var height = 1220;-->
+    <!--            var docEl = doc.documentElement;-->
+    <!--            var reCalc = (function () {-->
+    <!--                var reCalc = function () {-->
+    <!--                    var winWidth = docEl.clientWidth;-->
+    <!--                    var winHeight = docEl.clientHeight;-->
+    <!--                    if (!winWidth) return;-->
+    <!--                    var fontSize;-->
+    <!--                    if (winWidth / winHeight > width / height) {-->
+    <!--                        fontSize = 100 * winHeight / height;-->
+    <!--                    } else {-->
+    <!--                        fontSize = 100 * winWidth / width;-->
+    <!--                    }-->
+    <!--                    docEl.style.fontSize = fontSize + 'px';-->
+    <!--                    console.log(fontSize, docEl.style.fontSize);-->
+    <!--                    return reCalc;-->
+    <!--                };-->
+    <!--                return reCalc();-->
+    <!--            })();-->
+    <!--            var rszEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';-->
+    <!--            if (!doc.addEventListener) return;-->
+    <!--            win.addEventListener(rszEvt, reCalc);-->
+    <!--        })(document, window);-->
+    <!--    } else {-->
+    <!--          (function (doc, win) {-->
+    <!--            var width = 1920;-->
+    <!--            var height = 1080;-->
+    <!--            var docEl = doc.documentElement;-->
+    <!--            var reCalc = (function () {-->
+    <!--                var reCalc = function () {-->
+    <!--                    var winWidth = docEl.clientWidth;-->
+    <!--                    var winHeight = docEl.clientHeight;-->
+    <!--                    if (!winWidth) return;-->
+    <!--                    var fontSize;-->
+    <!--                    if (winWidth / winHeight < width / height) {-->
+    <!--                        fontSize = 100 * winHeight / height;-->
+    <!--                    } else {-->
+    <!--                        fontSize = 100 * winWidth / width;-->
+    <!--                    }-->
+    <!--                    docEl.style.fontSize = fontSize + 'px';-->
+    <!--                    console.log(fontSize, docEl.style.fontSize);-->
+    <!--                    return reCalc;-->
+    <!--                };-->
+    <!--                return reCalc();-->
+    <!--            })();-->
+    <!--            var rszEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';-->
+    <!--            if (!doc.addEventListener) return;-->
+    <!--            win.addEventListener(rszEvt, reCalc);-->
+    <!--        })(document, window);-->
+    <!--    }-->
+    <!--</script>-->
+    <!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
+    <!--<script type="text/javascript" src="./static/js/lib/scrolloverflow.min.js"></script>-->
+    <!--<script type="text/javascript" src="./static/js/lib/jquery.fullPage.min.js"></script>-->
+    <!--<script type="text/javascript" src="./static/js/module/TD.js"></script>-->
+    <!--<style type="text/css">-->
+    <!--    @media (max-width: 1600px) {-->
+    <!--        .nav-lang:hover {-->
+    <!--            height: 84px;-->
+    <!--        }-->
+    <!--    }-->
+    <!--    @media (max-width: 1280px) {-->
+    <!--        .nav-lang:hover {-->
+    <!--            height: 72px;-->
+    <!--        }-->
+    <!--    }-->
+    <!--    @media (max-device-width: 1081px) {-->
+    <!--        .nav-lang:hover {-->
+    <!--            height: 0.8rem;-->
+    <!--        }-->
+    <!--    }-->
 
-<!--    }-->
-<!--    .appTips .tipText p {-->
-<!--        line-height: 0.3rem;-->
-<!--        font-size: 16px;-->
-<!--    }-->
-<!--    .appTips .tipsp{-->
-<!--        display: flex;-->
-<!--        flex-direction: row;-->
-<!--    }-->
-<!--</style>-->
-<!--<script>-->
-<!--	function Close() {-->
-<!--		document.getElementsByClassName("ohplayAlert")[0].style.display = "none";-->
-<!--	}-->
-<!--    function IosDownload() {-->
-<!--        window.location.href = 'https://apps.apple.com/cn/app/ohplay%E7%8C%AB%E7%8E%8B%E5%A6%99%E6%92%AD/id1402502317';-->
-<!--    }-->
-<!--    function AndroidDownload() {-->
+    <!--    .ohplay-station-2 {-->
+    <!--        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;-->
+    <!--    }-->
+    <!--    .ohplayAlert{-->
+    <!--        position: fixed;-->
+    <!--        display: flex;-->
+    <!--        justify-content: center;-->
+    <!--        align-items: center;-->
+    <!--        width: 100%;-->
+    <!--        height: 100%;-->
+    <!--        z-index: 1001;-->
+    <!--        top: 0;-->
+    <!--    }-->
+    <!--    .appTips{-->
+    <!--        position: fixed;-->
+    <!--        width: 100%;-->
+    <!--        height: 100%;-->
+    <!--        z-index: 1001;-->
+    <!--        background:rgba(255, 253, 242, 0.9);-->
+    <!--        top: 0;-->
+    <!--        left: 0;-->
+    <!--    }-->
+    <!--    .appTips .appTipsBg{-->
+    <!--    	position: absolute;-->
+    <!--        opacity: 0.6;-->
+    <!--        top: 0;-->
+    <!--    }-->
+    <!--    .appTips .quak{-->
+    <!--    	position: absolute;-->
+    <!--        width: 2rem;-->
+    <!--        top: 0.5rem;-->
+    <!--        right: 0.5rem;-->
+    <!--    }-->
+    <!--    .appTips .brower{-->
+    <!--        right: 1.5rem;-->
+    <!--        top: 1.5rem;-->
+    <!--        width: 1.5rem;-->
+    <!--    }-->
+    <!--    .appTips .tipText{-->
+    <!--        position: absolute;-->
+    <!--        right: 2.8rem;-->
+    <!--        top: 2rem;-->
 
-<!--        const u = navigator.userAgent;-->
-<!--        const IsWeixin = u.indexOf('MicroMessenger') > -1; // 是否微信内置浏览器-->
-<!--        const IsWeibo = u.indexOf('Weibo') > -1; // 是否Weibo内置浏览器-->
-<!--        const IsQq = u.indexOf('QQ') > -1 && (u.indexOf('V1_IPH_SQ') > -1 || u.indexOf('V1_AND_SQ') > -1); // 是否QQ内置浏览器-->
+    <!--    }-->
+    <!--    .appTips .tipText p {-->
+    <!--        line-height: 0.3rem;-->
+    <!--        font-size: 16px;-->
+    <!--    }-->
+    <!--    .appTips .tipsp{-->
+    <!--        display: flex;-->
+    <!--        flex-direction: row;-->
+    <!--    }-->
+    <!--</style>-->
+    <!--<script>-->
+    <!--	function Close() {-->
+    <!--		document.getElementsByClassName("ohplayAlert")[0].style.display = "none";-->
+    <!--	}-->
+    <!--    function IosDownload() {-->
+    <!--        window.location.href = 'https://apps.apple.com/cn/app/ohplay%E7%8C%AB%E7%8E%8B%E5%A6%99%E6%92%AD/id1402502317';-->
+    <!--    }-->
+    <!--    function AndroidDownload() {-->
 
-<!--        const openTips = IsWeixin || IsQq || IsWeibo;-->
+    <!--        const u = navigator.userAgent;-->
+    <!--        const IsWeixin = u.indexOf('MicroMessenger') > -1; // 是否微信内置浏览器-->
+    <!--        const IsWeibo = u.indexOf('Weibo') > -1; // 是否Weibo内置浏览器-->
+    <!--        const IsQq = u.indexOf('QQ') > -1 && (u.indexOf('V1_IPH_SQ') > -1 || u.indexOf('V1_AND_SQ') > -1); // 是否QQ内置浏览器-->
 
-<!--        if (openTips) {-->
-<!--            document.getElementsByClassName("ohplayAlert")[0].style.display = "block";-->
-<!--            return;-->
-<!--        }-->
+    <!--        const openTips = IsWeixin || IsQq || IsWeibo;-->
 
+    <!--        if (openTips) {-->
+    <!--            document.getElementsByClassName("ohplayAlert")[0].style.display = "block";-->
+    <!--            return;-->
+    <!--        }-->
 
-<!--        window.location.href = 'http://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/download_online/release/oh_play.apk';-->
-<!--    }-->
-<!--</script>-->
+
+    <!--        window.location.href = 'http://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/download_online/release/oh_play.apk';-->
+    <!--    }-->
+    <!--</script>-->
 </head>
+
+<body>
+    <div class="bg">
+        <div class="box">
+            <div class="header">
+                <img class="icon" src="./images/icon-1.png" />
+                <h3>猫王妙播Pro</h3>
+            </div>
+            <div class="banner">
+                <img class="left" src="./images/banner-1.png" />
+                <img class="center" src="./images/banner-2.png" />
+                <img class="right" src="./images/banner-3.png" />
+            </div>
+            <div class="button">
+                <button class="btn green"
+                    onclick="handleDownLoadMWProIOS(`https://apps.apple.com/cn/app/ohplay%E7%8C%AB%E7%8E%8B%E5%A6%99%E6%92%ADpro/id1402502317`)">
+                    <img class="button-icon" src="./images/iPhone.png" />iPhone下载
+                </button>
+                <button class="btn green"
+                    onclick="handleDownLoadMWProAndroid(`https://a.app.qq.com/o/simple.jsp?pkgname=com.muzen.radioplayer`)">
+                    <img class="button-icon" src="./images/Android.png" />Android下载
+                </button>
+            </div>
+        </div>
+        <div class="box">
+            <div class="header">
+                <img class="icon" src="./images/icon-2.png" />
+                <h3>猫王灵感</h3>
+                <h4>(W1+手表专用APP)</h4>
+            </div>
+            <div class="banner">
+                <img class="left" src="./images/banner-4.png" />
+                <img class="center" src="./images/banner-5.png" />
+                <img class="right" src="./images/banner-6.png" />
+            </div>
+            <div class="button">
+                <button class="btn purple"
+                    onclick="handleDownLoadMWProIOS(`https://apps.apple.com/cn/app/id6449812627`)">
+                    <img class="button-icon" src="./images/iPhone.png" />iPhone下载
+                </button>
+                <button class="btn purple"
+                    onclick="handleDownLoadMWProAndroid(`https://music-play.oss-cn-shenzhen.aliyuncs.com/backOss/file/c1e949bd4b314c07bb0097f1180c689e.apk`)">
+                    <img class="button-icon" src="./images/Android.png" />Android下载
+                </button>
+            </div>
+        </div>
+    </div>
+</body>
+
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    html {
+        height: 88rem;
+    }
+
+    body {
+        height: 100%;
+    }
+
+    .bg {
+        width: 100%;
+        height: 100%;
+        background: url('./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 {
+            margin-left: -2.375rem;
+            display: flex;
+            align-items: 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>-->
 <!--    &lt;!&ndash; http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_qrcode.jpg &ndash;&gt;-->
 <!--    <div class="m-loading">-->
@@ -301,4 +478,5 @@
 <!--        height: 0.45rem;-->
 <!--    }-->
 <!--</style>-->
-</html>
+
+</html>

BIN
fore/ohplay/images/Android.png


BIN
fore/ohplay/images/banner-1.png


BIN
fore/ohplay/images/banner-2.png


BIN
fore/ohplay/images/banner-3.png


BIN
fore/ohplay/images/banner-4.png


BIN
fore/ohplay/images/banner-5.png


BIN
fore/ohplay/images/banner-6.png


BIN
fore/ohplay/images/download-bg.png


BIN
fore/ohplay/images/iPhone.png


BIN
fore/ohplay/images/icon-1.png


BIN
fore/ohplay/images/icon-2.png