<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分享梦想页</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        p{
            -webkit-margin-before: 0.1em;
            -webkit-margin-after: 0.1em;
        }
        button{
            color: #ffffff;
            background: #00c3da;
            width: 80%;
            height: 40px;
            border: none;
            border-radius: 40px;
            outline: none;
        }
    </style>
</head>
<body>
    <img style="width: 100%; height: 100%;position: relative;" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2010773385,221812410&fm=26&gp=0.jpg">
    <img id="wxtip" style="position: absolute; right: 0; top:0; width: 20%;" src="../../img/arrow.png" alt="">
    <p style="font-size: 17px; padding: 0 10px">标题</p>
    <div style="border-bottom: 1px solid #DEDEDE">
        <p style="font-size: 13px; padding: 0 10px; color: #919191">
            等你, 在雨中, 在造虹的雨中
            蝉声沉落, 蛙声升起
        </p>
        <p style="text-align: center">
            箭头
        </p>
    </div>
    <div style="border-bottom: 1px solid #DEDEDE; height: 50px; padding: 5px 10px;">
        <div style="float:left;">
            <p>20天</p>
            <p style="font-size: 13px; color: #919191">剩余时间</p>
        </div>
        <div style="float:right;">
            <p style="text-align: right">158730</p>
            <p style="font-size: 13px;; color: #919191">当前获得梦想分数</p>
        </div>
    </div>
    <div style="clear:both; height: 50px; padding: 5px 10px;">
        <div style="float:left;">
            <p>20</p>
            <p style="font-size: 13px; color: #919191">目前已获梦想币</p>
        </div>
        <div style="float:right;">
            <p style="text-align: right">158730</p>
            <p style="font-size: 13px; color: #919191">我要求的梦想币</p>
        </div>
    </div>
    <div style="padding: 0 10px">
        <div style="background-color:#E6E6E6; width: 100%;">
            <div style="width: 20%; background: #FF6600; height: 5px">
            </div>
        </div>
    </div>
    <div style="padding: 30px; text-align: center;">
        <button ng-click="godown()">
            下载瞄瞄
        </button>
    </div>
    <script>
        //判断系统
        var os = function() {
            var ua = navigator.userAgent,
                isAndroid = /(?:Android)/.test(ua),
                isPhone = /(?:iPhone)/.test(ua),
                isWeixin = /(?:MicroMessenger)/.test(ua);
            return {
                    isPhone: isPhone,
                    isAndroid : isAndroid,
                    isWeixin : isWeixin
            };
            $("#wxtip").show();
        }();
        function godown(){
            alert("kakka");
            if(os.isWeixin){
                $("#wxtip").show();//提示在浏览器打开的
                if(os.isPhone){
                    alert("请在Safari浏览器中打开")
                }
                else if(os.isAndroid){
                    alert("请在Chrome浏览器中打开")
                }
            }
            else if(os.isPhone){
                alert("请在Safari浏览器中打开")
            }
            else if(os.isAndroid){
                alert("请在Chrome浏览器中打开")
            }
        }

    </script>
</body>
</html>