liaoyansheng
/
youqi-H5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>友期APP</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<style>
    body {
      font-family: "pingfang SC", "MicrosoftYaHei";
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
    }
    
    * {
      -webkit-tap-highlight-color: transparent;
      margin: 0;
      padding: 0;
    }
    .bar {
        width: 100%;
        box-sizing: border-box;
        padding: 8px 15px;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 0;
    }
    .bar>img {
        width: 90px;
        height: 33px;
    }
    .bar>a {
        width: 6.875rem;
        height: 2.25rem;
        background-image: linear-gradient(90deg, #9C6CFA, #4979FF);
        border-radius: 1.25rem;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-size: 14px;
    }
    .iphoneX {
        display: none;
        width: 100%;
        height: 34px;
    }
    .main {
      width: 100%;
    }
    .main img{
      width: 100%;
      height: auto;
    }
    </style>
<body>
    <div class="main">
        <img src="./img/2.png">
        <div style="width: 100%;height: 49px;"></div>
        <div class="iphoneX"></div>
    </div>
    <div class="bar">
        <img src="./img/logo.png">
        <a href="https://uqchat.oss-cn-shenzhen.aliyuncs.com/package/uqchat.apk" class="btn">下载友期APP</a>
    </div>
</body>

<script>
const baseSize = 16

function setRem() {
    const scale = document.documentElement.clientWidth / 375
    document.documentElement.style.fontSize = baseSize * scale + 'px'
}
setRem()
window.onresize = function () {
    setRem()
}

function isIPhoneX() {
    var u = navigator.userAgent,
        isX;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isIOS) {
        if (screen.height == 812 && screen.width == 375) {
            isX = true
        } else {
            isX = false
        }
    }
    return isX
}

if (isIPhoneX()) {
    document.querySelector('.bar').style.padding = "8px 15px 42px"
    document.querySelector('.iphoneX').style.display = "block"
}
let u = navigator.userAgent,
    ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
    a = document.querySelector('.bar>a');
if (ios) {
    a.setAttribute("href", "https://itunes.apple.com/app/id1511863353");
}
</script>
</html>