微信自适应页面

最新推荐文章于 2024-06-13 17:37:58 发布

原创最新推荐文章于 2024-06-13 17:37:58 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于Web的应用程序，该程序用于管理和操作优惠券的生成与核销过程。系统提供了直观的用户界面来展示优惠券的统计数据，并允许用户通过简单的点击操作选择不同的功能模块。

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8"/>
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta http-equiv="Expires" content="-1"/>
    <meta http-equiv="pragram" content="no-cache"/>
    <link rel="stylesheet" href="/static/boot/css/bootstrap.css">
    <link rel="stylesheet" href="/static/bin/css/coupon.css">
    <script src="/static/jquery/jquery-1.11.1.min.js"></script>
    <script src="/static/jquery/plugin/jquery.json.min.js"></script>
    <title>优惠券生成</title>
    <style type="text/css">
        html,body{
            font-family: Microsoft YaHei;
            font-size: 12px;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">

        if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
            var version = parseFloat(RegExp.$1);
            if(version>2.3){
                var phoneScale = parseInt(window.screen.width)/640;
                document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
            }else{
                document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
            }
        }else{
            document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
        }
        //微信去掉下方刷新栏
        if(navigator.userAgent.indexOf('MicroMessenger') >= 0){
            document.addEventListener('WeixinJSBridgeReady', function() {
                WeixinJSBridge.call('hideToolbar');
            });
        }
        $(function(){
            $(".buttonDiv div").on("click", function (e) {
                window.location = $(this).data("url");
            });
        });

    </script>
</head>
<body class=" bg-gray" style="height: 100%">
<div class="row parentDiv no-padding bg-black" style="height: 100%">
    <div class="col-md-12 buttonDiv no-padding" style="height: 15%">
        <div class="col-md-12 no-padding" style="text-align: center; vertical-align: middle; height: 50%; line-height: 600%; background: #E44833 "><span style="font-size: 35px; color: white">请选择功能</span></div>
        <div class="col-md-12 no-padding" style="text-align: center; vertical-align: middle; height: 50%; ; line-height: 600%">
            <span style="font-size: 25px; color: white">已发送${couponCountAll}张优惠券,使用${couponCountUsed}张,共${totalAmount}元</span>
        </div>
    </div>

    <div class="col-md-12 buttonDiv no-padding" style="height: 85%">
        <div class="col-md-12 label-item"
             style="text-align: center; vertical-align: middle; height: 50%; line-height: 2000%; background: #46b8da;"
             data-url="${pageContext.request.contextPath}/coupon/coupon_generate.html">
             <span style="font-size: 60px; color: white">优惠券生成</span>
        </div>
        <div class="col-md-12 label-item" style="text-align: center; height: 50%; line-height: 2000%; background: #fd7a40;"
             data-url="${pageContext.request.contextPath}/coupon/coupon_check.html">
             <span style="font-size: 60px; color: white">优惠券核销</span>
        </div>
    </div>
</div>

</body>

</html>