<!DOCTYPE html>
<html lang="utf-8">
 {% for app_item in app_info %}
<head>
    <meta charset="UTF-8">
    <title>潜在商机</title>
</head>

 <script>
    function app_url(){
    window.open('{{app_item.app_url}}')
}
</script>

<body>
<div id="main">
        <div class="app">
            {% if app_info != [] %}
            <div class="reason">App如下:</div>
            <div class="info" >
                <div class="png">
                    <img style="padding-top: 2%"
                        src={{app_item.app_logo}}>
                    <div class="App">
                        {{app_item.app_name}}
                    </div>
                    <div class="app_url">
                         <input style="margin-top: 1%;margin-bottom: 2%;cursor: pointer" type="button" value="查看"  onclick="app_url()">
                    </div>
                </div>
            </div>
            {% endif %}
            {% endfor %}
        </div>

        <div>
            {% if website_info != [] %}
            <div class="reason">网站如下:</div>
             <div class="info" >
             {% for website in website_info %}
                 <a class="website" href="{{website.website_url}}" target="_blank">
                        {{website.website_name}}
                    </a>
            {% endfor %}
            </div>
            {% endif %}
        </div>


</div>
</body>
<style>
    .App{
        font-size: 12px;
    }
    .website {
        font-size: 12px;
        margin: 1% 1%;
        color: #0a1306;
        text-decoration:none
    }
    a:hover {
        color: #0000FF;
    }

    #main {
            height: 100%;
            width: 100%;
            background-color: #f5f5f5ce;
        }

    .png {
            margin-top: 0.3%;
            width: 45%;
            background-color: white;
            border-bottom: 1px solid #d4d4d4;
            margin-bottom: 0.5%;
        }

    .png:hover {
            /* 阴影 */
            box-shadow: 2px 2px 10px #909090;
        }

    .info {
            height: 100%;
            width: 90%;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            flex-wrap:wrap;
            justify-content: space-around;
            text-align: center;
        }

    .reason {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: 600;
            padding-left: 20px;
            font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
            font-size: 12px;
        }
</style>

</html>
