文章標題

頁面實現

<% include ../header.ejs %>
     <style type="text/css" xmlns="http://www.w3.org/1999/html">
    .modal-content {
        width: 800px;
    }
    .box-body .row {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .raw {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .content-block {
        padding: 10px;
        box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .07);
    }
    </style> 

正文內容

<div class="row content-block" style="margin-left: 10px;margin-right: 10px">
    <div class="box-header">
        <div style="border-left: 3px solid #008fbf; height: 25px; float: left; margin-right: 10px;"></div>
        <h3 class="box-title" style="line-height: 25px">應用信息</h3>
    </div>
    <div class="box-body dataTables_wrapper form-inline dt-bootstrap">

        <form class="form-horizontal col-sm-12" method="post" action=" <%- req.url %> ">
            <div class="row">
                <div class="form-group col-sm-4">
                    <label class="col-sm-4 control-label">名稱：</label>
                    <div class="col-sm-8">
                        <label class="control-label"><%= application.name %></label>
                    </div>
                </div>
                <div class="form-group col-sm-8">
                    <label class="col-sm-4 control-label">預覽地址：</label>
                    <div class="col-sm-8">
                        <div id="qrcode"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-sm-4">
                    <label class="col-sm-4 control-label">圖標：</label>
                    <div class="col-sm-8">
                        <img style="height: 25px; width: 25px" src="<%- application.icon %>">
                    </div>
                </div>
                <div class="form-group col-sm-8">
                    <label class="col-sm-4 control-label">創建時間：</label>
                    <div class="col-sm-8">
                        <label class="control-label"><%= Util.format(parseInt(application.createdat)) %></label>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row" style="display: flex">
    <div class="col-sm-7 content-block" style="margin:25px">
        <div class="box-header ">
            <div style="border-left: 3px solid #008fbf; height: 25px; float: left; margin-right: 10px;"></div>
            <h3 class="box-title" style="line-height: 25px">應用預覽</h3>
        </div>
        <div class="box-body" style="text-align: center">
            <div class=" btn-group">
                <button id="btn1" type="button" class="btn  btn-primary" οnclick="mystyleIphone5()">iPhone5
                </button>
                <button id="btn2" type="button" class="btn  btn-primary" οnclick="mystyleIphone6()">iPhone6
                </button>
                <button id="btn3" type="button" class="btn  btn-primary" οnclick="mystyleIphone6p()">iPhone6P
                </button>
                <button id="btn4" type="button" class="btn  btn-primary" οnclick="mystyleAndroid()">Android
                </button>
            </div>
        </div>
        <div class="box-body" style="text-align: center">
            <div id="cellphone">
                <iframe id="appPreview" frameborder="0" src="/appLayout/map/home/<%= application.id %>"
                        style="min-height: 568px">
                </iframe>
            </div>
        </div>
    </div>

    <div class="col-sm-5 content-block" style="margin-right:25px;margin-top:25px;margin-bottom:25px">
        <div class="box-header ">
            <div style="border-left: 3px solid #008fbf; height: 25px; float: left; margin-right: 10px;"></div>
            <h3 class="box-title" style="line-height: 25px">應用發佈</h3>
        </div>

        <form class="form-horizontal">
            <div class="row">
                <div class="form-group col-sm-12">
                    <div class="col-sm-offset-2">
                        <label class=" control-label">微信</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-sm-12">
                    <div class="col-sm-offset-2">
                        <a href="/cms/apppublish" class="btn btn-primary btn-lg">去發佈</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

js代碼

<script type="text/javascript" src="/lib/jquery.qrcode.min.js"></script>
<script>
    function mystyleIphone5() {
        document.getElementById("cellphone").style = "background:url(/images/iphone5.png) no-repeat center;text-align: center";
        document.getElementById("appPreview").width = 320;
        document.getElementById("appPreview").height = 568;
        document.getElementById("appPreview").style = "margin-bottom:100px;margin-top:108px;margin-left:20px;margin-right:18px";
    }
    function mystyleIphone6() {
        document.getElementById("cellphone").style = "background:url(/images/iphone6.png) no-repeat center;text-align: center";
        document.getElementById("appPreview").width = 375;
        document.getElementById("appPreview").height = 667;
        document.getElementById("appPreview").style = "margin-bottom:140px;margin-top:138px;margin-left:20px;margin-right:18px";
    }
    function mystyleIphone6p() {
        document.getElementById("cellphone").style = "background:url(/images/iphone6plus.png) no-repeat center;text-align: center"
        document.getElementById("appPreview").width = 414;
        document.getElementById("appPreview").height = 736;
        document.getElementById("appPreview").style = "margin-bottom:130px;margin-top:140px;margin-left:20px;margin-right:15px";
    }
    function mystyleAndroid() {
        document.getElementById("cellphone").style = "background:url(/images/android.png) no-repeat center;text-align: center"
        document.getElementById("appPreview").width = 360;
        document.getElementById("appPreview").height = 640;
        document.getElementById("appPreview").style = "margin-bottom:87px;margin-top:70px;margin-left:20px;margin-right:16px";
    }
    //    Window.οnlοad= mystyleIphone5();
    $(function () {
        $("#btn1").click();
    });

    jQuery('#qrcode').qrcode({
        width: 80,
        height: 80,
        text: "http://<%= host %>:<%= port %>/appLayout/map/home/<%= application.id %>"
    });
    $('#btn1').click(function () {
        $(this).toggleClass('active');
        $("#btn2").removeClass("active");
        $("#btn3").removeClass("active");
        $("#btn4").removeClass("active");

    });
    $('#btn2').click(function () {
        $(this).toggleClass('active');
        $("#btn1").removeClass("active");
        $("#btn3").removeClass("active");
        $("#btn4").removeClass("active");

    });
    $('#btn3').click(function () {
        $(this).toggleClass('active');
        $("#btn1").removeClass("active");
        $("#btn2").removeClass("active");
        $("#btn4").removeClass("active");

    });
    $('#btn4').click(function () {
        $(this).toggleClass('active');
        $("#btn1").removeClass("active");
        $("#btn2").removeClass("active");
        $("#btn3").removeClass("active");

    });


</script>

效果預覽