手机下载中间页和手机I0S页面的设计

最新推荐文章于 2024-07-27 12:15:16 发布

chenzhawu3547

最新推荐文章于 2024-07-27 12:15:16 发布

阅读量340

点赞数

文章标签：移动开发操作系统 javascript ViewUI

原文链接：https://my.oschina.net/u/4004801/blog/3036025

版权

1.中间页

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
	<title></title>
</head>
<style>
	html,body{
		margin:0;
		padding:0;
		height:100%
	}
.bgbox{
    height:100%;
    width:100%;
    background:#fff;
}
.download{
	display: none;
	height:100%;
	background:rgba(3,3,3,0.5);
	padding-left:50px;
}
.text-box{
	height: 110px;
	margin-right: 25px;
	padding-right: 30px;
	background: url('./img/downloadbg.png') no-repeat;
	background-size: 100% 100%;
	
}
.text-box p{
	color:#5E5E5E;
	font-size:18px;
	padding:45px 10px 0 20px;
	margin-top:0
}
</style>
<body>
		<div class="bgbox">

			<div class="download" id="download">
				<div class="text-box">
					<p>请点击右上角，在<img src='./img/brower.png'>浏览器中打开。</p>
				</div>
			</div>
		</div>
	<script type="text/javascript">
		var ua = navigator.userAgent.toLowerCase()
		var u = navigator.userAgent;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		if(isAndroid) {
			if(ua.match('micromessenger')) {
				document.getElementById("download").style.display = "block"
			}else {
				window.location.href = "https://static.moralchain.io/moralchain/ijike/didipay.apk"
			}
		} else if(isiOS) {
			if(ua.match(' qq')) {
				document.getElementById("download").style.display = "block"
			}else {
				window.location.href = "download_ios.html"
			}
		} else {
			alert("非Android、iOS")
		}
	</script>
</body>
</html>

IOS下载页

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    
    <title></title>
   
    <link rel="stylesheet/less" type="text/css" href="download2.less" />
     <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
</head>
<style>
	html,body{
		margin:0;
		padding:0;
		height:100%
	}


</style>
<body>
        
    <div class='installation'>
        <div class="content">
            <h3>下载企业发布版本</h3>
            <a onclick="downloadapp()">点击下载</a>
            <div class="tips">
                <div class="tips_line"></div>
                <span>iOS安装教程</span>
            </div>
            <p>1、第一次打开 派多多 时会弹出如下框。</p>
            <img src="./downloadImg/1.png" alt="">
            <p>2、在手机的 「<b>设置</b>」-「<b>通用</b>」-「<b>设备管理</b>」中，找到 派多多 的证书。</p>
            <img src="./downloadImg/2.png" alt="">
            <p>3、点击「<b>信任</b>」这个证书就可以开始使用 派多多 了。</p>
            <img src="./downloadImg/3.png" alt=""> 
        </div>
    </div>

    <script>
       function downloadapp(){
        let u = navigator.userAgent;
            let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if(isAndroid){
                window.location.href = 'https://static.moralchain.io/moralchain/ijike/didipay.apk'
            }else{
                window.location.href = 'itms-services://?action=download-manifest&url=https://static.moralchain.io/moralchain/paidd/manifest.plist'
            }   
        }
   
    </script>
</body>
</html>

less:

.installation {
    background: #fff;
    height: 100%;
    width: 100%;
    .content {
        text-align: center;
        padding-top: 45px;
        background: #fff;
        height:calc(~'100vh - 46px');
        overflow-y:auto;
         -webkit-overflow-scrolling : touch;
        h3 {
            font-size: 24px;
            color: #323232;
            margin: 0;
            padding: 0;
        }
        a {
            margin: 25px 0 60px 0;
            font-size: 14px;
            text-decoration-line: none;
            color: #fff;
            background: #2e6bf8;
            display: inline-block;
            border-radius: 21px;
            width: 140px;
            height: 42px;
            line-height: 42px;
            font-weight: 500;
            text-decoration: none;
            box-shadow: 1px 1px 10px #2e6bf8;
        }
        img {
            width: 80%;
            margin: 15px 0;
        }
        .tips {
            display: flex;
            justify-content: center;
            position: relative;
            height: 16px;
            margin-bottom: 36px;
            span {
                color: #969696;
                font-size: 14px;
                background: #fff;
                display: inline-block;
                position: absolute;
                top: -9px;
            }
            .tips_line {
                height: 1px;
                width: 100%;
                background: #F0F0F0;
                position: absolute;
            }
        }
        p {
            font-size: 14px;
            color: #323232;
            text-align: center;
            padding: 0 20px;
            b {
                color: #5E87D8;
            }
        }
    }
}

转载于:https://my.oschina.net/u/4004801/blog/3036025

chenzhawu3547

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机下载中间页和手机I0S页面的设计

1.中间页 <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0...
复制链接

扫一扫