liaoyansheng
/
youqi-H5


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>友期陪玩</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: 143px;
        height: 33px;
    }
    .bar>a {
        /* width: 6.875rem; */
        padding: 0 10px;
        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%;
    }
    .img_list{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .img_box{
        width: 50%;
        height: calc(50vw*1.252);
        position: relative;
    }
    .img_box img{
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }
    </style>
<body>
    <div class="main">
        <div style="width: 100%;text-align:center;font-size: 30px;">
            下载<span style="font-size: 34px;font-weight:800;">友期陪玩app</span></br>
            约会交友处对象
        </div>
        <div class="img_list">
            <div class="img_box">
                <img src="./img/1.jpg" alt="">
            </div>
            <div class="img_box">
                <img src="./img/2.jpg" alt="">
            </div>
            <div class="img_box">
                <img src="./img/3.jpg" alt="">
            </div>
            <div class="img_box">
                <img src="./img/4.jpg" alt="">
            </div>
            <div class="img_box">
                <img src="./img/5.jpg" alt="">
            </div>
            <div class="img_box">
                <img src="./img/6.jpg" alt="">
            </div>
            <div class="img_box">
                <img src="./img/7.jpg" alt="">
            </div>
            <div class="img_box">
                <img src="./img/8.jpg" alt="">
            </div>
            <div class="img_box">
                <img src="./img/9.jpg" alt="">
            </div>
            <div class="img_box">
                <img src="./img/10.jpg" alt="">
            </div>
        </div>
        <div style="width: 100%;height: 60px;"></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">右上角浏览器打开</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.innerText = '下载友期APP';//下载友期APP
    a.setAttribute("href", "https://itunes.apple.com/app/id1511863353");
}
if (navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
    console.log('当前环境为微信环境')
}else{
    a.innerText = '下载友期APP';
}
</script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="./js/main.js"></script>
</html>